From cc263fe07a5076df2b624169c2f31ec18b335185 Mon Sep 17 00:00:00 2001
From: Patrick Huesmann <info@patrick-huesmann.de>
Date: Wed, 21 Feb 2024 11:53:45 +0100
Subject: [PATCH 1/6] feat: margin/border around image

---
 svgscreen/svgscreen.go | 36 ++++++++++++++++++++++++++++--------
 svgscreen/template.svg |  6 ++++++
 2 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/svgscreen/svgscreen.go b/svgscreen/svgscreen.go
index 30b9a10..6691724 100644
--- a/svgscreen/svgscreen.go
+++ b/svgscreen/svgscreen.go
@@ -58,6 +58,8 @@ type bgRect struct {
 type SvgDom struct {
 	Width          string
 	Height         string
+	MarginX        string
+	MarginY        string
 	FontName       string
 	FontEmbedded   []byte
 	FontRef        string
@@ -96,13 +98,13 @@ type Screen struct {
 	Dom              SvgDom
 }
 
-func (s *Screen) columnCoordinate(col int) string {
+func (s *Screen) columnCoordinate(col float32) string {
 	unit := "ch"
 	if s.CharacterBoxSize.Width > 0 {
 		unit = "px"
-		col *= s.CharacterBoxSize.Width
+		col *= float32(s.CharacterBoxSize.Width)
 	}
-	return strconv.Itoa(col) + unit
+	return fmt.Sprintf("%g%s", col, unit)
 }
 
 func (s *Screen) rowCoordinate(row float32) string {
@@ -185,7 +187,7 @@ func (s *Screen) lineToTextElement(l Line) textElement {
 		newSpan := s.charToFgText(c)
 		if s.GridMode {
 			// In grid mode, set X coordinate for each text span
-			newSpan.X = s.columnCoordinate(col)
+			newSpan.X = s.columnCoordinate(float32(col))
 			// In grid mode, we never consolidate
 			appendSpan()
 			currentSpan = newSpan
@@ -246,9 +248,9 @@ func (s *Screen) setupBgRects() {
 				return
 			}
 			s.Dom.BgRects = append(s.Dom.BgRects, bgRect{
-				X:      s.columnCoordinate(currentRect.x),
+				X:      s.columnCoordinate(float32(currentRect.x)),
 				Y:      s.rowCoordinate(float32(y)),
-				Width:  s.columnCoordinate(currentRect.w),
+				Width:  s.columnCoordinate(float32(currentRect.w)),
 				Height: s.rowCoordinate(1),
 				Color:  currentRect.color,
 			})
@@ -298,9 +300,27 @@ func (s *Screen) Render(w io.Writer) error {
 	s.Foreground.Custom = map[string]int{}
 	s.Background.Custom = map[string]int{}
 
+	marginX := float32(5.0)
+	marginY := float32(5.0)
+
 	// Set SVG size
-	s.Dom.Width = s.columnCoordinate(s.TerminalWidth)
-	s.Dom.Height = s.rowCoordinate(float32(s.NrLines))
+	if s.CharacterBoxSize.Width == 0 {
+		// Font-relative coordinates
+		s.Dom.Width = s.columnCoordinate(float32(s.TerminalWidth) + 2*marginX)
+		s.Dom.Height = s.rowCoordinate(float32(s.NrLines) + 2*marginY)
+		if marginX > 0 || marginY > 0 {
+			s.Dom.MarginX = fmt.Sprintf("%gch", marginX)
+			s.Dom.MarginY = fmt.Sprintf("%gem", marginY)
+		}
+	} else {
+		// Pixel coordinates
+		s.Dom.Width = fmt.Sprintf("%gpx", float32(s.CharacterBoxSize.Width*s.TerminalWidth)+2*marginX)
+		s.Dom.Height = fmt.Sprintf("%gpx", float32(s.CharacterBoxSize.Height*s.NrLines)+2*marginY)
+		if marginX > 0 || marginY > 0 {
+			s.Dom.MarginX = fmt.Sprintf("%gpx", marginX)
+			s.Dom.MarginY = fmt.Sprintf("%gpx", marginY)
+		}
+	}
 
 	s.handleColorInversion()
 	s.setupBgRects()
diff --git a/svgscreen/template.svg b/svgscreen/template.svg
index 33a5a56..6e3eb51 100644
--- a/svgscreen/template.svg
+++ b/svgscreen/template.svg
@@ -9,6 +9,12 @@ whitespace only tspan:s preventing underline to be properly rendered.
 */ -}}
 <svg width="{{$.Dom.Width}}" height="{{$.Dom.Height}}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
     <style>
+        {{- if ne $.Dom.MarginY "" }}
+        svg {
+            background-color: {{$.Background.Default}};
+            margin: {{$.Dom.MarginY}} {{$.Dom.MarginX}};
+	}
+        {{- end }}
         {{- if gt (len $.Dom.FontEmbedded) 0}}
         @font-face {
             font-family: {{$.Dom.FontName}};

From 0b3a43ce9750bbd29faea1dfd612b3cfe543a076 Mon Sep 17 00:00:00 2001
From: Patrick Huesmann <info@patrick-huesmann.de>
Date: Sat, 2 Mar 2024 14:51:41 +0100
Subject: [PATCH 2/6] refactor: BoxSize to common type XyDim

---
 ansitosvg/ansisvg.go     | 20 ++++++--------
 cli/cli.go               | 37 ++++---------------------
 svgscreen/svgscreen.go   | 22 ++++++---------
 svgscreen/xydim/xydim.go | 59 ++++++++++++++++++++++++++++++++++++++++
 4 files changed, 82 insertions(+), 56 deletions(-)
 create mode 100644 svgscreen/xydim/xydim.go

diff --git a/ansitosvg/ansisvg.go b/ansitosvg/ansisvg.go
index 0f8f496..f52cd76 100644
--- a/ansitosvg/ansisvg.go
+++ b/ansitosvg/ansisvg.go
@@ -7,6 +7,7 @@ import (
 	"github.com/wader/ansisvg/ansidecoder"
 	"github.com/wader/ansisvg/colorscheme/schemes"
 	"github.com/wader/ansisvg/svgscreen"
+	"github.com/wader/ansisvg/svgscreen/xydim"
 )
 
 type Options struct {
@@ -15,7 +16,7 @@ type Options struct {
 	FontRef       string
 	FontSize      int
 	TerminalWidth int
-	CharBoxSize   svgscreen.BoxSize
+	CharBoxSize   xydim.XyDimInt
 	ColorScheme   string
 	Transparent   bool
 	GridMode      bool
@@ -24,7 +25,7 @@ type Options struct {
 var DefaultOptions = Options{
 	FontName:    "Courier",
 	FontSize:    14,
-	CharBoxSize: svgscreen.BoxSize{Width: 0, Height: 0},
+	CharBoxSize: xydim.XyDimInt{X: 0, Y: 0},
 	ColorScheme: "Builtin Dark",
 	Transparent: false,
 }
@@ -129,15 +130,12 @@ func Convert(r io.Reader, w io.Writer, opts Options) error {
 			FontRef:      opts.FontRef,
 			FontSize:     opts.FontSize,
 		},
-		CharacterBoxSize: svgscreen.BoxSize{
-			Width:  opts.CharBoxSize.Width,
-			Height: opts.CharBoxSize.Height,
-		},
-		TerminalWidth: terminalWidth,
-		Columns:       ad.MaxX + 1,
-		NrLines:       ad.MaxY + 1,
-		Lines:         lines,
-		GridMode:      opts.GridMode,
+		CharacterBoxSize: opts.CharBoxSize,
+		TerminalWidth:    terminalWidth,
+		Columns:          ad.MaxX + 1,
+		NrLines:          ad.MaxY + 1,
+		Lines:            lines,
+		GridMode:         opts.GridMode,
 	}
 	return s.Render(w)
 }
diff --git a/cli/cli.go b/cli/cli.go
index a51e5b8..05f8742 100644
--- a/cli/cli.go
+++ b/cli/cli.go
@@ -4,33 +4,12 @@ import (
 	"flag"
 	"fmt"
 	"io"
-	"strconv"
 	"strings"
 
 	"github.com/wader/ansisvg/ansitosvg"
 	"github.com/wader/ansisvg/colorscheme/schemes"
-	"github.com/wader/ansisvg/svgscreen"
 )
 
-type boxSize struct {
-	Width  int
-	Height int
-}
-
-func (d *boxSize) String() string {
-	return fmt.Sprintf("%dx%d", d.Width, d.Height)
-}
-
-func (d *boxSize) Set(s string) error {
-	parts := strings.Split(s, "x")
-	if len(parts) != 2 {
-		return fmt.Errorf("must be WxH")
-	}
-	d.Width, _ = strconv.Atoi(parts[0])
-	d.Height, _ = strconv.Atoi(parts[1])
-	return nil
-}
-
 type Env struct {
 	Version  string
 	ReadFile func(string) ([]byte, error)
@@ -59,10 +38,7 @@ func Main(env Env) error {
 	var helpFlag bool
 	fs.BoolVar(&helpFlag, "h", false, "")
 	fs.BoolVar(&helpFlag, "help", false, "Show help")
-	var charBoxSize = boxSize{
-		Width:  ansitosvg.DefaultOptions.CharBoxSize.Width,
-		Height: ansitosvg.DefaultOptions.CharBoxSize.Height,
-	}
+	charBoxSize := ansitosvg.DefaultOptions.CharBoxSize
 	fs.Var(&charBoxSize, "charboxsize", "WxH|Character box size (use pixel units instead of font units)")
 	// handle error and usage output ourself
 	fs.Usage = func() {}
@@ -159,13 +135,10 @@ Example usage:
 			FontRef:       *fontRefFlag,
 			FontSize:      *fontSizeFlag,
 			TerminalWidth: terminalWidthFlag,
-			CharBoxSize: svgscreen.BoxSize{
-				Width:  charBoxSize.Width,
-				Height: charBoxSize.Height,
-			},
-			ColorScheme: *colorSchemeFlag,
-			Transparent: *transparentFlag,
-			GridMode:    *gridModeFlag,
+			CharBoxSize:   charBoxSize,
+			ColorScheme:   *colorSchemeFlag,
+			Transparent:   *transparentFlag,
+			GridMode:      *gridModeFlag,
 		},
 	)
 }
diff --git a/svgscreen/svgscreen.go b/svgscreen/svgscreen.go
index 6691724..952637f 100644
--- a/svgscreen/svgscreen.go
+++ b/svgscreen/svgscreen.go
@@ -5,6 +5,7 @@ import (
 	_ "embed"
 	"encoding/base64"
 	"fmt"
+	"github.com/wader/ansisvg/svgscreen/xydim"
 	"html/template"
 	"io"
 	"strconv"
@@ -31,11 +32,6 @@ type Line struct {
 	Chars []Char
 }
 
-type BoxSize struct {
-	Width  int
-	Height int
-}
-
 type textSpan struct {
 	X       string
 	Class   string
@@ -89,7 +85,7 @@ type Screen struct {
 	Background  ColorMap
 	ANSIColors  [16]string
 
-	CharacterBoxSize BoxSize
+	CharacterBoxSize xydim.XyDimInt
 	TerminalWidth    int
 	Columns          int
 	NrLines          int
@@ -100,18 +96,18 @@ type Screen struct {
 
 func (s *Screen) columnCoordinate(col float32) string {
 	unit := "ch"
-	if s.CharacterBoxSize.Width > 0 {
+	if s.CharacterBoxSize.X > 0 {
 		unit = "px"
-		col *= float32(s.CharacterBoxSize.Width)
+		col *= float32(s.CharacterBoxSize.X)
 	}
 	return fmt.Sprintf("%g%s", col, unit)
 }
 
 func (s *Screen) rowCoordinate(row float32) string {
 	unit := "em"
-	if s.CharacterBoxSize.Height > 0 {
+	if s.CharacterBoxSize.Y > 0 {
 		unit = "px"
-		row *= float32(s.CharacterBoxSize.Height)
+		row *= float32(s.CharacterBoxSize.Y)
 	}
 	return fmt.Sprintf("%g%s", row, unit)
 }
@@ -304,7 +300,7 @@ func (s *Screen) Render(w io.Writer) error {
 	marginY := float32(5.0)
 
 	// Set SVG size
-	if s.CharacterBoxSize.Width == 0 {
+	if s.CharacterBoxSize.X == 0 {
 		// Font-relative coordinates
 		s.Dom.Width = s.columnCoordinate(float32(s.TerminalWidth) + 2*marginX)
 		s.Dom.Height = s.rowCoordinate(float32(s.NrLines) + 2*marginY)
@@ -314,8 +310,8 @@ func (s *Screen) Render(w io.Writer) error {
 		}
 	} else {
 		// Pixel coordinates
-		s.Dom.Width = fmt.Sprintf("%gpx", float32(s.CharacterBoxSize.Width*s.TerminalWidth)+2*marginX)
-		s.Dom.Height = fmt.Sprintf("%gpx", float32(s.CharacterBoxSize.Height*s.NrLines)+2*marginY)
+		s.Dom.Width = fmt.Sprintf("%gpx", float32(s.CharacterBoxSize.X*s.TerminalWidth)+2*marginX)
+		s.Dom.Height = fmt.Sprintf("%gpx", float32(s.CharacterBoxSize.Y*s.NrLines)+2*marginY)
 		if marginX > 0 || marginY > 0 {
 			s.Dom.MarginX = fmt.Sprintf("%gpx", marginX)
 			s.Dom.MarginY = fmt.Sprintf("%gpx", marginY)
diff --git a/svgscreen/xydim/xydim.go b/svgscreen/xydim/xydim.go
new file mode 100644
index 0000000..d1a9b08
--- /dev/null
+++ b/svgscreen/xydim/xydim.go
@@ -0,0 +1,59 @@
+package xydim
+
+import (
+	"fmt"
+	"strconv"
+	"strings"
+)
+
+type XyDimInt struct {
+	X int
+	Y int
+}
+
+func (d *XyDimInt) String() string {
+	return fmt.Sprintf("%dx%d", d.X, d.Y)
+}
+
+func (d *XyDimInt) Set(s string) error {
+	parts := strings.Split(s, "x")
+	if len(parts) != 2 {
+		return fmt.Errorf("must be WxH")
+	}
+
+	var err1, err2 error
+	d.X, err1 = strconv.Atoi(parts[0])
+	d.Y, err2 = strconv.Atoi(parts[1])
+
+	if err1 != nil || err2 != nil {
+		return fmt.Errorf("int conversion error")
+	}
+	return nil
+}
+
+type XyDimFloat struct {
+	X float32
+	Y float32
+}
+
+func (d *XyDimFloat) String() string {
+	return fmt.Sprintf("%gx%g", d.X, d.Y)
+}
+
+func (d *XyDimFloat) Set(s string) error {
+	parts := strings.Split(s, "x")
+	if len(parts) != 2 {
+		return fmt.Errorf("must be WxH")
+	}
+
+	x, err1 := strconv.ParseFloat(parts[0], 32)
+	y, err2 := strconv.ParseFloat(parts[1], 32)
+
+	if err1 != nil || err2 != nil {
+		return fmt.Errorf("float conversion error")
+	}
+
+	d.X = float32(x)
+	d.Y = float32(y)
+	return nil
+}

From 350e0c9c5c25cb7b07267f7e9f4c7ea3f5343b17 Mon Sep 17 00:00:00 2001
From: Patrick Huesmann <info@patrick-huesmann.de>
Date: Sat, 2 Mar 2024 15:05:27 +0100
Subject: [PATCH 3/6] add: --marginsize argument

---
 ansitosvg/ansisvg.go                |  3 +++
 cli/cli.go                          |  3 +++
 cli/testdata/help-short-flag.stdout |  1 +
 cli/testdata/help.stdout            |  1 +
 svgscreen/svgscreen.go              | 24 +++++++++++-------------
 5 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/ansitosvg/ansisvg.go b/ansitosvg/ansisvg.go
index f52cd76..7cc3686 100644
--- a/ansitosvg/ansisvg.go
+++ b/ansitosvg/ansisvg.go
@@ -17,6 +17,7 @@ type Options struct {
 	FontSize      int
 	TerminalWidth int
 	CharBoxSize   xydim.XyDimInt
+	MarginSize    xydim.XyDimFloat
 	ColorScheme   string
 	Transparent   bool
 	GridMode      bool
@@ -26,6 +27,7 @@ var DefaultOptions = Options{
 	FontName:    "Courier",
 	FontSize:    14,
 	CharBoxSize: xydim.XyDimInt{X: 0, Y: 0},
+	MarginSize:  xydim.XyDimFloat{X: 0, Y: 0},
 	ColorScheme: "Builtin Dark",
 	Transparent: false,
 }
@@ -131,6 +133,7 @@ func Convert(r io.Reader, w io.Writer, opts Options) error {
 			FontSize:     opts.FontSize,
 		},
 		CharacterBoxSize: opts.CharBoxSize,
+		MarginSize:       opts.MarginSize,
 		TerminalWidth:    terminalWidth,
 		Columns:          ad.MaxX + 1,
 		NrLines:          ad.MaxY + 1,
diff --git a/cli/cli.go b/cli/cli.go
index 05f8742..0973829 100644
--- a/cli/cli.go
+++ b/cli/cli.go
@@ -40,6 +40,8 @@ func Main(env Env) error {
 	fs.BoolVar(&helpFlag, "help", false, "Show help")
 	charBoxSize := ansitosvg.DefaultOptions.CharBoxSize
 	fs.Var(&charBoxSize, "charboxsize", "WxH|Character box size (use pixel units instead of font units)")
+	marginSize := ansitosvg.DefaultOptions.MarginSize
+	fs.Var(&marginSize, "marginsize", "WxH|Margin size (in either pixel or font units)")
 	// handle error and usage output ourself
 	fs.Usage = func() {}
 	fs.SetOutput(io.Discard)
@@ -136,6 +138,7 @@ Example usage:
 			FontSize:      *fontSizeFlag,
 			TerminalWidth: terminalWidthFlag,
 			CharBoxSize:   charBoxSize,
+			MarginSize:    marginSize,
 			ColorScheme:   *colorSchemeFlag,
 			Transparent:   *transparentFlag,
 			GridMode:      *gridModeFlag,
diff --git a/cli/testdata/help-short-flag.stdout b/cli/testdata/help-short-flag.stdout
index b0cdd9d..4c351a2 100644
--- a/cli/testdata/help-short-flag.stdout
+++ b/cli/testdata/help-short-flag.stdout
@@ -13,6 +13,7 @@ Example usage:
 --grid              Grid mode (sets position for each character)
 --help, -h          Show help
 --listcolorschemes  List color schemes
+--marginsize WxH    Margin size (in either pixel or font units)
 --transparent       Transparent background
 --version, -v       Show version
 --width, -w NUMBER  Terminal width (auto if not set)
diff --git a/cli/testdata/help.stdout b/cli/testdata/help.stdout
index b0cdd9d..4c351a2 100644
--- a/cli/testdata/help.stdout
+++ b/cli/testdata/help.stdout
@@ -13,6 +13,7 @@ Example usage:
 --grid              Grid mode (sets position for each character)
 --help, -h          Show help
 --listcolorschemes  List color schemes
+--marginsize WxH    Margin size (in either pixel or font units)
 --transparent       Transparent background
 --version, -v       Show version
 --width, -w NUMBER  Terminal width (auto if not set)
diff --git a/svgscreen/svgscreen.go b/svgscreen/svgscreen.go
index 952637f..b34061d 100644
--- a/svgscreen/svgscreen.go
+++ b/svgscreen/svgscreen.go
@@ -86,6 +86,7 @@ type Screen struct {
 	ANSIColors  [16]string
 
 	CharacterBoxSize xydim.XyDimInt
+	MarginSize       xydim.XyDimFloat
 	TerminalWidth    int
 	Columns          int
 	NrLines          int
@@ -296,25 +297,22 @@ func (s *Screen) Render(w io.Writer) error {
 	s.Foreground.Custom = map[string]int{}
 	s.Background.Custom = map[string]int{}
 
-	marginX := float32(5.0)
-	marginY := float32(5.0)
-
 	// Set SVG size
 	if s.CharacterBoxSize.X == 0 {
 		// Font-relative coordinates
-		s.Dom.Width = s.columnCoordinate(float32(s.TerminalWidth) + 2*marginX)
-		s.Dom.Height = s.rowCoordinate(float32(s.NrLines) + 2*marginY)
-		if marginX > 0 || marginY > 0 {
-			s.Dom.MarginX = fmt.Sprintf("%gch", marginX)
-			s.Dom.MarginY = fmt.Sprintf("%gem", marginY)
+		s.Dom.Width = s.columnCoordinate(float32(s.TerminalWidth) + 2*s.MarginSize.X)
+		s.Dom.Height = s.rowCoordinate(float32(s.NrLines) + 2*s.MarginSize.Y)
+		if s.MarginSize.X > 0 || s.MarginSize.Y > 0 {
+			s.Dom.MarginX = fmt.Sprintf("%gch", s.MarginSize.X)
+			s.Dom.MarginY = fmt.Sprintf("%gem", s.MarginSize.Y)
 		}
 	} else {
 		// Pixel coordinates
-		s.Dom.Width = fmt.Sprintf("%gpx", float32(s.CharacterBoxSize.X*s.TerminalWidth)+2*marginX)
-		s.Dom.Height = fmt.Sprintf("%gpx", float32(s.CharacterBoxSize.Y*s.NrLines)+2*marginY)
-		if marginX > 0 || marginY > 0 {
-			s.Dom.MarginX = fmt.Sprintf("%gpx", marginX)
-			s.Dom.MarginY = fmt.Sprintf("%gpx", marginY)
+		s.Dom.Width = fmt.Sprintf("%gpx", float32(s.CharacterBoxSize.X*s.TerminalWidth)+2*s.MarginSize.X)
+		s.Dom.Height = fmt.Sprintf("%gpx", float32(s.CharacterBoxSize.Y*s.NrLines)+2*s.MarginSize.Y)
+		if s.MarginSize.X > 0 || s.MarginSize.Y > 0 {
+			s.Dom.MarginX = fmt.Sprintf("%gpx", s.MarginSize.X)
+			s.Dom.MarginY = fmt.Sprintf("%gpx", s.MarginSize.Y)
 		}
 	}
 

From 2907675f4ffd97020bacfe973fbe35ca006ef7f7 Mon Sep 17 00:00:00 2001
From: Patrick Huesmann <info@patrick-huesmann.de>
Date: Sun, 10 Mar 2024 17:01:33 +0100
Subject: [PATCH 4/6] change: make margin with coordinate offset

instead of CSS "margin" style; is simpler and more robust
---
 svgscreen/svgscreen.go | 38 ++++++++++++++++++--------------------
 svgscreen/template.svg | 10 +---------
 2 files changed, 19 insertions(+), 29 deletions(-)

diff --git a/svgscreen/svgscreen.go b/svgscreen/svgscreen.go
index b34061d..b4fad01 100644
--- a/svgscreen/svgscreen.go
+++ b/svgscreen/svgscreen.go
@@ -39,6 +39,7 @@ type textSpan struct {
 }
 
 type textElement struct {
+	X         string
 	Y         string
 	TextSpans []textSpan
 }
@@ -54,8 +55,6 @@ type bgRect struct {
 type SvgDom struct {
 	Width          string
 	Height         string
-	MarginX        string
-	MarginY        string
 	FontName       string
 	FontEmbedded   []byte
 	FontRef        string
@@ -95,21 +94,27 @@ type Screen struct {
 	Dom              SvgDom
 }
 
-func (s *Screen) columnCoordinate(col float32) string {
+func (s *Screen) columnCoordinate(col float32, addMargin bool) string {
 	unit := "ch"
 	if s.CharacterBoxSize.X > 0 {
 		unit = "px"
 		col *= float32(s.CharacterBoxSize.X)
 	}
+	if addMargin {
+		col += s.MarginSize.X
+	}
 	return fmt.Sprintf("%g%s", col, unit)
 }
 
-func (s *Screen) rowCoordinate(row float32) string {
+func (s *Screen) rowCoordinate(row float32, addMargin bool) string {
 	unit := "em"
 	if s.CharacterBoxSize.Y > 0 {
 		unit = "px"
 		row *= float32(s.CharacterBoxSize.Y)
 	}
+	if addMargin {
+		row += s.MarginSize.Y
+	}
 	return fmt.Sprintf("%g%s", row, unit)
 }
 
@@ -184,7 +189,7 @@ func (s *Screen) lineToTextElement(l Line) textElement {
 		newSpan := s.charToFgText(c)
 		if s.GridMode {
 			// In grid mode, set X coordinate for each text span
-			newSpan.X = s.columnCoordinate(float32(col))
+			newSpan.X = s.columnCoordinate(float32(col), true)
 			// In grid mode, we never consolidate
 			appendSpan()
 			currentSpan = newSpan
@@ -207,7 +212,8 @@ func (s *Screen) lineToTextElement(l Line) textElement {
 	}
 
 	return textElement{
-		Y:         s.rowCoordinate(float32(l.Y) + 0.5),
+		X:         s.columnCoordinate(0, true),
+		Y:         s.rowCoordinate(float32(l.Y)+0.5, true),
 		TextSpans: t,
 	}
 }
@@ -245,10 +251,10 @@ func (s *Screen) setupBgRects() {
 				return
 			}
 			s.Dom.BgRects = append(s.Dom.BgRects, bgRect{
-				X:      s.columnCoordinate(float32(currentRect.x)),
-				Y:      s.rowCoordinate(float32(y)),
-				Width:  s.columnCoordinate(float32(currentRect.w)),
-				Height: s.rowCoordinate(1),
+				X:      s.columnCoordinate(float32(currentRect.x), true),
+				Y:      s.rowCoordinate(float32(y), true),
+				Width:  s.columnCoordinate(float32(currentRect.w), false),
+				Height: s.rowCoordinate(1, false),
 				Color:  currentRect.color,
 			})
 		}
@@ -300,20 +306,12 @@ func (s *Screen) Render(w io.Writer) error {
 	// Set SVG size
 	if s.CharacterBoxSize.X == 0 {
 		// Font-relative coordinates
-		s.Dom.Width = s.columnCoordinate(float32(s.TerminalWidth) + 2*s.MarginSize.X)
-		s.Dom.Height = s.rowCoordinate(float32(s.NrLines) + 2*s.MarginSize.Y)
-		if s.MarginSize.X > 0 || s.MarginSize.Y > 0 {
-			s.Dom.MarginX = fmt.Sprintf("%gch", s.MarginSize.X)
-			s.Dom.MarginY = fmt.Sprintf("%gem", s.MarginSize.Y)
-		}
+		s.Dom.Width = s.columnCoordinate(float32(s.TerminalWidth)+2*s.MarginSize.X, false)
+		s.Dom.Height = s.rowCoordinate(float32(s.NrLines)+2*s.MarginSize.Y, false)
 	} else {
 		// Pixel coordinates
 		s.Dom.Width = fmt.Sprintf("%gpx", float32(s.CharacterBoxSize.X*s.TerminalWidth)+2*s.MarginSize.X)
 		s.Dom.Height = fmt.Sprintf("%gpx", float32(s.CharacterBoxSize.Y*s.NrLines)+2*s.MarginSize.Y)
-		if s.MarginSize.X > 0 || s.MarginSize.Y > 0 {
-			s.Dom.MarginX = fmt.Sprintf("%gpx", s.MarginSize.X)
-			s.Dom.MarginY = fmt.Sprintf("%gpx", s.MarginSize.Y)
-		}
 	}
 
 	s.handleColorInversion()
diff --git a/svgscreen/template.svg b/svgscreen/template.svg
index 6e3eb51..e67a676 100644
--- a/svgscreen/template.svg
+++ b/svgscreen/template.svg
@@ -9,12 +9,6 @@ whitespace only tspan:s preventing underline to be properly rendered.
 */ -}}
 <svg width="{{$.Dom.Width}}" height="{{$.Dom.Height}}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
     <style>
-        {{- if ne $.Dom.MarginY "" }}
-        svg {
-            background-color: {{$.Background.Default}};
-            margin: {{$.Dom.MarginY}} {{$.Dom.MarginX}};
-	}
-        {{- end }}
         {{- if gt (len $.Dom.FontEmbedded) 0}}
         @font-face {
             font-family: {{$.Dom.FontName}};
@@ -98,9 +92,7 @@ whitespace only tspan:s preventing underline to be properly rendered.
 {{- end}}
 </g>
 {{- end}}
-<g x="0">
 {{- range $li, $l := .Dom.TextElements}}
-<text y="{{$l.Y}}">{{- range $si, $s := $l.TextSpans}}<tspan{{if ne $s.X ""}} x="{{ $s.X }}"{{end}}{{if ne $s.Class ""}} class="{{$s.Class}}"{{end}}>{{$s.Content}}</tspan>{{- end}}</text>
+<text x="{{$l.X}}" y="{{$l.Y}}">{{- range $si, $s := $l.TextSpans}}<tspan{{if ne $s.X ""}} x="{{ $s.X }}"{{end}}{{if ne $s.Class ""}} class="{{$s.Class}}"{{end}}>{{$s.Content}}</tspan>{{- end}}</text>
 {{- end}}
-</g>
 </svg>

From f9cb4842d9924c2183a2114bb8f902aa67391624 Mon Sep 17 00:00:00 2001
From: Patrick Huesmann <info@patrick-huesmann.de>
Date: Sun, 10 Mar 2024 17:38:23 +0100
Subject: [PATCH 5/6] Update testdata

---
 cli/testdata/b-it-ul-st.svg                   |  14 +-
 cli/testdata/charboxfontsize.svg              |   6 +-
 cli/testdata/colortest.svg                    |  40 +-
 cli/testdata/colortest_slate.svg              |  40 +-
 cli/testdata/colortest_transparent.svg        |  40 +-
 cli/testdata/cowsay-osc-colon-color.svg       |  18 +-
 cli/testdata/fontembedded.svg                 |   4 +-
 cli/testdata/fontname.svg                     |   4 +-
 cli/testdata/fontref.svg                      |   4 +-
 cli/testdata/fq.svg                           |  20 +-
 cli/testdata/invert_color.svg                 |   4 +-
 cli/testdata/invert_default.svg               |   4 +-
 cli/testdata/jq.svg                           |  24 +-
 cli/testdata/main.go.bat.svg                  | 114 ++--
 cli/testdata/margintest_gridmode.ansi         |  15 +
 cli/testdata/margintest_gridmode.args         |   1 +
 cli/testdata/margintest_gridmode.svg          | 553 ++++++++++++++++++
 cli/testdata/margintest_nogridmode.ansi       |  15 +
 cli/testdata/margintest_nogridmode.args       |   1 +
 cli/testdata/margintest_nogridmode.svg        | 553 ++++++++++++++++++
 cli/testdata/nonewline.svg                    |   4 +-
 cli/testdata/onechar.svg                      |   4 +-
 cli/testdata/onecharnewline.svg               |   4 +-
 cli/testdata/oneline.svg                      |   4 +-
 cli/testdata/params-colon-semicolon.svg       |   4 +-
 cli/testdata/powerline.svg                    |  10 +-
 cli/testdata/tabs.svg                         |  20 +-
 cli/testdata/terminal-colors-n.svg            |  38 +-
 cli/testdata/terminalwidth4.svg               |   4 +-
 cli/testdata/underlinedefault.svg             |   6 +-
 cli/testdata/underlinenewline.svg             |   6 +-
 cli/testdata/underlinetabs.svg                |  20 +-
 .../underlinetabs_backgroundcolor.svg         |  20 +-
 33 files changed, 1351 insertions(+), 267 deletions(-)
 create mode 100644 cli/testdata/margintest_gridmode.ansi
 create mode 100644 cli/testdata/margintest_gridmode.args
 create mode 100644 cli/testdata/margintest_gridmode.svg
 create mode 100644 cli/testdata/margintest_nogridmode.ansi
 create mode 100644 cli/testdata/margintest_nogridmode.args
 create mode 100644 cli/testdata/margintest_nogridmode.svg

diff --git a/cli/testdata/b-it-ul-st.svg b/cli/testdata/b-it-ul-st.svg
index 7d1b9ed..5cd66cd 100644
--- a/cli/testdata/b-it-ul-st.svg
+++ b/cli/testdata/b-it-ul-st.svg
@@ -27,12 +27,10 @@
         }
     </style>
     <rect width="100%" height="100%" x="0" y="0" style="fill: #000000"/>
-<g x="0">
-<text y="0.5em"><tspan>regular</tspan></text>
-<text y="1.5em"><tspan class="bold">bold</tspan></text>
-<text y="2.5em"><tspan class="italic">italic</tspan></text>
-<text y="3.5em"><tspan class="bold italic">bold italic</tspan></text>
-<text y="4.5em"><tspan class="underline">underline</tspan></text>
-<text y="5.5em"><tspan class="strikethrough">strikethrough</tspan></text>
-</g>
+<text x="0ch" y="0.5em"><tspan>regular</tspan></text>
+<text x="0ch" y="1.5em"><tspan class="bold">bold</tspan></text>
+<text x="0ch" y="2.5em"><tspan class="italic">italic</tspan></text>
+<text x="0ch" y="3.5em"><tspan class="bold italic">bold italic</tspan></text>
+<text x="0ch" y="4.5em"><tspan class="underline">underline</tspan></text>
+<text x="0ch" y="5.5em"><tspan class="strikethrough">strikethrough</tspan></text>
 </svg>
diff --git a/cli/testdata/charboxfontsize.svg b/cli/testdata/charboxfontsize.svg
index 1aedbdf..d7d27e5 100644
--- a/cli/testdata/charboxfontsize.svg
+++ b/cli/testdata/charboxfontsize.svg
@@ -15,8 +15,6 @@
         }
     </style>
     <rect width="100%" height="100%" x="0" y="0" style="fill: #000000"/>
-<g x="0">
-<text y="25px"><tspan x="0px">h</tspan><tspan x="50px">e</tspan><tspan x="100px">l</tspan><tspan x="150px">l</tspan><tspan x="200px">o</tspan></text>
-<text y="75px"><tspan x="0px">w</tspan><tspan x="50px">o</tspan><tspan x="100px">r</tspan><tspan x="150px">l</tspan><tspan x="200px">d</tspan></text>
-</g>
+<text x="0px" y="25px"><tspan x="0px">h</tspan><tspan x="50px">e</tspan><tspan x="100px">l</tspan><tspan x="150px">l</tspan><tspan x="200px">o</tspan></text>
+<text x="0px" y="75px"><tspan x="0px">w</tspan><tspan x="50px">o</tspan><tspan x="100px">r</tspan><tspan x="150px">l</tspan><tspan x="200px">d</tspan></text>
 </svg>
diff --git a/cli/testdata/colortest.svg b/cli/testdata/colortest.svg
index d17f932..81705c5 100644
--- a/cli/testdata/colortest.svg
+++ b/cli/testdata/colortest.svg
@@ -182,25 +182,23 @@
 <rect x="63ch" y="19em" width="7ch" height="1em" class="ba6"/>
 <rect x="71ch" y="19em" width="7ch" height="1em" class="ba7"/>
 </g>
-<g x="0">
-<text y="1.5em"><tspan>                 40m     41m     42m     43m     44m     45m     46m     47m</tspan></text>
-<text y="2.5em"><tspan>     m   gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="3.5em"><tspan>    1m   </tspan><tspan class="bold">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="4.5em"><tspan>   30m   </tspan><tspan class="fa0">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="5.5em"><tspan> 1;30m   </tspan><tspan class="bold fa0">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="6.5em"><tspan>   31m   </tspan><tspan class="fa1">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="7.5em"><tspan> 1;31m   </tspan><tspan class="bold fa1">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="8.5em"><tspan>   32m   </tspan><tspan class="fa2">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="9.5em"><tspan> 1;32m   </tspan><tspan class="bold fa2">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="10.5em"><tspan>   33m   </tspan><tspan class="fa3">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="11.5em"><tspan> 1;33m   </tspan><tspan class="bold fa3">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="12.5em"><tspan>   34m   </tspan><tspan class="fa4">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="13.5em"><tspan> 1;34m   </tspan><tspan class="bold fa4">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="14.5em"><tspan>   35m   </tspan><tspan class="fa5">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="15.5em"><tspan> 1;35m   </tspan><tspan class="bold fa5">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="16.5em"><tspan>   36m   </tspan><tspan class="fa6">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="17.5em"><tspan> 1;36m   </tspan><tspan class="bold fa6">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="18.5em"><tspan>   37m   </tspan><tspan class="fa7">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="19.5em"><tspan> 1;37m   </tspan><tspan class="bold fa7">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-</g>
+<text x="0ch" y="1.5em"><tspan>                 40m     41m     42m     43m     44m     45m     46m     47m</tspan></text>
+<text x="0ch" y="2.5em"><tspan>     m   gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="3.5em"><tspan>    1m   </tspan><tspan class="bold">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="4.5em"><tspan>   30m   </tspan><tspan class="fa0">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="5.5em"><tspan> 1;30m   </tspan><tspan class="bold fa0">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="6.5em"><tspan>   31m   </tspan><tspan class="fa1">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="7.5em"><tspan> 1;31m   </tspan><tspan class="bold fa1">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="8.5em"><tspan>   32m   </tspan><tspan class="fa2">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="9.5em"><tspan> 1;32m   </tspan><tspan class="bold fa2">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="10.5em"><tspan>   33m   </tspan><tspan class="fa3">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="11.5em"><tspan> 1;33m   </tspan><tspan class="bold fa3">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="12.5em"><tspan>   34m   </tspan><tspan class="fa4">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="13.5em"><tspan> 1;34m   </tspan><tspan class="bold fa4">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="14.5em"><tspan>   35m   </tspan><tspan class="fa5">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="15.5em"><tspan> 1;35m   </tspan><tspan class="bold fa5">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="16.5em"><tspan>   36m   </tspan><tspan class="fa6">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="17.5em"><tspan> 1;36m   </tspan><tspan class="bold fa6">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="18.5em"><tspan>   37m   </tspan><tspan class="fa7">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="19.5em"><tspan> 1;37m   </tspan><tspan class="bold fa7">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
 </svg>
diff --git a/cli/testdata/colortest_slate.svg b/cli/testdata/colortest_slate.svg
index 964fdfa..634a2ab 100644
--- a/cli/testdata/colortest_slate.svg
+++ b/cli/testdata/colortest_slate.svg
@@ -182,25 +182,23 @@
 <rect x="63ch" y="19em" width="7ch" height="1em" class="ba6"/>
 <rect x="71ch" y="19em" width="7ch" height="1em" class="ba7"/>
 </g>
-<g x="0">
-<text y="1.5em"><tspan>                 40m     41m     42m     43m     44m     45m     46m     47m</tspan></text>
-<text y="2.5em"><tspan>     m   gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="3.5em"><tspan>    1m   </tspan><tspan class="bold">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="4.5em"><tspan>   30m   </tspan><tspan class="fa0">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="5.5em"><tspan> 1;30m   </tspan><tspan class="bold fa0">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="6.5em"><tspan>   31m   </tspan><tspan class="fa1">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="7.5em"><tspan> 1;31m   </tspan><tspan class="bold fa1">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="8.5em"><tspan>   32m   </tspan><tspan class="fa2">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="9.5em"><tspan> 1;32m   </tspan><tspan class="bold fa2">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="10.5em"><tspan>   33m   </tspan><tspan class="fa3">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="11.5em"><tspan> 1;33m   </tspan><tspan class="bold fa3">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="12.5em"><tspan>   34m   </tspan><tspan class="fa4">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="13.5em"><tspan> 1;34m   </tspan><tspan class="bold fa4">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="14.5em"><tspan>   35m   </tspan><tspan class="fa5">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="15.5em"><tspan> 1;35m   </tspan><tspan class="bold fa5">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="16.5em"><tspan>   36m   </tspan><tspan class="fa6">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="17.5em"><tspan> 1;36m   </tspan><tspan class="bold fa6">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="18.5em"><tspan>   37m   </tspan><tspan class="fa7">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="19.5em"><tspan> 1;37m   </tspan><tspan class="bold fa7">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-</g>
+<text x="0ch" y="1.5em"><tspan>                 40m     41m     42m     43m     44m     45m     46m     47m</tspan></text>
+<text x="0ch" y="2.5em"><tspan>     m   gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="3.5em"><tspan>    1m   </tspan><tspan class="bold">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="4.5em"><tspan>   30m   </tspan><tspan class="fa0">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="5.5em"><tspan> 1;30m   </tspan><tspan class="bold fa0">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="6.5em"><tspan>   31m   </tspan><tspan class="fa1">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="7.5em"><tspan> 1;31m   </tspan><tspan class="bold fa1">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="8.5em"><tspan>   32m   </tspan><tspan class="fa2">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="9.5em"><tspan> 1;32m   </tspan><tspan class="bold fa2">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="10.5em"><tspan>   33m   </tspan><tspan class="fa3">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="11.5em"><tspan> 1;33m   </tspan><tspan class="bold fa3">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="12.5em"><tspan>   34m   </tspan><tspan class="fa4">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="13.5em"><tspan> 1;34m   </tspan><tspan class="bold fa4">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="14.5em"><tspan>   35m   </tspan><tspan class="fa5">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="15.5em"><tspan> 1;35m   </tspan><tspan class="bold fa5">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="16.5em"><tspan>   36m   </tspan><tspan class="fa6">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="17.5em"><tspan> 1;36m   </tspan><tspan class="bold fa6">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="18.5em"><tspan>   37m   </tspan><tspan class="fa7">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="19.5em"><tspan> 1;37m   </tspan><tspan class="bold fa7">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
 </svg>
diff --git a/cli/testdata/colortest_transparent.svg b/cli/testdata/colortest_transparent.svg
index 73203f4..5b221a8 100644
--- a/cli/testdata/colortest_transparent.svg
+++ b/cli/testdata/colortest_transparent.svg
@@ -181,25 +181,23 @@
 <rect x="63ch" y="19em" width="7ch" height="1em" class="ba6"/>
 <rect x="71ch" y="19em" width="7ch" height="1em" class="ba7"/>
 </g>
-<g x="0">
-<text y="1.5em"><tspan>                 40m     41m     42m     43m     44m     45m     46m     47m</tspan></text>
-<text y="2.5em"><tspan>     m   gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="3.5em"><tspan>    1m   </tspan><tspan class="bold">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="4.5em"><tspan>   30m   </tspan><tspan class="fa0">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="5.5em"><tspan> 1;30m   </tspan><tspan class="bold fa0">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="6.5em"><tspan>   31m   </tspan><tspan class="fa1">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="7.5em"><tspan> 1;31m   </tspan><tspan class="bold fa1">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="8.5em"><tspan>   32m   </tspan><tspan class="fa2">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="9.5em"><tspan> 1;32m   </tspan><tspan class="bold fa2">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="10.5em"><tspan>   33m   </tspan><tspan class="fa3">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="11.5em"><tspan> 1;33m   </tspan><tspan class="bold fa3">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="12.5em"><tspan>   34m   </tspan><tspan class="fa4">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="13.5em"><tspan> 1;34m   </tspan><tspan class="bold fa4">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="14.5em"><tspan>   35m   </tspan><tspan class="fa5">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="15.5em"><tspan> 1;35m   </tspan><tspan class="bold fa5">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="16.5em"><tspan>   36m   </tspan><tspan class="fa6">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="17.5em"><tspan> 1;36m   </tspan><tspan class="bold fa6">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="18.5em"><tspan>   37m   </tspan><tspan class="fa7">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-<text y="19.5em"><tspan> 1;37m   </tspan><tspan class="bold fa7">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
-</g>
+<text x="0ch" y="1.5em"><tspan>                 40m     41m     42m     43m     44m     45m     46m     47m</tspan></text>
+<text x="0ch" y="2.5em"><tspan>     m   gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="3.5em"><tspan>    1m   </tspan><tspan class="bold">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="4.5em"><tspan>   30m   </tspan><tspan class="fa0">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="5.5em"><tspan> 1;30m   </tspan><tspan class="bold fa0">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="6.5em"><tspan>   31m   </tspan><tspan class="fa1">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="7.5em"><tspan> 1;31m   </tspan><tspan class="bold fa1">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="8.5em"><tspan>   32m   </tspan><tspan class="fa2">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="9.5em"><tspan> 1;32m   </tspan><tspan class="bold fa2">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="10.5em"><tspan>   33m   </tspan><tspan class="fa3">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="11.5em"><tspan> 1;33m   </tspan><tspan class="bold fa3">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="12.5em"><tspan>   34m   </tspan><tspan class="fa4">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="13.5em"><tspan> 1;34m   </tspan><tspan class="bold fa4">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="14.5em"><tspan>   35m   </tspan><tspan class="fa5">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="15.5em"><tspan> 1;35m   </tspan><tspan class="bold fa5">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="16.5em"><tspan>   36m   </tspan><tspan class="fa6">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="17.5em"><tspan> 1;36m   </tspan><tspan class="bold fa6">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="18.5em"><tspan>   37m   </tspan><tspan class="fa7">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
+<text x="0ch" y="19.5em"><tspan> 1;37m   </tspan><tspan class="bold fa7">gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw     gYw  </tspan></text>
 </svg>
diff --git a/cli/testdata/cowsay-osc-colon-color.svg b/cli/testdata/cowsay-osc-colon-color.svg
index 224210a..6c33c4a 100644
--- a/cli/testdata/cowsay-osc-colon-color.svg
+++ b/cli/testdata/cowsay-osc-colon-color.svg
@@ -62,14 +62,12 @@
         .fc45 { fill: #fd324f; }
     </style>
     <rect width="100%" height="100%" x="0" y="0" style="fill: #000000"/>
-<g x="0">
-<text y="0.5em"><tspan> </tspan><tspan class="fc1">_</tspan><tspan class="fc2">_</tspan><tspan class="fc3">_</tspan><tspan class="fc4">_</tspan><tspan class="fc5">_</tspan><tspan class="fc6">_</tspan><tspan class="fc7">_</tspan><tspan class="fc8">_</tspan><tspan class="fc9">_</tspan><tspan class="fc10">_</tspan><tspan class="fc11">_</tspan><tspan class="fc12">_</tspan></text>
-<text y="1.5em"><tspan class="fc3">&lt; </tspan><tspan class="fc5">H</tspan><tspan class="fc6">e</tspan><tspan class="fc7">l</tspan><tspan class="fc8">l</tspan><tspan class="fc9">o </tspan><tspan class="fc11">A</tspan><tspan class="fc12">N</tspan><tspan class="fc13">S</tspan><tspan class="fc14">I </tspan><tspan class="fc16">&gt;</tspan></text>
-<text y="2.5em"><tspan> </tspan><tspan class="fc7">-</tspan><tspan class="fc8">-</tspan><tspan class="fc9">-</tspan><tspan class="fc10">-</tspan><tspan class="fc11">-</tspan><tspan class="fc12">-</tspan><tspan class="fc13">-</tspan><tspan class="fc14">-</tspan><tspan class="fc15">-</tspan><tspan class="fc16">-</tspan><tspan class="fc17">-</tspan><tspan class="fc18">-</tspan></text>
-<text y="3.5em"><tspan>        </tspan><tspan class="fc17">\   </tspan><tspan class="fc21">^</tspan><tspan class="fc22">_</tspan><tspan class="fc23">_</tspan><tspan class="fc24">^</tspan></text>
-<text y="4.5em"><tspan>         </tspan><tspan class="fc21">\  </tspan><tspan class="fc24">(</tspan><tspan class="fc25">o</tspan><tspan class="fc26">o</tspan><tspan class="fc27">)</tspan><tspan class="fc28">\</tspan><tspan class="fc29">_</tspan><tspan class="fc30">_</tspan><tspan class="fc31">_</tspan><tspan class="fc32">_</tspan><tspan class="fc33">_</tspan><tspan class="fc34">_</tspan><tspan class="fc35">_</tspan></text>
-<text y="5.5em"><tspan>            </tspan><tspan class="fc27">(</tspan><tspan class="fc28">_</tspan><tspan class="fc29">_</tspan><tspan class="fc30">)</tspan><tspan class="fc31">\       </tspan><tspan class="fc39">)</tspan><tspan class="fc40">\</tspan><tspan class="fc41">/</tspan><tspan class="fc42">\</tspan></text>
-<text y="6.5em"><tspan>                </tspan><tspan class="fc34">|</tspan><tspan class="fc35">|</tspan><tspan class="fc36">-</tspan><tspan class="fc37">-</tspan><tspan class="fc38">-</tspan><tspan class="fc39">-</tspan><tspan class="fc40">w </tspan><tspan class="fc42">|</tspan></text>
-<text y="7.5em"><tspan>                </tspan><tspan class="fc37">|</tspan><tspan class="fc38">|     </tspan><tspan class="fc44">|</tspan><tspan class="fc45">|</tspan></text>
-</g>
+<text x="0ch" y="0.5em"><tspan> </tspan><tspan class="fc1">_</tspan><tspan class="fc2">_</tspan><tspan class="fc3">_</tspan><tspan class="fc4">_</tspan><tspan class="fc5">_</tspan><tspan class="fc6">_</tspan><tspan class="fc7">_</tspan><tspan class="fc8">_</tspan><tspan class="fc9">_</tspan><tspan class="fc10">_</tspan><tspan class="fc11">_</tspan><tspan class="fc12">_</tspan></text>
+<text x="0ch" y="1.5em"><tspan class="fc3">&lt; </tspan><tspan class="fc5">H</tspan><tspan class="fc6">e</tspan><tspan class="fc7">l</tspan><tspan class="fc8">l</tspan><tspan class="fc9">o </tspan><tspan class="fc11">A</tspan><tspan class="fc12">N</tspan><tspan class="fc13">S</tspan><tspan class="fc14">I </tspan><tspan class="fc16">&gt;</tspan></text>
+<text x="0ch" y="2.5em"><tspan> </tspan><tspan class="fc7">-</tspan><tspan class="fc8">-</tspan><tspan class="fc9">-</tspan><tspan class="fc10">-</tspan><tspan class="fc11">-</tspan><tspan class="fc12">-</tspan><tspan class="fc13">-</tspan><tspan class="fc14">-</tspan><tspan class="fc15">-</tspan><tspan class="fc16">-</tspan><tspan class="fc17">-</tspan><tspan class="fc18">-</tspan></text>
+<text x="0ch" y="3.5em"><tspan>        </tspan><tspan class="fc17">\   </tspan><tspan class="fc21">^</tspan><tspan class="fc22">_</tspan><tspan class="fc23">_</tspan><tspan class="fc24">^</tspan></text>
+<text x="0ch" y="4.5em"><tspan>         </tspan><tspan class="fc21">\  </tspan><tspan class="fc24">(</tspan><tspan class="fc25">o</tspan><tspan class="fc26">o</tspan><tspan class="fc27">)</tspan><tspan class="fc28">\</tspan><tspan class="fc29">_</tspan><tspan class="fc30">_</tspan><tspan class="fc31">_</tspan><tspan class="fc32">_</tspan><tspan class="fc33">_</tspan><tspan class="fc34">_</tspan><tspan class="fc35">_</tspan></text>
+<text x="0ch" y="5.5em"><tspan>            </tspan><tspan class="fc27">(</tspan><tspan class="fc28">_</tspan><tspan class="fc29">_</tspan><tspan class="fc30">)</tspan><tspan class="fc31">\       </tspan><tspan class="fc39">)</tspan><tspan class="fc40">\</tspan><tspan class="fc41">/</tspan><tspan class="fc42">\</tspan></text>
+<text x="0ch" y="6.5em"><tspan>                </tspan><tspan class="fc34">|</tspan><tspan class="fc35">|</tspan><tspan class="fc36">-</tspan><tspan class="fc37">-</tspan><tspan class="fc38">-</tspan><tspan class="fc39">-</tspan><tspan class="fc40">w </tspan><tspan class="fc42">|</tspan></text>
+<text x="0ch" y="7.5em"><tspan>                </tspan><tspan class="fc37">|</tspan><tspan class="fc38">|     </tspan><tspan class="fc44">|</tspan><tspan class="fc45">|</tspan></text>
 </svg>
diff --git a/cli/testdata/fontembedded.svg b/cli/testdata/fontembedded.svg
index 1bc4b06..88d04fe 100644
--- a/cli/testdata/fontembedded.svg
+++ b/cli/testdata/fontembedded.svg
@@ -19,7 +19,5 @@
         }
     </style>
     <rect width="100%" height="100%" x="0" y="0" style="fill: #000000"/>
-<g x="0">
-<text y="0.5em"><tspan>test</tspan></text>
-</g>
+<text x="0ch" y="0.5em"><tspan>test</tspan></text>
 </svg>
diff --git a/cli/testdata/fontname.svg b/cli/testdata/fontname.svg
index 21dd3ac..fdbda53 100644
--- a/cli/testdata/fontname.svg
+++ b/cli/testdata/fontname.svg
@@ -15,7 +15,5 @@
         }
     </style>
     <rect width="100%" height="100%" x="0" y="0" style="fill: #000000"/>
-<g x="0">
-<text y="0.5em"><tspan>test</tspan></text>
-</g>
+<text x="0ch" y="0.5em"><tspan>test</tspan></text>
 </svg>
diff --git a/cli/testdata/fontref.svg b/cli/testdata/fontref.svg
index 0d7035f..70b36ed 100644
--- a/cli/testdata/fontref.svg
+++ b/cli/testdata/fontref.svg
@@ -19,7 +19,5 @@
         }
     </style>
     <rect width="100%" height="100%" x="0" y="0" style="fill: #000000"/>
-<g x="0">
-<text y="0.5em"><tspan>test</tspan></text>
-</g>
+<text x="0ch" y="0.5em"><tspan>test</tspan></text>
 </svg>
diff --git a/cli/testdata/fq.svg b/cli/testdata/fq.svg
index 8081a81..9c155be 100644
--- a/cli/testdata/fq.svg
+++ b/cli/testdata/fq.svg
@@ -25,15 +25,13 @@
         .fa15 { fill: #ffffff; }
     </style>
     <rect width="100%" height="100%" x="0" y="0" style="fill: #000000"/>
-<g x="0">
-<text y="0.5em"><tspan>     |</tspan><tspan class="underline fa3">00 01 02 03 04 05 06 07 08 09 0a 0b 0c 0d 0e 0f</tspan><tspan>|</tspan><tspan class="underline fa3">0123456789abcdef</tspan><tspan>|.: </tspan><tspan class="fa7">{} ../fq/testfiles/test.mp3 </tspan><tspan>(</tspan><tspan class="fa7">mp3</tspan><tspan>)</tspan></text>
-<text y="1.5em"><tspan class="fa3">0x000</tspan><tspan>|</tspan><tspan class="fa7">49 44 33 </tspan><tspan class="fa15">04 </tspan><tspan class="fa8">00 00 00 00 00 </tspan><tspan class="fa7">32 54 50 45 31 </tspan><tspan class="fa8">00 00</tspan><tspan>|</tspan><tspan class="fa7">ID3</tspan><tspan class="fa15">.</tspan><tspan class="fa8">.....</tspan><tspan class="fa7">2TPE1</tspan><tspan class="fa8">..</tspan><tspan>|  </tspan><tspan class="fa12">headers</tspan><tspan>: </tspan><tspan class="fa7">[</tspan><tspan class="fa6">1</tspan><tspan class="fa7">]</tspan></text>
-<text y="2.5em"><tspan class="fa3">*    </tspan><tspan>|until 0x3b.7 (60)                              |                |</tspan></text>
-<text y="3.5em"><tspan class="fa3">0x030</tspan><tspan>|                                    </tspan><tspan class="fa15">ff fb </tspan><tspan class="fa7">50 </tspan><tspan class="fa8">00</tspan><tspan>|            </tspan><tspan class="fa15">..</tspan><tspan class="fa7">P</tspan><tspan class="fa8">.</tspan><tspan>|  </tspan><tspan class="fa12">frames</tspan><tspan>: </tspan><tspan class="fa7">[</tspan><tspan class="fa6">3</tspan><tspan class="fa7">]</tspan></text>
-<text y="4.5em"><tspan class="fa3">0x040</tspan><tspan>|</tspan><tspan class="fa8">00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00</tspan><tspan>|</tspan><tspan class="fa8">................</tspan><tspan>|</tspan></text>
-<text y="5.5em"><tspan class="fa3">*    </tspan><tspan>|until 0x44e.7 (1043)                           |                |</tspan></text>
-<text y="6.5em"><tspan>     |                                               |                |  </tspan><tspan class="fa12">footers</tspan><tspan>: </tspan><tspan class="fa7">[</tspan><tspan class="fa6">0</tspan><tspan class="fa7">]</tspan></text>
-<text y="7.5em"><tspan class="fa3">0x440</tspan><tspan>|                                             </tspan><tspan class="fa7">61</tspan><tspan>|               </tspan><tspan class="fa7">a</tspan><tspan>|  </tspan><tspan class="fa12">unknown0</tspan><tspan>: </tspan><tspan class="fa7">61736461</tspan></text>
-<text y="8.5em"><tspan class="fa3">0x450</tspan><tspan>|</tspan><tspan class="fa7">73 64 61</tspan><tspan>|                                      |</tspan><tspan class="fa7">sda</tspan><tspan>|            |</tspan></text>
-</g>
+<text x="0ch" y="0.5em"><tspan>     |</tspan><tspan class="underline fa3">00 01 02 03 04 05 06 07 08 09 0a 0b 0c 0d 0e 0f</tspan><tspan>|</tspan><tspan class="underline fa3">0123456789abcdef</tspan><tspan>|.: </tspan><tspan class="fa7">{} ../fq/testfiles/test.mp3 </tspan><tspan>(</tspan><tspan class="fa7">mp3</tspan><tspan>)</tspan></text>
+<text x="0ch" y="1.5em"><tspan class="fa3">0x000</tspan><tspan>|</tspan><tspan class="fa7">49 44 33 </tspan><tspan class="fa15">04 </tspan><tspan class="fa8">00 00 00 00 00 </tspan><tspan class="fa7">32 54 50 45 31 </tspan><tspan class="fa8">00 00</tspan><tspan>|</tspan><tspan class="fa7">ID3</tspan><tspan class="fa15">.</tspan><tspan class="fa8">.....</tspan><tspan class="fa7">2TPE1</tspan><tspan class="fa8">..</tspan><tspan>|  </tspan><tspan class="fa12">headers</tspan><tspan>: </tspan><tspan class="fa7">[</tspan><tspan class="fa6">1</tspan><tspan class="fa7">]</tspan></text>
+<text x="0ch" y="2.5em"><tspan class="fa3">*    </tspan><tspan>|until 0x3b.7 (60)                              |                |</tspan></text>
+<text x="0ch" y="3.5em"><tspan class="fa3">0x030</tspan><tspan>|                                    </tspan><tspan class="fa15">ff fb </tspan><tspan class="fa7">50 </tspan><tspan class="fa8">00</tspan><tspan>|            </tspan><tspan class="fa15">..</tspan><tspan class="fa7">P</tspan><tspan class="fa8">.</tspan><tspan>|  </tspan><tspan class="fa12">frames</tspan><tspan>: </tspan><tspan class="fa7">[</tspan><tspan class="fa6">3</tspan><tspan class="fa7">]</tspan></text>
+<text x="0ch" y="4.5em"><tspan class="fa3">0x040</tspan><tspan>|</tspan><tspan class="fa8">00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00</tspan><tspan>|</tspan><tspan class="fa8">................</tspan><tspan>|</tspan></text>
+<text x="0ch" y="5.5em"><tspan class="fa3">*    </tspan><tspan>|until 0x44e.7 (1043)                           |                |</tspan></text>
+<text x="0ch" y="6.5em"><tspan>     |                                               |                |  </tspan><tspan class="fa12">footers</tspan><tspan>: </tspan><tspan class="fa7">[</tspan><tspan class="fa6">0</tspan><tspan class="fa7">]</tspan></text>
+<text x="0ch" y="7.5em"><tspan class="fa3">0x440</tspan><tspan>|                                             </tspan><tspan class="fa7">61</tspan><tspan>|               </tspan><tspan class="fa7">a</tspan><tspan>|  </tspan><tspan class="fa12">unknown0</tspan><tspan>: </tspan><tspan class="fa7">61736461</tspan></text>
+<text x="0ch" y="8.5em"><tspan class="fa3">0x450</tspan><tspan>|</tspan><tspan class="fa7">73 64 61</tspan><tspan>|                                      |</tspan><tspan class="fa7">sda</tspan><tspan>|            |</tspan></text>
 </svg>
diff --git a/cli/testdata/invert_color.svg b/cli/testdata/invert_color.svg
index b29e4ec..d59330f 100644
--- a/cli/testdata/invert_color.svg
+++ b/cli/testdata/invert_color.svg
@@ -26,7 +26,5 @@
 <rect x="5ch" y="0em" width="6ch" height="1em" class="ba3"/>
 <rect x="11ch" y="0em" width="5ch" height="1em" class="ba1"/>
 </g>
-<g x="0">
-<text y="0.5em"><tspan> </tspan><tspan class="fa3">red </tspan><tspan class="fa1">yellow </tspan><tspan class="fa3">red </tspan></text>
-</g>
+<text x="0ch" y="0.5em"><tspan> </tspan><tspan class="fa3">red </tspan><tspan class="fa1">yellow </tspan><tspan class="fa3">red </tspan></text>
 </svg>
diff --git a/cli/testdata/invert_default.svg b/cli/testdata/invert_default.svg
index 3c2cdae..5a96baa 100644
--- a/cli/testdata/invert_default.svg
+++ b/cli/testdata/invert_default.svg
@@ -22,7 +22,5 @@
 <g class="bg">
 <rect x="7ch" y="0em" width="5ch" height="1em" class="bc0"/>
 </g>
-<g x="0">
-<text y="0.5em"><tspan> black </tspan><tspan class="fc0">write </tspan><tspan>black </tspan></text>
-</g>
+<text x="0ch" y="0.5em"><tspan> black </tspan><tspan class="fc0">write </tspan><tspan>black </tspan></text>
 </svg>
diff --git a/cli/testdata/jq.svg b/cli/testdata/jq.svg
index 2c04aee..b718278 100644
--- a/cli/testdata/jq.svg
+++ b/cli/testdata/jq.svg
@@ -21,17 +21,15 @@
         .fa4 { fill: #0000bb; }
     </style>
     <rect width="100%" height="100%" x="0" y="0" style="fill: #000000"/>
-<g x="0">
-<text y="0.5em"><tspan class="bold">{</tspan></text>
-<text y="1.5em"><tspan>  </tspan><tspan class="bold fa4">&#34;true&#34;</tspan><tspan class="bold">: </tspan><tspan>true</tspan><tspan class="bold">,</tspan></text>
-<text y="2.5em"><tspan>  </tspan><tspan class="bold fa4">&#34;false&#34;</tspan><tspan class="bold">: </tspan><tspan>false</tspan><tspan class="bold">,</tspan></text>
-<text y="3.5em"><tspan>  </tspan><tspan class="bold fa4">&#34;string&#34;</tspan><tspan class="bold">: </tspan><tspan class="fa2">&#34;string&#34;</tspan><tspan class="bold">,</tspan></text>
-<text y="4.5em"><tspan>  </tspan><tspan class="bold fa4">&#34;number&#34;</tspan><tspan class="bold">: </tspan><tspan>123.1</tspan><tspan class="bold">,</tspan></text>
-<text y="5.5em"><tspan>  </tspan><tspan class="bold fa4">&#34;array&#34;</tspan><tspan class="bold">: [</tspan></text>
-<text y="6.5em"><tspan>    1</tspan><tspan class="bold">,</tspan></text>
-<text y="7.5em"><tspan>    2</tspan><tspan class="bold">,</tspan></text>
-<text y="8.5em"><tspan>    3</tspan></text>
-<text y="9.5em"><tspan>  </tspan><tspan class="bold">]</tspan></text>
-<text y="10.5em"><tspan class="bold">}</tspan></text>
-</g>
+<text x="0ch" y="0.5em"><tspan class="bold">{</tspan></text>
+<text x="0ch" y="1.5em"><tspan>  </tspan><tspan class="bold fa4">&#34;true&#34;</tspan><tspan class="bold">: </tspan><tspan>true</tspan><tspan class="bold">,</tspan></text>
+<text x="0ch" y="2.5em"><tspan>  </tspan><tspan class="bold fa4">&#34;false&#34;</tspan><tspan class="bold">: </tspan><tspan>false</tspan><tspan class="bold">,</tspan></text>
+<text x="0ch" y="3.5em"><tspan>  </tspan><tspan class="bold fa4">&#34;string&#34;</tspan><tspan class="bold">: </tspan><tspan class="fa2">&#34;string&#34;</tspan><tspan class="bold">,</tspan></text>
+<text x="0ch" y="4.5em"><tspan>  </tspan><tspan class="bold fa4">&#34;number&#34;</tspan><tspan class="bold">: </tspan><tspan>123.1</tspan><tspan class="bold">,</tspan></text>
+<text x="0ch" y="5.5em"><tspan>  </tspan><tspan class="bold fa4">&#34;array&#34;</tspan><tspan class="bold">: [</tspan></text>
+<text x="0ch" y="6.5em"><tspan>    1</tspan><tspan class="bold">,</tspan></text>
+<text x="0ch" y="7.5em"><tspan>    2</tspan><tspan class="bold">,</tspan></text>
+<text x="0ch" y="8.5em"><tspan>    3</tspan></text>
+<text x="0ch" y="9.5em"><tspan>  </tspan><tspan class="bold">]</tspan></text>
+<text x="0ch" y="10.5em"><tspan class="bold">}</tspan></text>
 </svg>
diff --git a/cli/testdata/main.go.bat.svg b/cli/testdata/main.go.bat.svg
index 87b6ae7..ccc2b89 100644
--- a/cli/testdata/main.go.bat.svg
+++ b/cli/testdata/main.go.bat.svg
@@ -24,62 +24,60 @@
         .fc7 { fill: #be84ff; }
     </style>
     <rect width="100%" height="100%" x="0" y="0" style="fill: #000000"/>
-<g x="0">
-<text y="0.5em"><tspan class="fc0">package </tspan><tspan class="fc2">main</tspan></text>
-<text y="2.5em"><tspan class="fc0">import </tspan><tspan class="fc1">(</tspan></text>
-<text y="3.5em"><tspan>        </tspan><tspan class="fc3">&#34;flag&#34;</tspan></text>
-<text y="4.5em"><tspan>        </tspan><tspan class="fc3">&#34;fmt&#34;</tspan></text>
-<text y="5.5em"><tspan>        </tspan><tspan class="fc3">&#34;os&#34;</tspan></text>
-<text y="6.5em"><tspan>        </tspan><tspan class="fc3">&#34;strconv&#34;</tspan></text>
-<text y="7.5em"><tspan>        </tspan><tspan class="fc3">&#34;strings&#34;</tspan></text>
-<text y="9.5em"><tspan>        </tspan><tspan class="fc3">&#34;github.com/wader/ansisvg/ansitosvg&#34;</tspan></text>
-<text y="10.5em"><tspan class="fc1">)</tspan></text>
-<text y="12.5em"><tspan class="fc4">type </tspan><tspan class="fc5">boxSize </tspan><tspan class="fc4">struct </tspan><tspan class="fc1">{</tspan></text>
-<text y="13.5em"><tspan>        </tspan><tspan class="fc2">Width  </tspan><tspan class="fc5">int</tspan></text>
-<text y="14.5em"><tspan>        </tspan><tspan class="fc2">Height </tspan><tspan class="fc5">int</tspan></text>
-<text y="15.5em"><tspan class="fc1">}</tspan></text>
-<text y="17.5em"><tspan class="fc4">func </tspan><tspan class="fc1">(</tspan><tspan class="fc6">d </tspan><tspan class="fc0">*</tspan><tspan class="fc4">boxSize</tspan><tspan class="fc1">) </tspan><tspan class="fc5">String</tspan><tspan class="fc1">() </tspan><tspan class="fc5">string </tspan><tspan class="fc1">{</tspan></text>
-<text y="18.5em"><tspan>        </tspan><tspan class="fc0">return </tspan><tspan class="fc2">fmt</tspan><tspan class="fc1">.Sprintf(</tspan><tspan class="fc3">&#34;</tspan><tspan class="fc7">%d</tspan><tspan class="fc3">x</tspan><tspan class="fc7">%d</tspan><tspan class="fc3">&#34;</tspan><tspan class="fc1">, </tspan><tspan class="fc2">d</tspan><tspan class="fc1">.</tspan><tspan class="fc2">Width</tspan><tspan class="fc1">, </tspan><tspan class="fc2">d</tspan><tspan class="fc1">.</tspan><tspan class="fc2">Height</tspan><tspan class="fc1">)</tspan></text>
-<text y="19.5em"><tspan class="fc1">}</tspan></text>
-<text y="21.5em"><tspan class="fc4">func </tspan><tspan class="fc1">(</tspan><tspan class="fc6">d </tspan><tspan class="fc0">*</tspan><tspan class="fc4">boxSize</tspan><tspan class="fc1">) </tspan><tspan class="fc5">Set</tspan><tspan class="fc1">(</tspan><tspan class="fc6">s </tspan><tspan class="fc5">string</tspan><tspan class="fc1">) </tspan><tspan class="fc5">error </tspan><tspan class="fc1">{</tspan></text>
-<text y="22.5em"><tspan>        </tspan><tspan class="fc1">parts </tspan><tspan class="fc0">:= </tspan><tspan class="fc2">strings</tspan><tspan class="fc1">.Split(</tspan><tspan class="fc2">s</tspan><tspan class="fc1">, </tspan><tspan class="fc3">&#34;x&#34;</tspan><tspan class="fc1">)</tspan></text>
-<text y="23.5em"><tspan>        </tspan><tspan class="fc0">if </tspan><tspan class="fc4">len</tspan><tspan class="fc1">(</tspan><tspan class="fc2">parts</tspan><tspan class="fc1">) </tspan><tspan class="fc0">!= </tspan><tspan class="fc7">2 </tspan><tspan class="fc1">{</tspan></text>
-<text y="24.5em"><tspan>                </tspan><tspan class="fc0">return </tspan><tspan class="fc2">fmt</tspan><tspan class="fc1">.Errorf(</tspan><tspan class="fc3">&#34;must be WxH&#34;</tspan><tspan class="fc1">)</tspan></text>
-<text y="25.5em"><tspan>        </tspan><tspan class="fc1">}</tspan></text>
-<text y="26.5em"><tspan>        </tspan><tspan class="fc2">d</tspan><tspan class="fc1">.</tspan><tspan class="fc2">Width</tspan><tspan class="fc1">, </tspan><tspan class="fc2">_ </tspan><tspan class="fc0">= </tspan><tspan class="fc2">strconv</tspan><tspan class="fc1">.Atoi(</tspan><tspan class="fc2">parts</tspan><tspan class="fc1">[</tspan><tspan class="fc7">0</tspan><tspan class="fc1">])</tspan></text>
-<text y="27.5em"><tspan>        </tspan><tspan class="fc2">d</tspan><tspan class="fc1">.</tspan><tspan class="fc2">Height</tspan><tspan class="fc1">, </tspan><tspan class="fc2">_ </tspan><tspan class="fc0">= </tspan><tspan class="fc2">strconv</tspan><tspan class="fc1">.Atoi(</tspan><tspan class="fc2">parts</tspan><tspan class="fc1">[</tspan><tspan class="fc7">1</tspan><tspan class="fc1">])</tspan></text>
-<text y="28.5em"><tspan>        </tspan><tspan class="fc0">return </tspan><tspan class="fc7">nil</tspan></text>
-<text y="29.5em"><tspan class="fc1">}</tspan></text>
-<text y="31.5em"><tspan class="fc4">var </tspan><tspan class="fc1">fontFlag </tspan><tspan class="fc0">= </tspan><tspan class="fc2">flag</tspan><tspan class="fc1">.String(</tspan><tspan class="fc3">&#34;font&#34;</tspan><tspan class="fc1">, </tspan><tspan class="fc2">ansisvg</tspan><tspan class="fc1">.</tspan><tspan class="fc2">DefaultOptions</tspan><tspan class="fc1">.</tspan><tspan class="fc2">Font</tspan><tspan class="fc1">, </tspan><tspan class="fc3">&#34;Font&#34;</tspan><tspan class="fc1">)</tspan></text>
-<text y="32.5em"><tspan class="fc4">var </tspan><tspan class="fc1">fontSizeFlag </tspan><tspan class="fc0">= </tspan><tspan class="fc2">flag</tspan><tspan class="fc1">.Int(</tspan><tspan class="fc3">&#34;fontsize&#34;</tspan><tspan class="fc1">, </tspan><tspan class="fc2">ansisvg</tspan><tspan class="fc1">.</tspan><tspan class="fc2">DefaultOptions</tspan><tspan class="fc1">.</tspan><tspan class="fc2">FontSize</tspan><tspan class="fc1">, </tspan><tspan class="fc3">&#34;Font size&#34;</tspan><tspan class="fc1">)</tspan></text>
-<text y="33.5em"><tspan class="fc4">var </tspan><tspan class="fc1">terminalWidthFlag </tspan><tspan class="fc0">= </tspan><tspan class="fc2">flag</tspan><tspan class="fc1">.Int(</tspan><tspan class="fc3">&#34;width&#34;</tspan><tspan class="fc1">, </tspan><tspan class="fc7">0</tspan><tspan class="fc1">, </tspan><tspan class="fc3">&#34;Terminal width (auto)&#34;</tspan><tspan class="fc1">)</tspan></text>
-<text y="34.5em"><tspan class="fc4">var </tspan><tspan class="fc1">characterBoxSize </tspan><tspan class="fc0">= </tspan><tspan class="fc2">boxSize</tspan><tspan class="fc1">{</tspan></text>
-<text y="35.5em"><tspan>        </tspan><tspan class="fc2">Width</tspan><tspan class="fc1">:  </tspan><tspan class="fc2">ansisvg</tspan><tspan class="fc1">.</tspan><tspan class="fc2">DefaultOptions</tspan><tspan class="fc1">.</tspan><tspan class="fc2">CharacterBoxSize</tspan><tspan class="fc1">.</tspan><tspan class="fc2">Width</tspan><tspan class="fc1">,</tspan></text>
-<text y="36.5em"><tspan>        </tspan><tspan class="fc2">Height</tspan><tspan class="fc1">: </tspan><tspan class="fc2">ansisvg</tspan><tspan class="fc1">.</tspan><tspan class="fc2">DefaultOptions</tspan><tspan class="fc1">.</tspan><tspan class="fc2">CharacterBoxSize</tspan><tspan class="fc1">.</tspan><tspan class="fc2">Height</tspan><tspan class="fc1">,</tspan></text>
-<text y="37.5em"><tspan class="fc1">}</tspan></text>
-<text y="38.5em"><tspan class="fc4">var </tspan><tspan class="fc1">colorSchemeFlag </tspan><tspan class="fc0">= </tspan><tspan class="fc2">flag</tspan><tspan class="fc1">.String(</tspan><tspan class="fc3">&#34;colorscheme&#34;</tspan><tspan class="fc1">, </tspan><tspan class="fc2">ansisvg</tspan><tspan class="fc1">.</tspan><tspan class="fc2">DefaultOptions</tspan><tspan class="fc1">.</tspan><tspan class="fc2">ColorScheme</tspan><tspan class="fc1">, </tspan><tspan class="fc3">&#34;Color scheme&#34;</tspan><tspan class="fc1">)</tspan></text>
-<text y="40.5em"><tspan class="fc4">func </tspan><tspan class="fc5">init</tspan><tspan class="fc1">() {</tspan></text>
-<text y="41.5em"><tspan>        </tspan><tspan class="fc2">flag</tspan><tspan class="fc1">.Var(</tspan><tspan class="fc0">&amp;</tspan><tspan class="fc2">characterBoxSize</tspan><tspan class="fc1">, </tspan><tspan class="fc3">&#34;charboxsize&#34;</tspan><tspan class="fc1">, </tspan><tspan class="fc3">&#34;Character box size&#34;</tspan><tspan class="fc1">)</tspan></text>
-<text y="42.5em"><tspan class="fc1">}</tspan></text>
-<text y="44.5em"><tspan class="fc4">func </tspan><tspan class="fc5">main</tspan><tspan class="fc1">() {</tspan></text>
-<text y="45.5em"><tspan>        </tspan><tspan class="fc2">flag</tspan><tspan class="fc1">.Parse()</tspan></text>
-<text y="47.5em"><tspan>        </tspan><tspan class="fc0">if </tspan><tspan class="fc1">err </tspan><tspan class="fc0">:= </tspan><tspan class="fc2">ansisvg</tspan><tspan class="fc1">.Convert(</tspan></text>
-<text y="48.5em"><tspan>                </tspan><tspan class="fc2">os</tspan><tspan class="fc1">.</tspan><tspan class="fc2">Stdin</tspan><tspan class="fc1">,</tspan></text>
-<text y="49.5em"><tspan>                </tspan><tspan class="fc2">os</tspan><tspan class="fc1">.</tspan><tspan class="fc2">Stdout</tspan><tspan class="fc1">,</tspan></text>
-<text y="50.5em"><tspan>                </tspan><tspan class="fc2">ansisvg</tspan><tspan class="fc1">.</tspan><tspan class="fc2">Options</tspan><tspan class="fc1">{</tspan></text>
-<text y="51.5em"><tspan>                        </tspan><tspan class="fc2">Font</tspan><tspan class="fc1">:          </tspan><tspan class="fc0">*</tspan><tspan class="fc2">fontFlag</tspan><tspan class="fc1">,</tspan></text>
-<text y="52.5em"><tspan>                        </tspan><tspan class="fc2">FontSize</tspan><tspan class="fc1">:      </tspan><tspan class="fc0">*</tspan><tspan class="fc2">fontSizeFlag</tspan><tspan class="fc1">,</tspan></text>
-<text y="53.5em"><tspan>                        </tspan><tspan class="fc2">TerminalWidth</tspan><tspan class="fc1">: </tspan><tspan class="fc0">*</tspan><tspan class="fc2">terminalWidthFlag</tspan><tspan class="fc1">,</tspan></text>
-<text y="54.5em"><tspan>                        </tspan><tspan class="fc2">CharacterBoxSize</tspan><tspan class="fc1">: </tspan><tspan class="fc2">ansisvg</tspan><tspan class="fc1">.</tspan><tspan class="fc2">BoxSize</tspan><tspan class="fc1">{</tspan></text>
-<text y="55.5em"><tspan>                                </tspan><tspan class="fc2">Width</tspan><tspan class="fc1">:  </tspan><tspan class="fc2">characterBoxSize</tspan><tspan class="fc1">.</tspan><tspan class="fc2">Width</tspan><tspan class="fc1">,</tspan></text>
-<text y="56.5em"><tspan>                                </tspan><tspan class="fc2">Height</tspan><tspan class="fc1">: </tspan><tspan class="fc2">characterBoxSize</tspan><tspan class="fc1">.</tspan><tspan class="fc2">Height</tspan><tspan class="fc1">,</tspan></text>
-<text y="57.5em"><tspan>                        </tspan><tspan class="fc1">},</tspan></text>
-<text y="58.5em"><tspan>                        </tspan><tspan class="fc2">ColorScheme</tspan><tspan class="fc1">: </tspan><tspan class="fc0">*</tspan><tspan class="fc2">colorSchemeFlag</tspan><tspan class="fc1">,</tspan></text>
-<text y="59.5em"><tspan>                </tspan><tspan class="fc1">},</tspan></text>
-<text y="60.5em"><tspan>        </tspan><tspan class="fc1">); </tspan><tspan class="fc2">err </tspan><tspan class="fc0">!= </tspan><tspan class="fc7">nil </tspan><tspan class="fc1">{</tspan></text>
-<text y="61.5em"><tspan>                </tspan><tspan class="fc2">fmt</tspan><tspan class="fc1">.Fprintln(</tspan><tspan class="fc2">os</tspan><tspan class="fc1">.</tspan><tspan class="fc2">Stderr</tspan><tspan class="fc1">, </tspan><tspan class="fc2">err</tspan><tspan class="fc1">)</tspan></text>
-<text y="62.5em"><tspan>                </tspan><tspan class="fc2">os</tspan><tspan class="fc1">.Exit(</tspan><tspan class="fc7">1</tspan><tspan class="fc1">)</tspan></text>
-<text y="63.5em"><tspan>        </tspan><tspan class="fc1">}</tspan></text>
-<text y="64.5em"><tspan class="fc1">}</tspan></text>
-</g>
+<text x="0ch" y="0.5em"><tspan class="fc0">package </tspan><tspan class="fc2">main</tspan></text>
+<text x="0ch" y="2.5em"><tspan class="fc0">import </tspan><tspan class="fc1">(</tspan></text>
+<text x="0ch" y="3.5em"><tspan>        </tspan><tspan class="fc3">&#34;flag&#34;</tspan></text>
+<text x="0ch" y="4.5em"><tspan>        </tspan><tspan class="fc3">&#34;fmt&#34;</tspan></text>
+<text x="0ch" y="5.5em"><tspan>        </tspan><tspan class="fc3">&#34;os&#34;</tspan></text>
+<text x="0ch" y="6.5em"><tspan>        </tspan><tspan class="fc3">&#34;strconv&#34;</tspan></text>
+<text x="0ch" y="7.5em"><tspan>        </tspan><tspan class="fc3">&#34;strings&#34;</tspan></text>
+<text x="0ch" y="9.5em"><tspan>        </tspan><tspan class="fc3">&#34;github.com/wader/ansisvg/ansitosvg&#34;</tspan></text>
+<text x="0ch" y="10.5em"><tspan class="fc1">)</tspan></text>
+<text x="0ch" y="12.5em"><tspan class="fc4">type </tspan><tspan class="fc5">boxSize </tspan><tspan class="fc4">struct </tspan><tspan class="fc1">{</tspan></text>
+<text x="0ch" y="13.5em"><tspan>        </tspan><tspan class="fc2">Width  </tspan><tspan class="fc5">int</tspan></text>
+<text x="0ch" y="14.5em"><tspan>        </tspan><tspan class="fc2">Height </tspan><tspan class="fc5">int</tspan></text>
+<text x="0ch" y="15.5em"><tspan class="fc1">}</tspan></text>
+<text x="0ch" y="17.5em"><tspan class="fc4">func </tspan><tspan class="fc1">(</tspan><tspan class="fc6">d </tspan><tspan class="fc0">*</tspan><tspan class="fc4">boxSize</tspan><tspan class="fc1">) </tspan><tspan class="fc5">String</tspan><tspan class="fc1">() </tspan><tspan class="fc5">string </tspan><tspan class="fc1">{</tspan></text>
+<text x="0ch" y="18.5em"><tspan>        </tspan><tspan class="fc0">return </tspan><tspan class="fc2">fmt</tspan><tspan class="fc1">.Sprintf(</tspan><tspan class="fc3">&#34;</tspan><tspan class="fc7">%d</tspan><tspan class="fc3">x</tspan><tspan class="fc7">%d</tspan><tspan class="fc3">&#34;</tspan><tspan class="fc1">, </tspan><tspan class="fc2">d</tspan><tspan class="fc1">.</tspan><tspan class="fc2">Width</tspan><tspan class="fc1">, </tspan><tspan class="fc2">d</tspan><tspan class="fc1">.</tspan><tspan class="fc2">Height</tspan><tspan class="fc1">)</tspan></text>
+<text x="0ch" y="19.5em"><tspan class="fc1">}</tspan></text>
+<text x="0ch" y="21.5em"><tspan class="fc4">func </tspan><tspan class="fc1">(</tspan><tspan class="fc6">d </tspan><tspan class="fc0">*</tspan><tspan class="fc4">boxSize</tspan><tspan class="fc1">) </tspan><tspan class="fc5">Set</tspan><tspan class="fc1">(</tspan><tspan class="fc6">s </tspan><tspan class="fc5">string</tspan><tspan class="fc1">) </tspan><tspan class="fc5">error </tspan><tspan class="fc1">{</tspan></text>
+<text x="0ch" y="22.5em"><tspan>        </tspan><tspan class="fc1">parts </tspan><tspan class="fc0">:= </tspan><tspan class="fc2">strings</tspan><tspan class="fc1">.Split(</tspan><tspan class="fc2">s</tspan><tspan class="fc1">, </tspan><tspan class="fc3">&#34;x&#34;</tspan><tspan class="fc1">)</tspan></text>
+<text x="0ch" y="23.5em"><tspan>        </tspan><tspan class="fc0">if </tspan><tspan class="fc4">len</tspan><tspan class="fc1">(</tspan><tspan class="fc2">parts</tspan><tspan class="fc1">) </tspan><tspan class="fc0">!= </tspan><tspan class="fc7">2 </tspan><tspan class="fc1">{</tspan></text>
+<text x="0ch" y="24.5em"><tspan>                </tspan><tspan class="fc0">return </tspan><tspan class="fc2">fmt</tspan><tspan class="fc1">.Errorf(</tspan><tspan class="fc3">&#34;must be WxH&#34;</tspan><tspan class="fc1">)</tspan></text>
+<text x="0ch" y="25.5em"><tspan>        </tspan><tspan class="fc1">}</tspan></text>
+<text x="0ch" y="26.5em"><tspan>        </tspan><tspan class="fc2">d</tspan><tspan class="fc1">.</tspan><tspan class="fc2">Width</tspan><tspan class="fc1">, </tspan><tspan class="fc2">_ </tspan><tspan class="fc0">= </tspan><tspan class="fc2">strconv</tspan><tspan class="fc1">.Atoi(</tspan><tspan class="fc2">parts</tspan><tspan class="fc1">[</tspan><tspan class="fc7">0</tspan><tspan class="fc1">])</tspan></text>
+<text x="0ch" y="27.5em"><tspan>        </tspan><tspan class="fc2">d</tspan><tspan class="fc1">.</tspan><tspan class="fc2">Height</tspan><tspan class="fc1">, </tspan><tspan class="fc2">_ </tspan><tspan class="fc0">= </tspan><tspan class="fc2">strconv</tspan><tspan class="fc1">.Atoi(</tspan><tspan class="fc2">parts</tspan><tspan class="fc1">[</tspan><tspan class="fc7">1</tspan><tspan class="fc1">])</tspan></text>
+<text x="0ch" y="28.5em"><tspan>        </tspan><tspan class="fc0">return </tspan><tspan class="fc7">nil</tspan></text>
+<text x="0ch" y="29.5em"><tspan class="fc1">}</tspan></text>
+<text x="0ch" y="31.5em"><tspan class="fc4">var </tspan><tspan class="fc1">fontFlag </tspan><tspan class="fc0">= </tspan><tspan class="fc2">flag</tspan><tspan class="fc1">.String(</tspan><tspan class="fc3">&#34;font&#34;</tspan><tspan class="fc1">, </tspan><tspan class="fc2">ansisvg</tspan><tspan class="fc1">.</tspan><tspan class="fc2">DefaultOptions</tspan><tspan class="fc1">.</tspan><tspan class="fc2">Font</tspan><tspan class="fc1">, </tspan><tspan class="fc3">&#34;Font&#34;</tspan><tspan class="fc1">)</tspan></text>
+<text x="0ch" y="32.5em"><tspan class="fc4">var </tspan><tspan class="fc1">fontSizeFlag </tspan><tspan class="fc0">= </tspan><tspan class="fc2">flag</tspan><tspan class="fc1">.Int(</tspan><tspan class="fc3">&#34;fontsize&#34;</tspan><tspan class="fc1">, </tspan><tspan class="fc2">ansisvg</tspan><tspan class="fc1">.</tspan><tspan class="fc2">DefaultOptions</tspan><tspan class="fc1">.</tspan><tspan class="fc2">FontSize</tspan><tspan class="fc1">, </tspan><tspan class="fc3">&#34;Font size&#34;</tspan><tspan class="fc1">)</tspan></text>
+<text x="0ch" y="33.5em"><tspan class="fc4">var </tspan><tspan class="fc1">terminalWidthFlag </tspan><tspan class="fc0">= </tspan><tspan class="fc2">flag</tspan><tspan class="fc1">.Int(</tspan><tspan class="fc3">&#34;width&#34;</tspan><tspan class="fc1">, </tspan><tspan class="fc7">0</tspan><tspan class="fc1">, </tspan><tspan class="fc3">&#34;Terminal width (auto)&#34;</tspan><tspan class="fc1">)</tspan></text>
+<text x="0ch" y="34.5em"><tspan class="fc4">var </tspan><tspan class="fc1">characterBoxSize </tspan><tspan class="fc0">= </tspan><tspan class="fc2">boxSize</tspan><tspan class="fc1">{</tspan></text>
+<text x="0ch" y="35.5em"><tspan>        </tspan><tspan class="fc2">Width</tspan><tspan class="fc1">:  </tspan><tspan class="fc2">ansisvg</tspan><tspan class="fc1">.</tspan><tspan class="fc2">DefaultOptions</tspan><tspan class="fc1">.</tspan><tspan class="fc2">CharacterBoxSize</tspan><tspan class="fc1">.</tspan><tspan class="fc2">Width</tspan><tspan class="fc1">,</tspan></text>
+<text x="0ch" y="36.5em"><tspan>        </tspan><tspan class="fc2">Height</tspan><tspan class="fc1">: </tspan><tspan class="fc2">ansisvg</tspan><tspan class="fc1">.</tspan><tspan class="fc2">DefaultOptions</tspan><tspan class="fc1">.</tspan><tspan class="fc2">CharacterBoxSize</tspan><tspan class="fc1">.</tspan><tspan class="fc2">Height</tspan><tspan class="fc1">,</tspan></text>
+<text x="0ch" y="37.5em"><tspan class="fc1">}</tspan></text>
+<text x="0ch" y="38.5em"><tspan class="fc4">var </tspan><tspan class="fc1">colorSchemeFlag </tspan><tspan class="fc0">= </tspan><tspan class="fc2">flag</tspan><tspan class="fc1">.String(</tspan><tspan class="fc3">&#34;colorscheme&#34;</tspan><tspan class="fc1">, </tspan><tspan class="fc2">ansisvg</tspan><tspan class="fc1">.</tspan><tspan class="fc2">DefaultOptions</tspan><tspan class="fc1">.</tspan><tspan class="fc2">ColorScheme</tspan><tspan class="fc1">, </tspan><tspan class="fc3">&#34;Color scheme&#34;</tspan><tspan class="fc1">)</tspan></text>
+<text x="0ch" y="40.5em"><tspan class="fc4">func </tspan><tspan class="fc5">init</tspan><tspan class="fc1">() {</tspan></text>
+<text x="0ch" y="41.5em"><tspan>        </tspan><tspan class="fc2">flag</tspan><tspan class="fc1">.Var(</tspan><tspan class="fc0">&amp;</tspan><tspan class="fc2">characterBoxSize</tspan><tspan class="fc1">, </tspan><tspan class="fc3">&#34;charboxsize&#34;</tspan><tspan class="fc1">, </tspan><tspan class="fc3">&#34;Character box size&#34;</tspan><tspan class="fc1">)</tspan></text>
+<text x="0ch" y="42.5em"><tspan class="fc1">}</tspan></text>
+<text x="0ch" y="44.5em"><tspan class="fc4">func </tspan><tspan class="fc5">main</tspan><tspan class="fc1">() {</tspan></text>
+<text x="0ch" y="45.5em"><tspan>        </tspan><tspan class="fc2">flag</tspan><tspan class="fc1">.Parse()</tspan></text>
+<text x="0ch" y="47.5em"><tspan>        </tspan><tspan class="fc0">if </tspan><tspan class="fc1">err </tspan><tspan class="fc0">:= </tspan><tspan class="fc2">ansisvg</tspan><tspan class="fc1">.Convert(</tspan></text>
+<text x="0ch" y="48.5em"><tspan>                </tspan><tspan class="fc2">os</tspan><tspan class="fc1">.</tspan><tspan class="fc2">Stdin</tspan><tspan class="fc1">,</tspan></text>
+<text x="0ch" y="49.5em"><tspan>                </tspan><tspan class="fc2">os</tspan><tspan class="fc1">.</tspan><tspan class="fc2">Stdout</tspan><tspan class="fc1">,</tspan></text>
+<text x="0ch" y="50.5em"><tspan>                </tspan><tspan class="fc2">ansisvg</tspan><tspan class="fc1">.</tspan><tspan class="fc2">Options</tspan><tspan class="fc1">{</tspan></text>
+<text x="0ch" y="51.5em"><tspan>                        </tspan><tspan class="fc2">Font</tspan><tspan class="fc1">:          </tspan><tspan class="fc0">*</tspan><tspan class="fc2">fontFlag</tspan><tspan class="fc1">,</tspan></text>
+<text x="0ch" y="52.5em"><tspan>                        </tspan><tspan class="fc2">FontSize</tspan><tspan class="fc1">:      </tspan><tspan class="fc0">*</tspan><tspan class="fc2">fontSizeFlag</tspan><tspan class="fc1">,</tspan></text>
+<text x="0ch" y="53.5em"><tspan>                        </tspan><tspan class="fc2">TerminalWidth</tspan><tspan class="fc1">: </tspan><tspan class="fc0">*</tspan><tspan class="fc2">terminalWidthFlag</tspan><tspan class="fc1">,</tspan></text>
+<text x="0ch" y="54.5em"><tspan>                        </tspan><tspan class="fc2">CharacterBoxSize</tspan><tspan class="fc1">: </tspan><tspan class="fc2">ansisvg</tspan><tspan class="fc1">.</tspan><tspan class="fc2">BoxSize</tspan><tspan class="fc1">{</tspan></text>
+<text x="0ch" y="55.5em"><tspan>                                </tspan><tspan class="fc2">Width</tspan><tspan class="fc1">:  </tspan><tspan class="fc2">characterBoxSize</tspan><tspan class="fc1">.</tspan><tspan class="fc2">Width</tspan><tspan class="fc1">,</tspan></text>
+<text x="0ch" y="56.5em"><tspan>                                </tspan><tspan class="fc2">Height</tspan><tspan class="fc1">: </tspan><tspan class="fc2">characterBoxSize</tspan><tspan class="fc1">.</tspan><tspan class="fc2">Height</tspan><tspan class="fc1">,</tspan></text>
+<text x="0ch" y="57.5em"><tspan>                        </tspan><tspan class="fc1">},</tspan></text>
+<text x="0ch" y="58.5em"><tspan>                        </tspan><tspan class="fc2">ColorScheme</tspan><tspan class="fc1">: </tspan><tspan class="fc0">*</tspan><tspan class="fc2">colorSchemeFlag</tspan><tspan class="fc1">,</tspan></text>
+<text x="0ch" y="59.5em"><tspan>                </tspan><tspan class="fc1">},</tspan></text>
+<text x="0ch" y="60.5em"><tspan>        </tspan><tspan class="fc1">); </tspan><tspan class="fc2">err </tspan><tspan class="fc0">!= </tspan><tspan class="fc7">nil </tspan><tspan class="fc1">{</tspan></text>
+<text x="0ch" y="61.5em"><tspan>                </tspan><tspan class="fc2">fmt</tspan><tspan class="fc1">.Fprintln(</tspan><tspan class="fc2">os</tspan><tspan class="fc1">.</tspan><tspan class="fc2">Stderr</tspan><tspan class="fc1">, </tspan><tspan class="fc2">err</tspan><tspan class="fc1">)</tspan></text>
+<text x="0ch" y="62.5em"><tspan>                </tspan><tspan class="fc2">os</tspan><tspan class="fc1">.Exit(</tspan><tspan class="fc7">1</tspan><tspan class="fc1">)</tspan></text>
+<text x="0ch" y="63.5em"><tspan>        </tspan><tspan class="fc1">}</tspan></text>
+<text x="0ch" y="64.5em"><tspan class="fc1">}</tspan></text>
 </svg>
diff --git a/cli/testdata/margintest_gridmode.ansi b/cli/testdata/margintest_gridmode.ansi
new file mode 100644
index 0000000..1b1d3fc
--- /dev/null
+++ b/cli/testdata/margintest_gridmode.ansi
@@ -0,0 +1,15 @@
+[48:2:247:247:247m[38:2:74:69:67m3024 Day                       [48:2:9:3:0m  [48:2:1:160:228m  [48:2:181:228:244m  [48:2:1:162:82m  [48:2:161:106:148m  [48:2:219:45:32m  [48:2:165:162:162m  [48:2:253:237:2m  [48:2:92:88:85m  [48:2:128:125:124m  [48:2:205:171:83m  [48:2:58:52:50m  [48:2:214:213:212m  [48:2:232:187:208m  [48:2:247:247:247m  [48:2:74:69:67m  [48:2:165:162:162m  [48:2:74:69:67m  
+[48:2:9:3:0m[38:2:165:162:162m3024 Night                     [48:2:9:3:0m  [48:2:1:160:228m  [48:2:181:228:244m  [48:2:1:162:82m  [48:2:161:106:148m  [48:2:219:45:32m  [48:2:165:162:162m  [48:2:253:237:2m  [48:2:92:88:85m  [48:2:128:125:124m  [48:2:205:171:83m  [48:2:58:52:50m  [48:2:214:213:212m  [48:2:232:187:208m  [48:2:247:247:247m  [48:2:74:69:67m  [48:2:74:69:67m  [48:2:165:162:162m  
+[48:2:16:32:64m[38:2:221:221:221mAardvark Blue                  [48:2:25:25:25m  [48:2:19:112:211m  [48:2:0:142:176m  [48:2:75:140:15m  [48:2:196:58:195m  [48:2:170:52:46m  [48:2:190:190:190m  [48:2:219:186:0m  [48:2:69:69:69m  [48:2:96:164:236m  [48:2:96:182:203m  [48:2:149:220:85m  [48:2:226:107:226m  [48:2:240:91:80m  [48:2:247:247:247m  [48:2:255:231:99m  [48:2:191:219:254m  [48:2:0:122:204m  
+[48:2:17:20:22m[38:2:238:238:236mAbernathy                      [48:2:0:0:0m  [48:2:16:147:245m  [48:2:0:205:205m  [48:2:0:205:0m  [48:2:205:0:205m  [48:2:205:0:0m  [48:2:250:235:215m  [48:2:205:205:0m  [48:2:64:64:64m  [48:2:17:181:246m  [48:2:0:255:255m  [48:2:0:255:0m  [48:2:255:0:255m  [48:2:255:0:0m  [48:2:255:255:255m  [48:2:255:255:0m  [48:2:238:238:236m  [48:2:187:187:187m  
+[48:2:4:4:4m[38:2:254:255:255mAdventure                      [48:2:4:4:4m  [48:2:65:122:179m  [48:2:189:207:229m  [48:2:93:166:2m  [48:2:229:196:153m  [48:2:216:74:51m  [48:2:219:222:216m  [48:2:238:187:110m  [48:2:104:86:86m  [48:2:151:215:239m  [48:2:189:207:229m  [48:2:153:181:44m  [48:2:170:121:0m  [48:2:215:107:66m  [48:2:228:213:199m  [48:2:255:182:112m  [48:2:96:96:96m  [48:2:254:255:255m  
+[48:2:31:29:69m[38:2:248:220:192mAdventureTime                  [48:2:5:4:4m  [48:2:15:74:198m  [48:2:112:165:152m  [48:2:74:177:24m  [48:2:102:89:147m  [48:2:189:0:19m  [48:2:248:220:192m  [48:2:231:116:30m  [48:2:78:124:191m  [48:2:25:151:198m  [48:2:200:250:244m  [48:2:158:255:110m  [48:2:155:89:83m  [48:2:252:95:90m  [48:2:246:245:251m  [48:2:239:193:26m  [48:2:112:107:78m  [48:2:239:191:56m  
+[48:2:33:33:33m[38:2:208:208:208mAfterglow                      [48:2:21:21:21m  [48:2:108:153:187m  [48:2:125:214:207m  [48:2:126:142:80m  [48:2:159:78:133m  [48:2:172:65:66m  [48:2:208:208:208m  [48:2:229:181:103m  [48:2:80:80:80m  [48:2:108:153:187m  [48:2:125:214:207m  [48:2:126:142:80m  [48:2:159:78:133m  [48:2:172:65:66m  [48:2:245:245:245m  [48:2:229:181:103m  [48:2:48:48:48m  [48:2:208:208:208m  
+[48:2:247:247:247m[38:2:0:0:0mAlabaster                      [48:2:0:0:0m  [48:2:50:92:192m  [48:2:0:131:178m  [48:2:68:140:39m  [48:2:122:62:157m  [48:2:170:55:49m  [48:2:247:247:247m  [48:2:203:144:0m  [48:2:119:119:119m  [48:2:0:122:204m  [48:2:0:170:203m  [48:2:96:203:0m  [48:2:230:76:230m  [48:2:240:80:80m  [48:2:247:247:247m  [48:2:255:188:93m  [48:2:191:219:254m  [48:2:0:122:204m  
+[48:2:15:22:16m[38:2:99:125:117mAlienBlood                     [48:2:17:38:22m  [48:2:47:106:127m  [48:2:50:127:119m  [48:2:47:126:37m  [48:2:71:88:127m  [48:2:127:43:39m  [48:2:100:125:117m  [48:2:113:127:36m  [48:2:60:72:18m  [48:2:0:170:224m  [48:2:0:224:196m  [48:2:24:224:0m  [48:2:0:88:224m  [48:2:224:128:9m  [48:2:115:250:145m  [48:2:189:224:0m  [48:2:29:65:37m  [48:2:115:250:145m  
+[48:2:38:42:51m[38:2:229:229:229mAndromeda                      [48:2:0:0:0m  [48:2:36:114:200m  [48:2:15:168:205m  [48:2:5:188:121m  [48:2:188:63:188m  [48:2:205:49:49m  [48:2:229:229:229m  [48:2:229:229:18m  [48:2:102:102:102m  [48:2:36:114:200m  [48:2:15:168:205m  [48:2:5:188:121m  [48:2:188:63:188m  [48:2:205:49:49m  [48:2:229:229:229m  [48:2:229:229:18m  [48:2:90:92:98m  [48:2:248:248:240m  
+[48:2:44:43:43m[38:2:213:162:0mApple Classic                  [48:2:0:0:0m  [48:2:2:37:199m  [48:2:0:197:199m  [48:2:0:194:0m  [48:2:202:48:199m  [48:2:201:27:0m  [48:2:199:199:199m  [48:2:199:196:0m  [48:2:104:104:104m  [48:2:104:113:255m  [48:2:96:253:255m  [48:2:95:250:104m  [48:2:255:119:255m  [48:2:255:110:103m  [48:2:255:255:255m  [48:2:255:252:103m  [48:2:107:91:2m  [48:2:199:199:199m  
+[48:2:30:30:30m[38:2:255:255:255mApple System Colors            [48:2:26:26:26m  [48:2:8:105:203m  [48:2:71:158:194m  [48:2:38:164:57m  [48:2:150:71:191m  [48:2:204:55:46m  [48:2:152:152:157m  [48:2:205:172:8m  [48:2:70:70:70m  [48:2:10:132:255m  [48:2:118:214:255m  [48:2:50:215:75m  [48:2:191:90:242m  [48:2:255:69:58m  [48:2:255:255:255m  [48:2:255:214:10m  [48:2:63:99:139m  [48:2:152:152:157m  
+[48:2:14:16:25m[38:2:255:250:244mArgonaut                       [48:2:35:35:35m  [48:2:0:141:248m  [48:2:0:216:235m  [48:2:140:225:11m  [48:2:109:67:166m  [48:2:255:0:15m  [48:2:255:255:255m  [48:2:255:185:0m  [48:2:68:68:68m  [48:2:0:146:255m  [48:2:103:255:240m  [48:2:171:225:91m  [48:2:154:95:235m  [48:2:255:39:64m  [48:2:255:255:255m  [48:2:255:210:66m  [48:2:0:42:59m  [48:2:255:0:24m  
+[48:2:28:28:28m[38:2:221:238:221mArthur                         [48:2:61:53:42m  [48:2:100:149:237m  [48:2:176:196:222m  [48:2:134:175:128m  [48:2:222:184:135m  [48:2:205:92:92m  [48:2:187:170:153m  [48:2:232:174:91m  [48:2:85:68:68m  [48:2:135:206:235m  [48:2:176:196:222m  [48:2:136:170:34m  [48:2:153:102:0m  [48:2:204:85:51m  [48:2:221:204:187m  [48:2:255:167:93m  [48:2:77:77:77m  [48:2:226:187:239m  
+[48:2:32:39:70m[38:2:151:157:180mAtelierSulphurpool             [48:2:32:39:70m  [48:2:61:143:209m  [48:2:34:162:201m  [48:2:172:151:57m  [48:2:102:121:204m  [48:2:201:73:34m  [48:2:151:157:180m  [48:2:192:139:48m  [48:2:107:115:148m  [48:2:137:142:164m  [48:2:156:99:122m  [48:2:41:50:86m  [48:2:223:226:241m  [48:2:199:107:41m  [48:2:245:247:255m  [48:2:94:102:135m  [48:2:94:102:135m  [48:2:151:157:180m  
diff --git a/cli/testdata/margintest_gridmode.args b/cli/testdata/margintest_gridmode.args
new file mode 100644
index 0000000..3883a43
--- /dev/null
+++ b/cli/testdata/margintest_gridmode.args
@@ -0,0 +1 @@
+--charboxsize 8x16 --marginsize 10x10
diff --git a/cli/testdata/margintest_gridmode.svg b/cli/testdata/margintest_gridmode.svg
new file mode 100644
index 0000000..150a02e
--- /dev/null
+++ b/cli/testdata/margintest_gridmode.svg
@@ -0,0 +1,553 @@
+<svg width="556px" height="260px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
+    <style>
+        * {
+            font-family: Courier, monospace;
+            font-size: 14px;
+        }
+        tspan, text {
+            font-variant-ligatures: none;
+            dominant-baseline: central;
+            white-space: pre;
+            fill: #bbbbbb;
+        }
+        .bg {
+            stroke-width: "0.5px";
+        }
+        <!-- Background custom colors -->
+        .bc0 { stroke: #f7f7f7; fill: #f7f7f7; }
+        .bc1 { stroke: #090300; fill: #090300; }
+        .bc2 { stroke: #01a0e4; fill: #01a0e4; }
+        .bc3 { stroke: #b5e4f4; fill: #b5e4f4; }
+        .bc4 { stroke: #01a252; fill: #01a252; }
+        .bc5 { stroke: #a16a94; fill: #a16a94; }
+        .bc6 { stroke: #db2d20; fill: #db2d20; }
+        .bc7 { stroke: #a5a2a2; fill: #a5a2a2; }
+        .bc8 { stroke: #fded02; fill: #fded02; }
+        .bc9 { stroke: #5c5855; fill: #5c5855; }
+        .bc10 { stroke: #807d7c; fill: #807d7c; }
+        .bc11 { stroke: #cdab53; fill: #cdab53; }
+        .bc12 { stroke: #3a3432; fill: #3a3432; }
+        .bc13 { stroke: #d6d5d4; fill: #d6d5d4; }
+        .bc14 { stroke: #e8bbd0; fill: #e8bbd0; }
+        .bc15 { stroke: #4a4543; fill: #4a4543; }
+        .bc16 { stroke: #102040; fill: #102040; }
+        .bc17 { stroke: #191919; fill: #191919; }
+        .bc18 { stroke: #1370d3; fill: #1370d3; }
+        .bc19 { stroke: #008eb0; fill: #008eb0; }
+        .bc20 { stroke: #4b8c0f; fill: #4b8c0f; }
+        .bc21 { stroke: #c43ac3; fill: #c43ac3; }
+        .bc22 { stroke: #aa342e; fill: #aa342e; }
+        .bc23 { stroke: #bebebe; fill: #bebebe; }
+        .bc24 { stroke: #dbba00; fill: #dbba00; }
+        .bc25 { stroke: #454545; fill: #454545; }
+        .bc26 { stroke: #60a4ec; fill: #60a4ec; }
+        .bc27 { stroke: #60b6cb; fill: #60b6cb; }
+        .bc28 { stroke: #95dc55; fill: #95dc55; }
+        .bc29 { stroke: #e26be2; fill: #e26be2; }
+        .bc30 { stroke: #f05b50; fill: #f05b50; }
+        .bc31 { stroke: #ffe763; fill: #ffe763; }
+        .bc32 { stroke: #bfdbfe; fill: #bfdbfe; }
+        .bc33 { stroke: #007acc; fill: #007acc; }
+        .bc34 { stroke: #111416; fill: #111416; }
+        .bc35 { stroke: #1093f5; fill: #1093f5; }
+        .bc36 { stroke: #00cdcd; fill: #00cdcd; }
+        .bc37 { stroke: #00cd00; fill: #00cd00; }
+        .bc38 { stroke: #cd00cd; fill: #cd00cd; }
+        .bc39 { stroke: #cd0000; fill: #cd0000; }
+        .bc40 { stroke: #faebd7; fill: #faebd7; }
+        .bc41 { stroke: #cdcd00; fill: #cdcd00; }
+        .bc42 { stroke: #404040; fill: #404040; }
+        .bc43 { stroke: #11b5f6; fill: #11b5f6; }
+        .bc44 { stroke: #00ffff; fill: #00ffff; }
+        .bc45 { stroke: #00ff00; fill: #00ff00; }
+        .bc46 { stroke: #ff00ff; fill: #ff00ff; }
+        .bc47 { stroke: #ff0000; fill: #ff0000; }
+        .bc48 { stroke: #ffffff; fill: #ffffff; }
+        .bc49 { stroke: #ffff00; fill: #ffff00; }
+        .bc50 { stroke: #eeeeec; fill: #eeeeec; }
+        .bc51 { stroke: #bbbbbb; fill: #bbbbbb; }
+        .bc52 { stroke: #040404; fill: #040404; }
+        .bc53 { stroke: #417ab3; fill: #417ab3; }
+        .bc54 { stroke: #bdcfe5; fill: #bdcfe5; }
+        .bc55 { stroke: #5da602; fill: #5da602; }
+        .bc56 { stroke: #e5c499; fill: #e5c499; }
+        .bc57 { stroke: #d84a33; fill: #d84a33; }
+        .bc58 { stroke: #dbded8; fill: #dbded8; }
+        .bc59 { stroke: #eebb6e; fill: #eebb6e; }
+        .bc60 { stroke: #685656; fill: #685656; }
+        .bc61 { stroke: #97d7ef; fill: #97d7ef; }
+        .bc62 { stroke: #99b52c; fill: #99b52c; }
+        .bc63 { stroke: #aa7900; fill: #aa7900; }
+        .bc64 { stroke: #d76b42; fill: #d76b42; }
+        .bc65 { stroke: #e4d5c7; fill: #e4d5c7; }
+        .bc66 { stroke: #ffb670; fill: #ffb670; }
+        .bc67 { stroke: #606060; fill: #606060; }
+        .bc68 { stroke: #feffff; fill: #feffff; }
+        .bc69 { stroke: #1f1d45; fill: #1f1d45; }
+        .bc70 { stroke: #050404; fill: #050404; }
+        .bc71 { stroke: #0f4ac6; fill: #0f4ac6; }
+        .bc72 { stroke: #70a598; fill: #70a598; }
+        .bc73 { stroke: #4ab118; fill: #4ab118; }
+        .bc74 { stroke: #665993; fill: #665993; }
+        .bc75 { stroke: #bd0013; fill: #bd0013; }
+        .bc76 { stroke: #f8dcc0; fill: #f8dcc0; }
+        .bc77 { stroke: #e7741e; fill: #e7741e; }
+        .bc78 { stroke: #4e7cbf; fill: #4e7cbf; }
+        .bc79 { stroke: #1997c6; fill: #1997c6; }
+        .bc80 { stroke: #c8faf4; fill: #c8faf4; }
+        .bc81 { stroke: #9eff6e; fill: #9eff6e; }
+        .bc82 { stroke: #9b5953; fill: #9b5953; }
+        .bc83 { stroke: #fc5f5a; fill: #fc5f5a; }
+        .bc84 { stroke: #f6f5fb; fill: #f6f5fb; }
+        .bc85 { stroke: #efc11a; fill: #efc11a; }
+        .bc86 { stroke: #706b4e; fill: #706b4e; }
+        .bc87 { stroke: #efbf38; fill: #efbf38; }
+        .bc88 { stroke: #212121; fill: #212121; }
+        .bc89 { stroke: #151515; fill: #151515; }
+        .bc90 { stroke: #6c99bb; fill: #6c99bb; }
+        .bc91 { stroke: #7dd6cf; fill: #7dd6cf; }
+        .bc92 { stroke: #7e8e50; fill: #7e8e50; }
+        .bc93 { stroke: #9f4e85; fill: #9f4e85; }
+        .bc94 { stroke: #ac4142; fill: #ac4142; }
+        .bc95 { stroke: #d0d0d0; fill: #d0d0d0; }
+        .bc96 { stroke: #e5b567; fill: #e5b567; }
+        .bc97 { stroke: #505050; fill: #505050; }
+        .bc98 { stroke: #f5f5f5; fill: #f5f5f5; }
+        .bc99 { stroke: #303030; fill: #303030; }
+        .bc100 { stroke: #325cc0; fill: #325cc0; }
+        .bc101 { stroke: #0083b2; fill: #0083b2; }
+        .bc102 { stroke: #448c27; fill: #448c27; }
+        .bc103 { stroke: #7a3e9d; fill: #7a3e9d; }
+        .bc104 { stroke: #aa3731; fill: #aa3731; }
+        .bc105 { stroke: #cb9000; fill: #cb9000; }
+        .bc106 { stroke: #777777; fill: #777777; }
+        .bc107 { stroke: #00aacb; fill: #00aacb; }
+        .bc108 { stroke: #60cb00; fill: #60cb00; }
+        .bc109 { stroke: #e64ce6; fill: #e64ce6; }
+        .bc110 { stroke: #f05050; fill: #f05050; }
+        .bc111 { stroke: #ffbc5d; fill: #ffbc5d; }
+        .bc112 { stroke: #0f1610; fill: #0f1610; }
+        .bc113 { stroke: #112616; fill: #112616; }
+        .bc114 { stroke: #2f6a7f; fill: #2f6a7f; }
+        .bc115 { stroke: #327f77; fill: #327f77; }
+        .bc116 { stroke: #2f7e25; fill: #2f7e25; }
+        .bc117 { stroke: #47587f; fill: #47587f; }
+        .bc118 { stroke: #7f2b27; fill: #7f2b27; }
+        .bc119 { stroke: #647d75; fill: #647d75; }
+        .bc120 { stroke: #717f24; fill: #717f24; }
+        .bc121 { stroke: #3c4812; fill: #3c4812; }
+        .bc122 { stroke: #00aae0; fill: #00aae0; }
+        .bc123 { stroke: #00e0c4; fill: #00e0c4; }
+        .bc124 { stroke: #18e000; fill: #18e000; }
+        .bc125 { stroke: #0058e0; fill: #0058e0; }
+        .bc126 { stroke: #e08009; fill: #e08009; }
+        .bc127 { stroke: #73fa91; fill: #73fa91; }
+        .bc128 { stroke: #bde000; fill: #bde000; }
+        .bc129 { stroke: #1d4125; fill: #1d4125; }
+        .bc130 { stroke: #262a33; fill: #262a33; }
+        .bc131 { stroke: #2472c8; fill: #2472c8; }
+        .bc132 { stroke: #0fa8cd; fill: #0fa8cd; }
+        .bc133 { stroke: #05bc79; fill: #05bc79; }
+        .bc134 { stroke: #bc3fbc; fill: #bc3fbc; }
+        .bc135 { stroke: #cd3131; fill: #cd3131; }
+        .bc136 { stroke: #e5e5e5; fill: #e5e5e5; }
+        .bc137 { stroke: #e5e512; fill: #e5e512; }
+        .bc138 { stroke: #666666; fill: #666666; }
+        .bc139 { stroke: #5a5c62; fill: #5a5c62; }
+        .bc140 { stroke: #f8f8f0; fill: #f8f8f0; }
+        .bc141 { stroke: #2c2b2b; fill: #2c2b2b; }
+        .bc142 { stroke: #0225c7; fill: #0225c7; }
+        .bc143 { stroke: #00c5c7; fill: #00c5c7; }
+        .bc144 { stroke: #00c200; fill: #00c200; }
+        .bc145 { stroke: #ca30c7; fill: #ca30c7; }
+        .bc146 { stroke: #c91b00; fill: #c91b00; }
+        .bc147 { stroke: #c7c7c7; fill: #c7c7c7; }
+        .bc148 { stroke: #c7c400; fill: #c7c400; }
+        .bc149 { stroke: #686868; fill: #686868; }
+        .bc150 { stroke: #6871ff; fill: #6871ff; }
+        .bc151 { stroke: #60fdff; fill: #60fdff; }
+        .bc152 { stroke: #5ffa68; fill: #5ffa68; }
+        .bc153 { stroke: #ff77ff; fill: #ff77ff; }
+        .bc154 { stroke: #ff6e67; fill: #ff6e67; }
+        .bc155 { stroke: #fffc67; fill: #fffc67; }
+        .bc156 { stroke: #6b5b02; fill: #6b5b02; }
+        .bc157 { stroke: #1e1e1e; fill: #1e1e1e; }
+        .bc158 { stroke: #1a1a1a; fill: #1a1a1a; }
+        .bc159 { stroke: #0869cb; fill: #0869cb; }
+        .bc160 { stroke: #479ec2; fill: #479ec2; }
+        .bc161 { stroke: #26a439; fill: #26a439; }
+        .bc162 { stroke: #9647bf; fill: #9647bf; }
+        .bc163 { stroke: #cc372e; fill: #cc372e; }
+        .bc164 { stroke: #98989d; fill: #98989d; }
+        .bc165 { stroke: #cdac08; fill: #cdac08; }
+        .bc166 { stroke: #464646; fill: #464646; }
+        .bc167 { stroke: #0a84ff; fill: #0a84ff; }
+        .bc168 { stroke: #76d6ff; fill: #76d6ff; }
+        .bc169 { stroke: #32d74b; fill: #32d74b; }
+        .bc170 { stroke: #bf5af2; fill: #bf5af2; }
+        .bc171 { stroke: #ff453a; fill: #ff453a; }
+        .bc172 { stroke: #ffd60a; fill: #ffd60a; }
+        .bc173 { stroke: #3f638b; fill: #3f638b; }
+        .bc174 { stroke: #0e1019; fill: #0e1019; }
+        .bc175 { stroke: #232323; fill: #232323; }
+        .bc176 { stroke: #008df8; fill: #008df8; }
+        .bc177 { stroke: #00d8eb; fill: #00d8eb; }
+        .bc178 { stroke: #8ce10b; fill: #8ce10b; }
+        .bc179 { stroke: #6d43a6; fill: #6d43a6; }
+        .bc180 { stroke: #ff000f; fill: #ff000f; }
+        .bc181 { stroke: #ffb900; fill: #ffb900; }
+        .bc182 { stroke: #444444; fill: #444444; }
+        .bc183 { stroke: #0092ff; fill: #0092ff; }
+        .bc184 { stroke: #67fff0; fill: #67fff0; }
+        .bc185 { stroke: #abe15b; fill: #abe15b; }
+        .bc186 { stroke: #9a5feb; fill: #9a5feb; }
+        .bc187 { stroke: #ff2740; fill: #ff2740; }
+        .bc188 { stroke: #ffd242; fill: #ffd242; }
+        .bc189 { stroke: #002a3b; fill: #002a3b; }
+        .bc190 { stroke: #ff0018; fill: #ff0018; }
+        .bc191 { stroke: #1c1c1c; fill: #1c1c1c; }
+        .bc192 { stroke: #3d352a; fill: #3d352a; }
+        .bc193 { stroke: #6495ed; fill: #6495ed; }
+        .bc194 { stroke: #b0c4de; fill: #b0c4de; }
+        .bc195 { stroke: #86af80; fill: #86af80; }
+        .bc196 { stroke: #deb887; fill: #deb887; }
+        .bc197 { stroke: #cd5c5c; fill: #cd5c5c; }
+        .bc198 { stroke: #bbaa99; fill: #bbaa99; }
+        .bc199 { stroke: #e8ae5b; fill: #e8ae5b; }
+        .bc200 { stroke: #554444; fill: #554444; }
+        .bc201 { stroke: #87ceeb; fill: #87ceeb; }
+        .bc202 { stroke: #88aa22; fill: #88aa22; }
+        .bc203 { stroke: #996600; fill: #996600; }
+        .bc204 { stroke: #cc5533; fill: #cc5533; }
+        .bc205 { stroke: #ddccbb; fill: #ddccbb; }
+        .bc206 { stroke: #ffa75d; fill: #ffa75d; }
+        .bc207 { stroke: #4d4d4d; fill: #4d4d4d; }
+        .bc208 { stroke: #e2bbef; fill: #e2bbef; }
+        .bc209 { stroke: #202746; fill: #202746; }
+        .bc210 { stroke: #3d8fd1; fill: #3d8fd1; }
+        .bc211 { stroke: #22a2c9; fill: #22a2c9; }
+        .bc212 { stroke: #ac9739; fill: #ac9739; }
+        .bc213 { stroke: #6679cc; fill: #6679cc; }
+        .bc214 { stroke: #c94922; fill: #c94922; }
+        .bc215 { stroke: #979db4; fill: #979db4; }
+        .bc216 { stroke: #c08b30; fill: #c08b30; }
+        .bc217 { stroke: #6b7394; fill: #6b7394; }
+        .bc218 { stroke: #898ea4; fill: #898ea4; }
+        .bc219 { stroke: #9c637a; fill: #9c637a; }
+        .bc220 { stroke: #293256; fill: #293256; }
+        .bc221 { stroke: #dfe2f1; fill: #dfe2f1; }
+        .bc222 { stroke: #c76b29; fill: #c76b29; }
+        .bc223 { stroke: #f5f7ff; fill: #f5f7ff; }
+        .bc224 { stroke: #5e6687; fill: #5e6687; }
+        <!-- Foreground custom colors -->
+        .fc0 { fill: #4a4543; }
+        .fc1 { fill: #a5a2a2; }
+        .fc2 { fill: #dddddd; }
+        .fc3 { fill: #eeeeec; }
+        .fc4 { fill: #feffff; }
+        .fc5 { fill: #f8dcc0; }
+        .fc6 { fill: #d0d0d0; }
+        .fc7 { fill: #000000; }
+        .fc8 { fill: #637d75; }
+        .fc9 { fill: #e5e5e5; }
+        .fc10 { fill: #d5a200; }
+        .fc11 { fill: #ffffff; }
+        .fc12 { fill: #fffaf4; }
+        .fc13 { fill: #ddeedd; }
+        .fc14 { fill: #979db4; }
+    </style>
+    <rect width="100%" height="100%" x="0" y="0" style="fill: #000000"/>
+<g class="bg">
+<rect x="10px" y="10px" width="248px" height="16px" class="bc0"/>
+<rect x="258px" y="10px" width="16px" height="16px" class="bc1"/>
+<rect x="274px" y="10px" width="16px" height="16px" class="bc2"/>
+<rect x="290px" y="10px" width="16px" height="16px" class="bc3"/>
+<rect x="306px" y="10px" width="16px" height="16px" class="bc4"/>
+<rect x="322px" y="10px" width="16px" height="16px" class="bc5"/>
+<rect x="338px" y="10px" width="16px" height="16px" class="bc6"/>
+<rect x="354px" y="10px" width="16px" height="16px" class="bc7"/>
+<rect x="370px" y="10px" width="16px" height="16px" class="bc8"/>
+<rect x="386px" y="10px" width="16px" height="16px" class="bc9"/>
+<rect x="402px" y="10px" width="16px" height="16px" class="bc10"/>
+<rect x="418px" y="10px" width="16px" height="16px" class="bc11"/>
+<rect x="434px" y="10px" width="16px" height="16px" class="bc12"/>
+<rect x="450px" y="10px" width="16px" height="16px" class="bc13"/>
+<rect x="466px" y="10px" width="16px" height="16px" class="bc14"/>
+<rect x="482px" y="10px" width="16px" height="16px" class="bc0"/>
+<rect x="498px" y="10px" width="16px" height="16px" class="bc15"/>
+<rect x="514px" y="10px" width="16px" height="16px" class="bc7"/>
+<rect x="530px" y="10px" width="16px" height="16px" class="bc15"/>
+<rect x="10px" y="26px" width="264px" height="16px" class="bc1"/>
+<rect x="274px" y="26px" width="16px" height="16px" class="bc2"/>
+<rect x="290px" y="26px" width="16px" height="16px" class="bc3"/>
+<rect x="306px" y="26px" width="16px" height="16px" class="bc4"/>
+<rect x="322px" y="26px" width="16px" height="16px" class="bc5"/>
+<rect x="338px" y="26px" width="16px" height="16px" class="bc6"/>
+<rect x="354px" y="26px" width="16px" height="16px" class="bc7"/>
+<rect x="370px" y="26px" width="16px" height="16px" class="bc8"/>
+<rect x="386px" y="26px" width="16px" height="16px" class="bc9"/>
+<rect x="402px" y="26px" width="16px" height="16px" class="bc10"/>
+<rect x="418px" y="26px" width="16px" height="16px" class="bc11"/>
+<rect x="434px" y="26px" width="16px" height="16px" class="bc12"/>
+<rect x="450px" y="26px" width="16px" height="16px" class="bc13"/>
+<rect x="466px" y="26px" width="16px" height="16px" class="bc14"/>
+<rect x="482px" y="26px" width="16px" height="16px" class="bc0"/>
+<rect x="498px" y="26px" width="32px" height="16px" class="bc15"/>
+<rect x="530px" y="26px" width="16px" height="16px" class="bc7"/>
+<rect x="10px" y="42px" width="248px" height="16px" class="bc16"/>
+<rect x="258px" y="42px" width="16px" height="16px" class="bc17"/>
+<rect x="274px" y="42px" width="16px" height="16px" class="bc18"/>
+<rect x="290px" y="42px" width="16px" height="16px" class="bc19"/>
+<rect x="306px" y="42px" width="16px" height="16px" class="bc20"/>
+<rect x="322px" y="42px" width="16px" height="16px" class="bc21"/>
+<rect x="338px" y="42px" width="16px" height="16px" class="bc22"/>
+<rect x="354px" y="42px" width="16px" height="16px" class="bc23"/>
+<rect x="370px" y="42px" width="16px" height="16px" class="bc24"/>
+<rect x="386px" y="42px" width="16px" height="16px" class="bc25"/>
+<rect x="402px" y="42px" width="16px" height="16px" class="bc26"/>
+<rect x="418px" y="42px" width="16px" height="16px" class="bc27"/>
+<rect x="434px" y="42px" width="16px" height="16px" class="bc28"/>
+<rect x="450px" y="42px" width="16px" height="16px" class="bc29"/>
+<rect x="466px" y="42px" width="16px" height="16px" class="bc30"/>
+<rect x="482px" y="42px" width="16px" height="16px" class="bc0"/>
+<rect x="498px" y="42px" width="16px" height="16px" class="bc31"/>
+<rect x="514px" y="42px" width="16px" height="16px" class="bc32"/>
+<rect x="530px" y="42px" width="16px" height="16px" class="bc33"/>
+<rect x="10px" y="58px" width="248px" height="16px" class="bc34"/>
+<rect x="274px" y="58px" width="16px" height="16px" class="bc35"/>
+<rect x="290px" y="58px" width="16px" height="16px" class="bc36"/>
+<rect x="306px" y="58px" width="16px" height="16px" class="bc37"/>
+<rect x="322px" y="58px" width="16px" height="16px" class="bc38"/>
+<rect x="338px" y="58px" width="16px" height="16px" class="bc39"/>
+<rect x="354px" y="58px" width="16px" height="16px" class="bc40"/>
+<rect x="370px" y="58px" width="16px" height="16px" class="bc41"/>
+<rect x="386px" y="58px" width="16px" height="16px" class="bc42"/>
+<rect x="402px" y="58px" width="16px" height="16px" class="bc43"/>
+<rect x="418px" y="58px" width="16px" height="16px" class="bc44"/>
+<rect x="434px" y="58px" width="16px" height="16px" class="bc45"/>
+<rect x="450px" y="58px" width="16px" height="16px" class="bc46"/>
+<rect x="466px" y="58px" width="16px" height="16px" class="bc47"/>
+<rect x="482px" y="58px" width="16px" height="16px" class="bc48"/>
+<rect x="498px" y="58px" width="16px" height="16px" class="bc49"/>
+<rect x="514px" y="58px" width="16px" height="16px" class="bc50"/>
+<rect x="530px" y="58px" width="16px" height="16px" class="bc51"/>
+<rect x="10px" y="74px" width="264px" height="16px" class="bc52"/>
+<rect x="274px" y="74px" width="16px" height="16px" class="bc53"/>
+<rect x="290px" y="74px" width="16px" height="16px" class="bc54"/>
+<rect x="306px" y="74px" width="16px" height="16px" class="bc55"/>
+<rect x="322px" y="74px" width="16px" height="16px" class="bc56"/>
+<rect x="338px" y="74px" width="16px" height="16px" class="bc57"/>
+<rect x="354px" y="74px" width="16px" height="16px" class="bc58"/>
+<rect x="370px" y="74px" width="16px" height="16px" class="bc59"/>
+<rect x="386px" y="74px" width="16px" height="16px" class="bc60"/>
+<rect x="402px" y="74px" width="16px" height="16px" class="bc61"/>
+<rect x="418px" y="74px" width="16px" height="16px" class="bc54"/>
+<rect x="434px" y="74px" width="16px" height="16px" class="bc62"/>
+<rect x="450px" y="74px" width="16px" height="16px" class="bc63"/>
+<rect x="466px" y="74px" width="16px" height="16px" class="bc64"/>
+<rect x="482px" y="74px" width="16px" height="16px" class="bc65"/>
+<rect x="498px" y="74px" width="16px" height="16px" class="bc66"/>
+<rect x="514px" y="74px" width="16px" height="16px" class="bc67"/>
+<rect x="530px" y="74px" width="16px" height="16px" class="bc68"/>
+<rect x="10px" y="90px" width="248px" height="16px" class="bc69"/>
+<rect x="258px" y="90px" width="16px" height="16px" class="bc70"/>
+<rect x="274px" y="90px" width="16px" height="16px" class="bc71"/>
+<rect x="290px" y="90px" width="16px" height="16px" class="bc72"/>
+<rect x="306px" y="90px" width="16px" height="16px" class="bc73"/>
+<rect x="322px" y="90px" width="16px" height="16px" class="bc74"/>
+<rect x="338px" y="90px" width="16px" height="16px" class="bc75"/>
+<rect x="354px" y="90px" width="16px" height="16px" class="bc76"/>
+<rect x="370px" y="90px" width="16px" height="16px" class="bc77"/>
+<rect x="386px" y="90px" width="16px" height="16px" class="bc78"/>
+<rect x="402px" y="90px" width="16px" height="16px" class="bc79"/>
+<rect x="418px" y="90px" width="16px" height="16px" class="bc80"/>
+<rect x="434px" y="90px" width="16px" height="16px" class="bc81"/>
+<rect x="450px" y="90px" width="16px" height="16px" class="bc82"/>
+<rect x="466px" y="90px" width="16px" height="16px" class="bc83"/>
+<rect x="482px" y="90px" width="16px" height="16px" class="bc84"/>
+<rect x="498px" y="90px" width="16px" height="16px" class="bc85"/>
+<rect x="514px" y="90px" width="16px" height="16px" class="bc86"/>
+<rect x="530px" y="90px" width="16px" height="16px" class="bc87"/>
+<rect x="10px" y="106px" width="248px" height="16px" class="bc88"/>
+<rect x="258px" y="106px" width="16px" height="16px" class="bc89"/>
+<rect x="274px" y="106px" width="16px" height="16px" class="bc90"/>
+<rect x="290px" y="106px" width="16px" height="16px" class="bc91"/>
+<rect x="306px" y="106px" width="16px" height="16px" class="bc92"/>
+<rect x="322px" y="106px" width="16px" height="16px" class="bc93"/>
+<rect x="338px" y="106px" width="16px" height="16px" class="bc94"/>
+<rect x="354px" y="106px" width="16px" height="16px" class="bc95"/>
+<rect x="370px" y="106px" width="16px" height="16px" class="bc96"/>
+<rect x="386px" y="106px" width="16px" height="16px" class="bc97"/>
+<rect x="402px" y="106px" width="16px" height="16px" class="bc90"/>
+<rect x="418px" y="106px" width="16px" height="16px" class="bc91"/>
+<rect x="434px" y="106px" width="16px" height="16px" class="bc92"/>
+<rect x="450px" y="106px" width="16px" height="16px" class="bc93"/>
+<rect x="466px" y="106px" width="16px" height="16px" class="bc94"/>
+<rect x="482px" y="106px" width="16px" height="16px" class="bc98"/>
+<rect x="498px" y="106px" width="16px" height="16px" class="bc96"/>
+<rect x="514px" y="106px" width="16px" height="16px" class="bc99"/>
+<rect x="530px" y="106px" width="16px" height="16px" class="bc95"/>
+<rect x="10px" y="122px" width="248px" height="16px" class="bc0"/>
+<rect x="274px" y="122px" width="16px" height="16px" class="bc100"/>
+<rect x="290px" y="122px" width="16px" height="16px" class="bc101"/>
+<rect x="306px" y="122px" width="16px" height="16px" class="bc102"/>
+<rect x="322px" y="122px" width="16px" height="16px" class="bc103"/>
+<rect x="338px" y="122px" width="16px" height="16px" class="bc104"/>
+<rect x="354px" y="122px" width="16px" height="16px" class="bc0"/>
+<rect x="370px" y="122px" width="16px" height="16px" class="bc105"/>
+<rect x="386px" y="122px" width="16px" height="16px" class="bc106"/>
+<rect x="402px" y="122px" width="16px" height="16px" class="bc33"/>
+<rect x="418px" y="122px" width="16px" height="16px" class="bc107"/>
+<rect x="434px" y="122px" width="16px" height="16px" class="bc108"/>
+<rect x="450px" y="122px" width="16px" height="16px" class="bc109"/>
+<rect x="466px" y="122px" width="16px" height="16px" class="bc110"/>
+<rect x="482px" y="122px" width="16px" height="16px" class="bc0"/>
+<rect x="498px" y="122px" width="16px" height="16px" class="bc111"/>
+<rect x="514px" y="122px" width="16px" height="16px" class="bc32"/>
+<rect x="530px" y="122px" width="16px" height="16px" class="bc33"/>
+<rect x="10px" y="138px" width="248px" height="16px" class="bc112"/>
+<rect x="258px" y="138px" width="16px" height="16px" class="bc113"/>
+<rect x="274px" y="138px" width="16px" height="16px" class="bc114"/>
+<rect x="290px" y="138px" width="16px" height="16px" class="bc115"/>
+<rect x="306px" y="138px" width="16px" height="16px" class="bc116"/>
+<rect x="322px" y="138px" width="16px" height="16px" class="bc117"/>
+<rect x="338px" y="138px" width="16px" height="16px" class="bc118"/>
+<rect x="354px" y="138px" width="16px" height="16px" class="bc119"/>
+<rect x="370px" y="138px" width="16px" height="16px" class="bc120"/>
+<rect x="386px" y="138px" width="16px" height="16px" class="bc121"/>
+<rect x="402px" y="138px" width="16px" height="16px" class="bc122"/>
+<rect x="418px" y="138px" width="16px" height="16px" class="bc123"/>
+<rect x="434px" y="138px" width="16px" height="16px" class="bc124"/>
+<rect x="450px" y="138px" width="16px" height="16px" class="bc125"/>
+<rect x="466px" y="138px" width="16px" height="16px" class="bc126"/>
+<rect x="482px" y="138px" width="16px" height="16px" class="bc127"/>
+<rect x="498px" y="138px" width="16px" height="16px" class="bc128"/>
+<rect x="514px" y="138px" width="16px" height="16px" class="bc129"/>
+<rect x="530px" y="138px" width="16px" height="16px" class="bc127"/>
+<rect x="10px" y="154px" width="248px" height="16px" class="bc130"/>
+<rect x="274px" y="154px" width="16px" height="16px" class="bc131"/>
+<rect x="290px" y="154px" width="16px" height="16px" class="bc132"/>
+<rect x="306px" y="154px" width="16px" height="16px" class="bc133"/>
+<rect x="322px" y="154px" width="16px" height="16px" class="bc134"/>
+<rect x="338px" y="154px" width="16px" height="16px" class="bc135"/>
+<rect x="354px" y="154px" width="16px" height="16px" class="bc136"/>
+<rect x="370px" y="154px" width="16px" height="16px" class="bc137"/>
+<rect x="386px" y="154px" width="16px" height="16px" class="bc138"/>
+<rect x="402px" y="154px" width="16px" height="16px" class="bc131"/>
+<rect x="418px" y="154px" width="16px" height="16px" class="bc132"/>
+<rect x="434px" y="154px" width="16px" height="16px" class="bc133"/>
+<rect x="450px" y="154px" width="16px" height="16px" class="bc134"/>
+<rect x="466px" y="154px" width="16px" height="16px" class="bc135"/>
+<rect x="482px" y="154px" width="16px" height="16px" class="bc136"/>
+<rect x="498px" y="154px" width="16px" height="16px" class="bc137"/>
+<rect x="514px" y="154px" width="16px" height="16px" class="bc139"/>
+<rect x="530px" y="154px" width="16px" height="16px" class="bc140"/>
+<rect x="10px" y="170px" width="248px" height="16px" class="bc141"/>
+<rect x="274px" y="170px" width="16px" height="16px" class="bc142"/>
+<rect x="290px" y="170px" width="16px" height="16px" class="bc143"/>
+<rect x="306px" y="170px" width="16px" height="16px" class="bc144"/>
+<rect x="322px" y="170px" width="16px" height="16px" class="bc145"/>
+<rect x="338px" y="170px" width="16px" height="16px" class="bc146"/>
+<rect x="354px" y="170px" width="16px" height="16px" class="bc147"/>
+<rect x="370px" y="170px" width="16px" height="16px" class="bc148"/>
+<rect x="386px" y="170px" width="16px" height="16px" class="bc149"/>
+<rect x="402px" y="170px" width="16px" height="16px" class="bc150"/>
+<rect x="418px" y="170px" width="16px" height="16px" class="bc151"/>
+<rect x="434px" y="170px" width="16px" height="16px" class="bc152"/>
+<rect x="450px" y="170px" width="16px" height="16px" class="bc153"/>
+<rect x="466px" y="170px" width="16px" height="16px" class="bc154"/>
+<rect x="482px" y="170px" width="16px" height="16px" class="bc48"/>
+<rect x="498px" y="170px" width="16px" height="16px" class="bc155"/>
+<rect x="514px" y="170px" width="16px" height="16px" class="bc156"/>
+<rect x="530px" y="170px" width="16px" height="16px" class="bc147"/>
+<rect x="10px" y="186px" width="248px" height="16px" class="bc157"/>
+<rect x="258px" y="186px" width="16px" height="16px" class="bc158"/>
+<rect x="274px" y="186px" width="16px" height="16px" class="bc159"/>
+<rect x="290px" y="186px" width="16px" height="16px" class="bc160"/>
+<rect x="306px" y="186px" width="16px" height="16px" class="bc161"/>
+<rect x="322px" y="186px" width="16px" height="16px" class="bc162"/>
+<rect x="338px" y="186px" width="16px" height="16px" class="bc163"/>
+<rect x="354px" y="186px" width="16px" height="16px" class="bc164"/>
+<rect x="370px" y="186px" width="16px" height="16px" class="bc165"/>
+<rect x="386px" y="186px" width="16px" height="16px" class="bc166"/>
+<rect x="402px" y="186px" width="16px" height="16px" class="bc167"/>
+<rect x="418px" y="186px" width="16px" height="16px" class="bc168"/>
+<rect x="434px" y="186px" width="16px" height="16px" class="bc169"/>
+<rect x="450px" y="186px" width="16px" height="16px" class="bc170"/>
+<rect x="466px" y="186px" width="16px" height="16px" class="bc171"/>
+<rect x="482px" y="186px" width="16px" height="16px" class="bc48"/>
+<rect x="498px" y="186px" width="16px" height="16px" class="bc172"/>
+<rect x="514px" y="186px" width="16px" height="16px" class="bc173"/>
+<rect x="530px" y="186px" width="16px" height="16px" class="bc164"/>
+<rect x="10px" y="202px" width="248px" height="16px" class="bc174"/>
+<rect x="258px" y="202px" width="16px" height="16px" class="bc175"/>
+<rect x="274px" y="202px" width="16px" height="16px" class="bc176"/>
+<rect x="290px" y="202px" width="16px" height="16px" class="bc177"/>
+<rect x="306px" y="202px" width="16px" height="16px" class="bc178"/>
+<rect x="322px" y="202px" width="16px" height="16px" class="bc179"/>
+<rect x="338px" y="202px" width="16px" height="16px" class="bc180"/>
+<rect x="354px" y="202px" width="16px" height="16px" class="bc48"/>
+<rect x="370px" y="202px" width="16px" height="16px" class="bc181"/>
+<rect x="386px" y="202px" width="16px" height="16px" class="bc182"/>
+<rect x="402px" y="202px" width="16px" height="16px" class="bc183"/>
+<rect x="418px" y="202px" width="16px" height="16px" class="bc184"/>
+<rect x="434px" y="202px" width="16px" height="16px" class="bc185"/>
+<rect x="450px" y="202px" width="16px" height="16px" class="bc186"/>
+<rect x="466px" y="202px" width="16px" height="16px" class="bc187"/>
+<rect x="482px" y="202px" width="16px" height="16px" class="bc48"/>
+<rect x="498px" y="202px" width="16px" height="16px" class="bc188"/>
+<rect x="514px" y="202px" width="16px" height="16px" class="bc189"/>
+<rect x="530px" y="202px" width="16px" height="16px" class="bc190"/>
+<rect x="10px" y="218px" width="248px" height="16px" class="bc191"/>
+<rect x="258px" y="218px" width="16px" height="16px" class="bc192"/>
+<rect x="274px" y="218px" width="16px" height="16px" class="bc193"/>
+<rect x="290px" y="218px" width="16px" height="16px" class="bc194"/>
+<rect x="306px" y="218px" width="16px" height="16px" class="bc195"/>
+<rect x="322px" y="218px" width="16px" height="16px" class="bc196"/>
+<rect x="338px" y="218px" width="16px" height="16px" class="bc197"/>
+<rect x="354px" y="218px" width="16px" height="16px" class="bc198"/>
+<rect x="370px" y="218px" width="16px" height="16px" class="bc199"/>
+<rect x="386px" y="218px" width="16px" height="16px" class="bc200"/>
+<rect x="402px" y="218px" width="16px" height="16px" class="bc201"/>
+<rect x="418px" y="218px" width="16px" height="16px" class="bc194"/>
+<rect x="434px" y="218px" width="16px" height="16px" class="bc202"/>
+<rect x="450px" y="218px" width="16px" height="16px" class="bc203"/>
+<rect x="466px" y="218px" width="16px" height="16px" class="bc204"/>
+<rect x="482px" y="218px" width="16px" height="16px" class="bc205"/>
+<rect x="498px" y="218px" width="16px" height="16px" class="bc206"/>
+<rect x="514px" y="218px" width="16px" height="16px" class="bc207"/>
+<rect x="530px" y="218px" width="16px" height="16px" class="bc208"/>
+<rect x="10px" y="234px" width="264px" height="16px" class="bc209"/>
+<rect x="274px" y="234px" width="16px" height="16px" class="bc210"/>
+<rect x="290px" y="234px" width="16px" height="16px" class="bc211"/>
+<rect x="306px" y="234px" width="16px" height="16px" class="bc212"/>
+<rect x="322px" y="234px" width="16px" height="16px" class="bc213"/>
+<rect x="338px" y="234px" width="16px" height="16px" class="bc214"/>
+<rect x="354px" y="234px" width="16px" height="16px" class="bc215"/>
+<rect x="370px" y="234px" width="16px" height="16px" class="bc216"/>
+<rect x="386px" y="234px" width="16px" height="16px" class="bc217"/>
+<rect x="402px" y="234px" width="16px" height="16px" class="bc218"/>
+<rect x="418px" y="234px" width="16px" height="16px" class="bc219"/>
+<rect x="434px" y="234px" width="16px" height="16px" class="bc220"/>
+<rect x="450px" y="234px" width="16px" height="16px" class="bc221"/>
+<rect x="466px" y="234px" width="16px" height="16px" class="bc222"/>
+<rect x="482px" y="234px" width="16px" height="16px" class="bc223"/>
+<rect x="498px" y="234px" width="32px" height="16px" class="bc224"/>
+<rect x="530px" y="234px" width="16px" height="16px" class="bc215"/>
+</g>
+<text x="10px" y="18px"><tspan class="fc0">3024 Day                                                           </tspan></text>
+<text x="10px" y="34px"><tspan class="fc1">3024 Night                                                         </tspan></text>
+<text x="10px" y="50px"><tspan class="fc2">Aardvark Blue                                                      </tspan></text>
+<text x="10px" y="66px"><tspan class="fc3">Abernathy                                                          </tspan></text>
+<text x="10px" y="82px"><tspan class="fc4">Adventure                                                          </tspan></text>
+<text x="10px" y="98px"><tspan class="fc5">AdventureTime                                                      </tspan></text>
+<text x="10px" y="114px"><tspan class="fc6">Afterglow                                                          </tspan></text>
+<text x="10px" y="130px"><tspan class="fc7">Alabaster                                                          </tspan></text>
+<text x="10px" y="146px"><tspan class="fc8">AlienBlood                                                         </tspan></text>
+<text x="10px" y="162px"><tspan class="fc9">Andromeda                                                          </tspan></text>
+<text x="10px" y="178px"><tspan class="fc10">Apple Classic                                                      </tspan></text>
+<text x="10px" y="194px"><tspan class="fc11">Apple System Colors                                                </tspan></text>
+<text x="10px" y="210px"><tspan class="fc12">Argonaut                                                           </tspan></text>
+<text x="10px" y="226px"><tspan class="fc13">Arthur                                                             </tspan></text>
+<text x="10px" y="242px"><tspan class="fc14">AtelierSulphurpool                                                 </tspan></text>
+</svg>
diff --git a/cli/testdata/margintest_nogridmode.ansi b/cli/testdata/margintest_nogridmode.ansi
new file mode 100644
index 0000000..1b1d3fc
--- /dev/null
+++ b/cli/testdata/margintest_nogridmode.ansi
@@ -0,0 +1,15 @@
+[48:2:247:247:247m[38:2:74:69:67m3024 Day                       [48:2:9:3:0m  [48:2:1:160:228m  [48:2:181:228:244m  [48:2:1:162:82m  [48:2:161:106:148m  [48:2:219:45:32m  [48:2:165:162:162m  [48:2:253:237:2m  [48:2:92:88:85m  [48:2:128:125:124m  [48:2:205:171:83m  [48:2:58:52:50m  [48:2:214:213:212m  [48:2:232:187:208m  [48:2:247:247:247m  [48:2:74:69:67m  [48:2:165:162:162m  [48:2:74:69:67m  
+[48:2:9:3:0m[38:2:165:162:162m3024 Night                     [48:2:9:3:0m  [48:2:1:160:228m  [48:2:181:228:244m  [48:2:1:162:82m  [48:2:161:106:148m  [48:2:219:45:32m  [48:2:165:162:162m  [48:2:253:237:2m  [48:2:92:88:85m  [48:2:128:125:124m  [48:2:205:171:83m  [48:2:58:52:50m  [48:2:214:213:212m  [48:2:232:187:208m  [48:2:247:247:247m  [48:2:74:69:67m  [48:2:74:69:67m  [48:2:165:162:162m  
+[48:2:16:32:64m[38:2:221:221:221mAardvark Blue                  [48:2:25:25:25m  [48:2:19:112:211m  [48:2:0:142:176m  [48:2:75:140:15m  [48:2:196:58:195m  [48:2:170:52:46m  [48:2:190:190:190m  [48:2:219:186:0m  [48:2:69:69:69m  [48:2:96:164:236m  [48:2:96:182:203m  [48:2:149:220:85m  [48:2:226:107:226m  [48:2:240:91:80m  [48:2:247:247:247m  [48:2:255:231:99m  [48:2:191:219:254m  [48:2:0:122:204m  
+[48:2:17:20:22m[38:2:238:238:236mAbernathy                      [48:2:0:0:0m  [48:2:16:147:245m  [48:2:0:205:205m  [48:2:0:205:0m  [48:2:205:0:205m  [48:2:205:0:0m  [48:2:250:235:215m  [48:2:205:205:0m  [48:2:64:64:64m  [48:2:17:181:246m  [48:2:0:255:255m  [48:2:0:255:0m  [48:2:255:0:255m  [48:2:255:0:0m  [48:2:255:255:255m  [48:2:255:255:0m  [48:2:238:238:236m  [48:2:187:187:187m  
+[48:2:4:4:4m[38:2:254:255:255mAdventure                      [48:2:4:4:4m  [48:2:65:122:179m  [48:2:189:207:229m  [48:2:93:166:2m  [48:2:229:196:153m  [48:2:216:74:51m  [48:2:219:222:216m  [48:2:238:187:110m  [48:2:104:86:86m  [48:2:151:215:239m  [48:2:189:207:229m  [48:2:153:181:44m  [48:2:170:121:0m  [48:2:215:107:66m  [48:2:228:213:199m  [48:2:255:182:112m  [48:2:96:96:96m  [48:2:254:255:255m  
+[48:2:31:29:69m[38:2:248:220:192mAdventureTime                  [48:2:5:4:4m  [48:2:15:74:198m  [48:2:112:165:152m  [48:2:74:177:24m  [48:2:102:89:147m  [48:2:189:0:19m  [48:2:248:220:192m  [48:2:231:116:30m  [48:2:78:124:191m  [48:2:25:151:198m  [48:2:200:250:244m  [48:2:158:255:110m  [48:2:155:89:83m  [48:2:252:95:90m  [48:2:246:245:251m  [48:2:239:193:26m  [48:2:112:107:78m  [48:2:239:191:56m  
+[48:2:33:33:33m[38:2:208:208:208mAfterglow                      [48:2:21:21:21m  [48:2:108:153:187m  [48:2:125:214:207m  [48:2:126:142:80m  [48:2:159:78:133m  [48:2:172:65:66m  [48:2:208:208:208m  [48:2:229:181:103m  [48:2:80:80:80m  [48:2:108:153:187m  [48:2:125:214:207m  [48:2:126:142:80m  [48:2:159:78:133m  [48:2:172:65:66m  [48:2:245:245:245m  [48:2:229:181:103m  [48:2:48:48:48m  [48:2:208:208:208m  
+[48:2:247:247:247m[38:2:0:0:0mAlabaster                      [48:2:0:0:0m  [48:2:50:92:192m  [48:2:0:131:178m  [48:2:68:140:39m  [48:2:122:62:157m  [48:2:170:55:49m  [48:2:247:247:247m  [48:2:203:144:0m  [48:2:119:119:119m  [48:2:0:122:204m  [48:2:0:170:203m  [48:2:96:203:0m  [48:2:230:76:230m  [48:2:240:80:80m  [48:2:247:247:247m  [48:2:255:188:93m  [48:2:191:219:254m  [48:2:0:122:204m  
+[48:2:15:22:16m[38:2:99:125:117mAlienBlood                     [48:2:17:38:22m  [48:2:47:106:127m  [48:2:50:127:119m  [48:2:47:126:37m  [48:2:71:88:127m  [48:2:127:43:39m  [48:2:100:125:117m  [48:2:113:127:36m  [48:2:60:72:18m  [48:2:0:170:224m  [48:2:0:224:196m  [48:2:24:224:0m  [48:2:0:88:224m  [48:2:224:128:9m  [48:2:115:250:145m  [48:2:189:224:0m  [48:2:29:65:37m  [48:2:115:250:145m  
+[48:2:38:42:51m[38:2:229:229:229mAndromeda                      [48:2:0:0:0m  [48:2:36:114:200m  [48:2:15:168:205m  [48:2:5:188:121m  [48:2:188:63:188m  [48:2:205:49:49m  [48:2:229:229:229m  [48:2:229:229:18m  [48:2:102:102:102m  [48:2:36:114:200m  [48:2:15:168:205m  [48:2:5:188:121m  [48:2:188:63:188m  [48:2:205:49:49m  [48:2:229:229:229m  [48:2:229:229:18m  [48:2:90:92:98m  [48:2:248:248:240m  
+[48:2:44:43:43m[38:2:213:162:0mApple Classic                  [48:2:0:0:0m  [48:2:2:37:199m  [48:2:0:197:199m  [48:2:0:194:0m  [48:2:202:48:199m  [48:2:201:27:0m  [48:2:199:199:199m  [48:2:199:196:0m  [48:2:104:104:104m  [48:2:104:113:255m  [48:2:96:253:255m  [48:2:95:250:104m  [48:2:255:119:255m  [48:2:255:110:103m  [48:2:255:255:255m  [48:2:255:252:103m  [48:2:107:91:2m  [48:2:199:199:199m  
+[48:2:30:30:30m[38:2:255:255:255mApple System Colors            [48:2:26:26:26m  [48:2:8:105:203m  [48:2:71:158:194m  [48:2:38:164:57m  [48:2:150:71:191m  [48:2:204:55:46m  [48:2:152:152:157m  [48:2:205:172:8m  [48:2:70:70:70m  [48:2:10:132:255m  [48:2:118:214:255m  [48:2:50:215:75m  [48:2:191:90:242m  [48:2:255:69:58m  [48:2:255:255:255m  [48:2:255:214:10m  [48:2:63:99:139m  [48:2:152:152:157m  
+[48:2:14:16:25m[38:2:255:250:244mArgonaut                       [48:2:35:35:35m  [48:2:0:141:248m  [48:2:0:216:235m  [48:2:140:225:11m  [48:2:109:67:166m  [48:2:255:0:15m  [48:2:255:255:255m  [48:2:255:185:0m  [48:2:68:68:68m  [48:2:0:146:255m  [48:2:103:255:240m  [48:2:171:225:91m  [48:2:154:95:235m  [48:2:255:39:64m  [48:2:255:255:255m  [48:2:255:210:66m  [48:2:0:42:59m  [48:2:255:0:24m  
+[48:2:28:28:28m[38:2:221:238:221mArthur                         [48:2:61:53:42m  [48:2:100:149:237m  [48:2:176:196:222m  [48:2:134:175:128m  [48:2:222:184:135m  [48:2:205:92:92m  [48:2:187:170:153m  [48:2:232:174:91m  [48:2:85:68:68m  [48:2:135:206:235m  [48:2:176:196:222m  [48:2:136:170:34m  [48:2:153:102:0m  [48:2:204:85:51m  [48:2:221:204:187m  [48:2:255:167:93m  [48:2:77:77:77m  [48:2:226:187:239m  
+[48:2:32:39:70m[38:2:151:157:180mAtelierSulphurpool             [48:2:32:39:70m  [48:2:61:143:209m  [48:2:34:162:201m  [48:2:172:151:57m  [48:2:102:121:204m  [48:2:201:73:34m  [48:2:151:157:180m  [48:2:192:139:48m  [48:2:107:115:148m  [48:2:137:142:164m  [48:2:156:99:122m  [48:2:41:50:86m  [48:2:223:226:241m  [48:2:199:107:41m  [48:2:245:247:255m  [48:2:94:102:135m  [48:2:94:102:135m  [48:2:151:157:180m  
diff --git a/cli/testdata/margintest_nogridmode.args b/cli/testdata/margintest_nogridmode.args
new file mode 100644
index 0000000..06994e8
--- /dev/null
+++ b/cli/testdata/margintest_nogridmode.args
@@ -0,0 +1 @@
+--marginsize 1.2x0.6
diff --git a/cli/testdata/margintest_nogridmode.svg b/cli/testdata/margintest_nogridmode.svg
new file mode 100644
index 0000000..03e856d
--- /dev/null
+++ b/cli/testdata/margintest_nogridmode.svg
@@ -0,0 +1,553 @@
+<svg width="69.4ch" height="16.2em" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
+    <style>
+        * {
+            font-family: Courier, monospace;
+            font-size: 14px;
+        }
+        tspan, text {
+            font-variant-ligatures: none;
+            dominant-baseline: central;
+            white-space: pre;
+            fill: #bbbbbb;
+        }
+        .bg {
+            stroke-width: "0.5px";
+        }
+        <!-- Background custom colors -->
+        .bc0 { stroke: #f7f7f7; fill: #f7f7f7; }
+        .bc1 { stroke: #090300; fill: #090300; }
+        .bc2 { stroke: #01a0e4; fill: #01a0e4; }
+        .bc3 { stroke: #b5e4f4; fill: #b5e4f4; }
+        .bc4 { stroke: #01a252; fill: #01a252; }
+        .bc5 { stroke: #a16a94; fill: #a16a94; }
+        .bc6 { stroke: #db2d20; fill: #db2d20; }
+        .bc7 { stroke: #a5a2a2; fill: #a5a2a2; }
+        .bc8 { stroke: #fded02; fill: #fded02; }
+        .bc9 { stroke: #5c5855; fill: #5c5855; }
+        .bc10 { stroke: #807d7c; fill: #807d7c; }
+        .bc11 { stroke: #cdab53; fill: #cdab53; }
+        .bc12 { stroke: #3a3432; fill: #3a3432; }
+        .bc13 { stroke: #d6d5d4; fill: #d6d5d4; }
+        .bc14 { stroke: #e8bbd0; fill: #e8bbd0; }
+        .bc15 { stroke: #4a4543; fill: #4a4543; }
+        .bc16 { stroke: #102040; fill: #102040; }
+        .bc17 { stroke: #191919; fill: #191919; }
+        .bc18 { stroke: #1370d3; fill: #1370d3; }
+        .bc19 { stroke: #008eb0; fill: #008eb0; }
+        .bc20 { stroke: #4b8c0f; fill: #4b8c0f; }
+        .bc21 { stroke: #c43ac3; fill: #c43ac3; }
+        .bc22 { stroke: #aa342e; fill: #aa342e; }
+        .bc23 { stroke: #bebebe; fill: #bebebe; }
+        .bc24 { stroke: #dbba00; fill: #dbba00; }
+        .bc25 { stroke: #454545; fill: #454545; }
+        .bc26 { stroke: #60a4ec; fill: #60a4ec; }
+        .bc27 { stroke: #60b6cb; fill: #60b6cb; }
+        .bc28 { stroke: #95dc55; fill: #95dc55; }
+        .bc29 { stroke: #e26be2; fill: #e26be2; }
+        .bc30 { stroke: #f05b50; fill: #f05b50; }
+        .bc31 { stroke: #ffe763; fill: #ffe763; }
+        .bc32 { stroke: #bfdbfe; fill: #bfdbfe; }
+        .bc33 { stroke: #007acc; fill: #007acc; }
+        .bc34 { stroke: #111416; fill: #111416; }
+        .bc35 { stroke: #1093f5; fill: #1093f5; }
+        .bc36 { stroke: #00cdcd; fill: #00cdcd; }
+        .bc37 { stroke: #00cd00; fill: #00cd00; }
+        .bc38 { stroke: #cd00cd; fill: #cd00cd; }
+        .bc39 { stroke: #cd0000; fill: #cd0000; }
+        .bc40 { stroke: #faebd7; fill: #faebd7; }
+        .bc41 { stroke: #cdcd00; fill: #cdcd00; }
+        .bc42 { stroke: #404040; fill: #404040; }
+        .bc43 { stroke: #11b5f6; fill: #11b5f6; }
+        .bc44 { stroke: #00ffff; fill: #00ffff; }
+        .bc45 { stroke: #00ff00; fill: #00ff00; }
+        .bc46 { stroke: #ff00ff; fill: #ff00ff; }
+        .bc47 { stroke: #ff0000; fill: #ff0000; }
+        .bc48 { stroke: #ffffff; fill: #ffffff; }
+        .bc49 { stroke: #ffff00; fill: #ffff00; }
+        .bc50 { stroke: #eeeeec; fill: #eeeeec; }
+        .bc51 { stroke: #bbbbbb; fill: #bbbbbb; }
+        .bc52 { stroke: #040404; fill: #040404; }
+        .bc53 { stroke: #417ab3; fill: #417ab3; }
+        .bc54 { stroke: #bdcfe5; fill: #bdcfe5; }
+        .bc55 { stroke: #5da602; fill: #5da602; }
+        .bc56 { stroke: #e5c499; fill: #e5c499; }
+        .bc57 { stroke: #d84a33; fill: #d84a33; }
+        .bc58 { stroke: #dbded8; fill: #dbded8; }
+        .bc59 { stroke: #eebb6e; fill: #eebb6e; }
+        .bc60 { stroke: #685656; fill: #685656; }
+        .bc61 { stroke: #97d7ef; fill: #97d7ef; }
+        .bc62 { stroke: #99b52c; fill: #99b52c; }
+        .bc63 { stroke: #aa7900; fill: #aa7900; }
+        .bc64 { stroke: #d76b42; fill: #d76b42; }
+        .bc65 { stroke: #e4d5c7; fill: #e4d5c7; }
+        .bc66 { stroke: #ffb670; fill: #ffb670; }
+        .bc67 { stroke: #606060; fill: #606060; }
+        .bc68 { stroke: #feffff; fill: #feffff; }
+        .bc69 { stroke: #1f1d45; fill: #1f1d45; }
+        .bc70 { stroke: #050404; fill: #050404; }
+        .bc71 { stroke: #0f4ac6; fill: #0f4ac6; }
+        .bc72 { stroke: #70a598; fill: #70a598; }
+        .bc73 { stroke: #4ab118; fill: #4ab118; }
+        .bc74 { stroke: #665993; fill: #665993; }
+        .bc75 { stroke: #bd0013; fill: #bd0013; }
+        .bc76 { stroke: #f8dcc0; fill: #f8dcc0; }
+        .bc77 { stroke: #e7741e; fill: #e7741e; }
+        .bc78 { stroke: #4e7cbf; fill: #4e7cbf; }
+        .bc79 { stroke: #1997c6; fill: #1997c6; }
+        .bc80 { stroke: #c8faf4; fill: #c8faf4; }
+        .bc81 { stroke: #9eff6e; fill: #9eff6e; }
+        .bc82 { stroke: #9b5953; fill: #9b5953; }
+        .bc83 { stroke: #fc5f5a; fill: #fc5f5a; }
+        .bc84 { stroke: #f6f5fb; fill: #f6f5fb; }
+        .bc85 { stroke: #efc11a; fill: #efc11a; }
+        .bc86 { stroke: #706b4e; fill: #706b4e; }
+        .bc87 { stroke: #efbf38; fill: #efbf38; }
+        .bc88 { stroke: #212121; fill: #212121; }
+        .bc89 { stroke: #151515; fill: #151515; }
+        .bc90 { stroke: #6c99bb; fill: #6c99bb; }
+        .bc91 { stroke: #7dd6cf; fill: #7dd6cf; }
+        .bc92 { stroke: #7e8e50; fill: #7e8e50; }
+        .bc93 { stroke: #9f4e85; fill: #9f4e85; }
+        .bc94 { stroke: #ac4142; fill: #ac4142; }
+        .bc95 { stroke: #d0d0d0; fill: #d0d0d0; }
+        .bc96 { stroke: #e5b567; fill: #e5b567; }
+        .bc97 { stroke: #505050; fill: #505050; }
+        .bc98 { stroke: #f5f5f5; fill: #f5f5f5; }
+        .bc99 { stroke: #303030; fill: #303030; }
+        .bc100 { stroke: #325cc0; fill: #325cc0; }
+        .bc101 { stroke: #0083b2; fill: #0083b2; }
+        .bc102 { stroke: #448c27; fill: #448c27; }
+        .bc103 { stroke: #7a3e9d; fill: #7a3e9d; }
+        .bc104 { stroke: #aa3731; fill: #aa3731; }
+        .bc105 { stroke: #cb9000; fill: #cb9000; }
+        .bc106 { stroke: #777777; fill: #777777; }
+        .bc107 { stroke: #00aacb; fill: #00aacb; }
+        .bc108 { stroke: #60cb00; fill: #60cb00; }
+        .bc109 { stroke: #e64ce6; fill: #e64ce6; }
+        .bc110 { stroke: #f05050; fill: #f05050; }
+        .bc111 { stroke: #ffbc5d; fill: #ffbc5d; }
+        .bc112 { stroke: #0f1610; fill: #0f1610; }
+        .bc113 { stroke: #112616; fill: #112616; }
+        .bc114 { stroke: #2f6a7f; fill: #2f6a7f; }
+        .bc115 { stroke: #327f77; fill: #327f77; }
+        .bc116 { stroke: #2f7e25; fill: #2f7e25; }
+        .bc117 { stroke: #47587f; fill: #47587f; }
+        .bc118 { stroke: #7f2b27; fill: #7f2b27; }
+        .bc119 { stroke: #647d75; fill: #647d75; }
+        .bc120 { stroke: #717f24; fill: #717f24; }
+        .bc121 { stroke: #3c4812; fill: #3c4812; }
+        .bc122 { stroke: #00aae0; fill: #00aae0; }
+        .bc123 { stroke: #00e0c4; fill: #00e0c4; }
+        .bc124 { stroke: #18e000; fill: #18e000; }
+        .bc125 { stroke: #0058e0; fill: #0058e0; }
+        .bc126 { stroke: #e08009; fill: #e08009; }
+        .bc127 { stroke: #73fa91; fill: #73fa91; }
+        .bc128 { stroke: #bde000; fill: #bde000; }
+        .bc129 { stroke: #1d4125; fill: #1d4125; }
+        .bc130 { stroke: #262a33; fill: #262a33; }
+        .bc131 { stroke: #2472c8; fill: #2472c8; }
+        .bc132 { stroke: #0fa8cd; fill: #0fa8cd; }
+        .bc133 { stroke: #05bc79; fill: #05bc79; }
+        .bc134 { stroke: #bc3fbc; fill: #bc3fbc; }
+        .bc135 { stroke: #cd3131; fill: #cd3131; }
+        .bc136 { stroke: #e5e5e5; fill: #e5e5e5; }
+        .bc137 { stroke: #e5e512; fill: #e5e512; }
+        .bc138 { stroke: #666666; fill: #666666; }
+        .bc139 { stroke: #5a5c62; fill: #5a5c62; }
+        .bc140 { stroke: #f8f8f0; fill: #f8f8f0; }
+        .bc141 { stroke: #2c2b2b; fill: #2c2b2b; }
+        .bc142 { stroke: #0225c7; fill: #0225c7; }
+        .bc143 { stroke: #00c5c7; fill: #00c5c7; }
+        .bc144 { stroke: #00c200; fill: #00c200; }
+        .bc145 { stroke: #ca30c7; fill: #ca30c7; }
+        .bc146 { stroke: #c91b00; fill: #c91b00; }
+        .bc147 { stroke: #c7c7c7; fill: #c7c7c7; }
+        .bc148 { stroke: #c7c400; fill: #c7c400; }
+        .bc149 { stroke: #686868; fill: #686868; }
+        .bc150 { stroke: #6871ff; fill: #6871ff; }
+        .bc151 { stroke: #60fdff; fill: #60fdff; }
+        .bc152 { stroke: #5ffa68; fill: #5ffa68; }
+        .bc153 { stroke: #ff77ff; fill: #ff77ff; }
+        .bc154 { stroke: #ff6e67; fill: #ff6e67; }
+        .bc155 { stroke: #fffc67; fill: #fffc67; }
+        .bc156 { stroke: #6b5b02; fill: #6b5b02; }
+        .bc157 { stroke: #1e1e1e; fill: #1e1e1e; }
+        .bc158 { stroke: #1a1a1a; fill: #1a1a1a; }
+        .bc159 { stroke: #0869cb; fill: #0869cb; }
+        .bc160 { stroke: #479ec2; fill: #479ec2; }
+        .bc161 { stroke: #26a439; fill: #26a439; }
+        .bc162 { stroke: #9647bf; fill: #9647bf; }
+        .bc163 { stroke: #cc372e; fill: #cc372e; }
+        .bc164 { stroke: #98989d; fill: #98989d; }
+        .bc165 { stroke: #cdac08; fill: #cdac08; }
+        .bc166 { stroke: #464646; fill: #464646; }
+        .bc167 { stroke: #0a84ff; fill: #0a84ff; }
+        .bc168 { stroke: #76d6ff; fill: #76d6ff; }
+        .bc169 { stroke: #32d74b; fill: #32d74b; }
+        .bc170 { stroke: #bf5af2; fill: #bf5af2; }
+        .bc171 { stroke: #ff453a; fill: #ff453a; }
+        .bc172 { stroke: #ffd60a; fill: #ffd60a; }
+        .bc173 { stroke: #3f638b; fill: #3f638b; }
+        .bc174 { stroke: #0e1019; fill: #0e1019; }
+        .bc175 { stroke: #232323; fill: #232323; }
+        .bc176 { stroke: #008df8; fill: #008df8; }
+        .bc177 { stroke: #00d8eb; fill: #00d8eb; }
+        .bc178 { stroke: #8ce10b; fill: #8ce10b; }
+        .bc179 { stroke: #6d43a6; fill: #6d43a6; }
+        .bc180 { stroke: #ff000f; fill: #ff000f; }
+        .bc181 { stroke: #ffb900; fill: #ffb900; }
+        .bc182 { stroke: #444444; fill: #444444; }
+        .bc183 { stroke: #0092ff; fill: #0092ff; }
+        .bc184 { stroke: #67fff0; fill: #67fff0; }
+        .bc185 { stroke: #abe15b; fill: #abe15b; }
+        .bc186 { stroke: #9a5feb; fill: #9a5feb; }
+        .bc187 { stroke: #ff2740; fill: #ff2740; }
+        .bc188 { stroke: #ffd242; fill: #ffd242; }
+        .bc189 { stroke: #002a3b; fill: #002a3b; }
+        .bc190 { stroke: #ff0018; fill: #ff0018; }
+        .bc191 { stroke: #1c1c1c; fill: #1c1c1c; }
+        .bc192 { stroke: #3d352a; fill: #3d352a; }
+        .bc193 { stroke: #6495ed; fill: #6495ed; }
+        .bc194 { stroke: #b0c4de; fill: #b0c4de; }
+        .bc195 { stroke: #86af80; fill: #86af80; }
+        .bc196 { stroke: #deb887; fill: #deb887; }
+        .bc197 { stroke: #cd5c5c; fill: #cd5c5c; }
+        .bc198 { stroke: #bbaa99; fill: #bbaa99; }
+        .bc199 { stroke: #e8ae5b; fill: #e8ae5b; }
+        .bc200 { stroke: #554444; fill: #554444; }
+        .bc201 { stroke: #87ceeb; fill: #87ceeb; }
+        .bc202 { stroke: #88aa22; fill: #88aa22; }
+        .bc203 { stroke: #996600; fill: #996600; }
+        .bc204 { stroke: #cc5533; fill: #cc5533; }
+        .bc205 { stroke: #ddccbb; fill: #ddccbb; }
+        .bc206 { stroke: #ffa75d; fill: #ffa75d; }
+        .bc207 { stroke: #4d4d4d; fill: #4d4d4d; }
+        .bc208 { stroke: #e2bbef; fill: #e2bbef; }
+        .bc209 { stroke: #202746; fill: #202746; }
+        .bc210 { stroke: #3d8fd1; fill: #3d8fd1; }
+        .bc211 { stroke: #22a2c9; fill: #22a2c9; }
+        .bc212 { stroke: #ac9739; fill: #ac9739; }
+        .bc213 { stroke: #6679cc; fill: #6679cc; }
+        .bc214 { stroke: #c94922; fill: #c94922; }
+        .bc215 { stroke: #979db4; fill: #979db4; }
+        .bc216 { stroke: #c08b30; fill: #c08b30; }
+        .bc217 { stroke: #6b7394; fill: #6b7394; }
+        .bc218 { stroke: #898ea4; fill: #898ea4; }
+        .bc219 { stroke: #9c637a; fill: #9c637a; }
+        .bc220 { stroke: #293256; fill: #293256; }
+        .bc221 { stroke: #dfe2f1; fill: #dfe2f1; }
+        .bc222 { stroke: #c76b29; fill: #c76b29; }
+        .bc223 { stroke: #f5f7ff; fill: #f5f7ff; }
+        .bc224 { stroke: #5e6687; fill: #5e6687; }
+        <!-- Foreground custom colors -->
+        .fc0 { fill: #4a4543; }
+        .fc1 { fill: #a5a2a2; }
+        .fc2 { fill: #dddddd; }
+        .fc3 { fill: #eeeeec; }
+        .fc4 { fill: #feffff; }
+        .fc5 { fill: #f8dcc0; }
+        .fc6 { fill: #d0d0d0; }
+        .fc7 { fill: #000000; }
+        .fc8 { fill: #637d75; }
+        .fc9 { fill: #e5e5e5; }
+        .fc10 { fill: #d5a200; }
+        .fc11 { fill: #ffffff; }
+        .fc12 { fill: #fffaf4; }
+        .fc13 { fill: #ddeedd; }
+        .fc14 { fill: #979db4; }
+    </style>
+    <rect width="100%" height="100%" x="0" y="0" style="fill: #000000"/>
+<g class="bg">
+<rect x="1.2ch" y="0.6em" width="31ch" height="1em" class="bc0"/>
+<rect x="32.2ch" y="0.6em" width="2ch" height="1em" class="bc1"/>
+<rect x="34.2ch" y="0.6em" width="2ch" height="1em" class="bc2"/>
+<rect x="36.2ch" y="0.6em" width="2ch" height="1em" class="bc3"/>
+<rect x="38.2ch" y="0.6em" width="2ch" height="1em" class="bc4"/>
+<rect x="40.2ch" y="0.6em" width="2ch" height="1em" class="bc5"/>
+<rect x="42.2ch" y="0.6em" width="2ch" height="1em" class="bc6"/>
+<rect x="44.2ch" y="0.6em" width="2ch" height="1em" class="bc7"/>
+<rect x="46.2ch" y="0.6em" width="2ch" height="1em" class="bc8"/>
+<rect x="48.2ch" y="0.6em" width="2ch" height="1em" class="bc9"/>
+<rect x="50.2ch" y="0.6em" width="2ch" height="1em" class="bc10"/>
+<rect x="52.2ch" y="0.6em" width="2ch" height="1em" class="bc11"/>
+<rect x="54.2ch" y="0.6em" width="2ch" height="1em" class="bc12"/>
+<rect x="56.2ch" y="0.6em" width="2ch" height="1em" class="bc13"/>
+<rect x="58.2ch" y="0.6em" width="2ch" height="1em" class="bc14"/>
+<rect x="60.2ch" y="0.6em" width="2ch" height="1em" class="bc0"/>
+<rect x="62.2ch" y="0.6em" width="2ch" height="1em" class="bc15"/>
+<rect x="64.2ch" y="0.6em" width="2ch" height="1em" class="bc7"/>
+<rect x="66.2ch" y="0.6em" width="2ch" height="1em" class="bc15"/>
+<rect x="1.2ch" y="1.6em" width="33ch" height="1em" class="bc1"/>
+<rect x="34.2ch" y="1.6em" width="2ch" height="1em" class="bc2"/>
+<rect x="36.2ch" y="1.6em" width="2ch" height="1em" class="bc3"/>
+<rect x="38.2ch" y="1.6em" width="2ch" height="1em" class="bc4"/>
+<rect x="40.2ch" y="1.6em" width="2ch" height="1em" class="bc5"/>
+<rect x="42.2ch" y="1.6em" width="2ch" height="1em" class="bc6"/>
+<rect x="44.2ch" y="1.6em" width="2ch" height="1em" class="bc7"/>
+<rect x="46.2ch" y="1.6em" width="2ch" height="1em" class="bc8"/>
+<rect x="48.2ch" y="1.6em" width="2ch" height="1em" class="bc9"/>
+<rect x="50.2ch" y="1.6em" width="2ch" height="1em" class="bc10"/>
+<rect x="52.2ch" y="1.6em" width="2ch" height="1em" class="bc11"/>
+<rect x="54.2ch" y="1.6em" width="2ch" height="1em" class="bc12"/>
+<rect x="56.2ch" y="1.6em" width="2ch" height="1em" class="bc13"/>
+<rect x="58.2ch" y="1.6em" width="2ch" height="1em" class="bc14"/>
+<rect x="60.2ch" y="1.6em" width="2ch" height="1em" class="bc0"/>
+<rect x="62.2ch" y="1.6em" width="4ch" height="1em" class="bc15"/>
+<rect x="66.2ch" y="1.6em" width="2ch" height="1em" class="bc7"/>
+<rect x="1.2ch" y="2.6em" width="31ch" height="1em" class="bc16"/>
+<rect x="32.2ch" y="2.6em" width="2ch" height="1em" class="bc17"/>
+<rect x="34.2ch" y="2.6em" width="2ch" height="1em" class="bc18"/>
+<rect x="36.2ch" y="2.6em" width="2ch" height="1em" class="bc19"/>
+<rect x="38.2ch" y="2.6em" width="2ch" height="1em" class="bc20"/>
+<rect x="40.2ch" y="2.6em" width="2ch" height="1em" class="bc21"/>
+<rect x="42.2ch" y="2.6em" width="2ch" height="1em" class="bc22"/>
+<rect x="44.2ch" y="2.6em" width="2ch" height="1em" class="bc23"/>
+<rect x="46.2ch" y="2.6em" width="2ch" height="1em" class="bc24"/>
+<rect x="48.2ch" y="2.6em" width="2ch" height="1em" class="bc25"/>
+<rect x="50.2ch" y="2.6em" width="2ch" height="1em" class="bc26"/>
+<rect x="52.2ch" y="2.6em" width="2ch" height="1em" class="bc27"/>
+<rect x="54.2ch" y="2.6em" width="2ch" height="1em" class="bc28"/>
+<rect x="56.2ch" y="2.6em" width="2ch" height="1em" class="bc29"/>
+<rect x="58.2ch" y="2.6em" width="2ch" height="1em" class="bc30"/>
+<rect x="60.2ch" y="2.6em" width="2ch" height="1em" class="bc0"/>
+<rect x="62.2ch" y="2.6em" width="2ch" height="1em" class="bc31"/>
+<rect x="64.2ch" y="2.6em" width="2ch" height="1em" class="bc32"/>
+<rect x="66.2ch" y="2.6em" width="2ch" height="1em" class="bc33"/>
+<rect x="1.2ch" y="3.6em" width="31ch" height="1em" class="bc34"/>
+<rect x="34.2ch" y="3.6em" width="2ch" height="1em" class="bc35"/>
+<rect x="36.2ch" y="3.6em" width="2ch" height="1em" class="bc36"/>
+<rect x="38.2ch" y="3.6em" width="2ch" height="1em" class="bc37"/>
+<rect x="40.2ch" y="3.6em" width="2ch" height="1em" class="bc38"/>
+<rect x="42.2ch" y="3.6em" width="2ch" height="1em" class="bc39"/>
+<rect x="44.2ch" y="3.6em" width="2ch" height="1em" class="bc40"/>
+<rect x="46.2ch" y="3.6em" width="2ch" height="1em" class="bc41"/>
+<rect x="48.2ch" y="3.6em" width="2ch" height="1em" class="bc42"/>
+<rect x="50.2ch" y="3.6em" width="2ch" height="1em" class="bc43"/>
+<rect x="52.2ch" y="3.6em" width="2ch" height="1em" class="bc44"/>
+<rect x="54.2ch" y="3.6em" width="2ch" height="1em" class="bc45"/>
+<rect x="56.2ch" y="3.6em" width="2ch" height="1em" class="bc46"/>
+<rect x="58.2ch" y="3.6em" width="2ch" height="1em" class="bc47"/>
+<rect x="60.2ch" y="3.6em" width="2ch" height="1em" class="bc48"/>
+<rect x="62.2ch" y="3.6em" width="2ch" height="1em" class="bc49"/>
+<rect x="64.2ch" y="3.6em" width="2ch" height="1em" class="bc50"/>
+<rect x="66.2ch" y="3.6em" width="2ch" height="1em" class="bc51"/>
+<rect x="1.2ch" y="4.6em" width="33ch" height="1em" class="bc52"/>
+<rect x="34.2ch" y="4.6em" width="2ch" height="1em" class="bc53"/>
+<rect x="36.2ch" y="4.6em" width="2ch" height="1em" class="bc54"/>
+<rect x="38.2ch" y="4.6em" width="2ch" height="1em" class="bc55"/>
+<rect x="40.2ch" y="4.6em" width="2ch" height="1em" class="bc56"/>
+<rect x="42.2ch" y="4.6em" width="2ch" height="1em" class="bc57"/>
+<rect x="44.2ch" y="4.6em" width="2ch" height="1em" class="bc58"/>
+<rect x="46.2ch" y="4.6em" width="2ch" height="1em" class="bc59"/>
+<rect x="48.2ch" y="4.6em" width="2ch" height="1em" class="bc60"/>
+<rect x="50.2ch" y="4.6em" width="2ch" height="1em" class="bc61"/>
+<rect x="52.2ch" y="4.6em" width="2ch" height="1em" class="bc54"/>
+<rect x="54.2ch" y="4.6em" width="2ch" height="1em" class="bc62"/>
+<rect x="56.2ch" y="4.6em" width="2ch" height="1em" class="bc63"/>
+<rect x="58.2ch" y="4.6em" width="2ch" height="1em" class="bc64"/>
+<rect x="60.2ch" y="4.6em" width="2ch" height="1em" class="bc65"/>
+<rect x="62.2ch" y="4.6em" width="2ch" height="1em" class="bc66"/>
+<rect x="64.2ch" y="4.6em" width="2ch" height="1em" class="bc67"/>
+<rect x="66.2ch" y="4.6em" width="2ch" height="1em" class="bc68"/>
+<rect x="1.2ch" y="5.6em" width="31ch" height="1em" class="bc69"/>
+<rect x="32.2ch" y="5.6em" width="2ch" height="1em" class="bc70"/>
+<rect x="34.2ch" y="5.6em" width="2ch" height="1em" class="bc71"/>
+<rect x="36.2ch" y="5.6em" width="2ch" height="1em" class="bc72"/>
+<rect x="38.2ch" y="5.6em" width="2ch" height="1em" class="bc73"/>
+<rect x="40.2ch" y="5.6em" width="2ch" height="1em" class="bc74"/>
+<rect x="42.2ch" y="5.6em" width="2ch" height="1em" class="bc75"/>
+<rect x="44.2ch" y="5.6em" width="2ch" height="1em" class="bc76"/>
+<rect x="46.2ch" y="5.6em" width="2ch" height="1em" class="bc77"/>
+<rect x="48.2ch" y="5.6em" width="2ch" height="1em" class="bc78"/>
+<rect x="50.2ch" y="5.6em" width="2ch" height="1em" class="bc79"/>
+<rect x="52.2ch" y="5.6em" width="2ch" height="1em" class="bc80"/>
+<rect x="54.2ch" y="5.6em" width="2ch" height="1em" class="bc81"/>
+<rect x="56.2ch" y="5.6em" width="2ch" height="1em" class="bc82"/>
+<rect x="58.2ch" y="5.6em" width="2ch" height="1em" class="bc83"/>
+<rect x="60.2ch" y="5.6em" width="2ch" height="1em" class="bc84"/>
+<rect x="62.2ch" y="5.6em" width="2ch" height="1em" class="bc85"/>
+<rect x="64.2ch" y="5.6em" width="2ch" height="1em" class="bc86"/>
+<rect x="66.2ch" y="5.6em" width="2ch" height="1em" class="bc87"/>
+<rect x="1.2ch" y="6.6em" width="31ch" height="1em" class="bc88"/>
+<rect x="32.2ch" y="6.6em" width="2ch" height="1em" class="bc89"/>
+<rect x="34.2ch" y="6.6em" width="2ch" height="1em" class="bc90"/>
+<rect x="36.2ch" y="6.6em" width="2ch" height="1em" class="bc91"/>
+<rect x="38.2ch" y="6.6em" width="2ch" height="1em" class="bc92"/>
+<rect x="40.2ch" y="6.6em" width="2ch" height="1em" class="bc93"/>
+<rect x="42.2ch" y="6.6em" width="2ch" height="1em" class="bc94"/>
+<rect x="44.2ch" y="6.6em" width="2ch" height="1em" class="bc95"/>
+<rect x="46.2ch" y="6.6em" width="2ch" height="1em" class="bc96"/>
+<rect x="48.2ch" y="6.6em" width="2ch" height="1em" class="bc97"/>
+<rect x="50.2ch" y="6.6em" width="2ch" height="1em" class="bc90"/>
+<rect x="52.2ch" y="6.6em" width="2ch" height="1em" class="bc91"/>
+<rect x="54.2ch" y="6.6em" width="2ch" height="1em" class="bc92"/>
+<rect x="56.2ch" y="6.6em" width="2ch" height="1em" class="bc93"/>
+<rect x="58.2ch" y="6.6em" width="2ch" height="1em" class="bc94"/>
+<rect x="60.2ch" y="6.6em" width="2ch" height="1em" class="bc98"/>
+<rect x="62.2ch" y="6.6em" width="2ch" height="1em" class="bc96"/>
+<rect x="64.2ch" y="6.6em" width="2ch" height="1em" class="bc99"/>
+<rect x="66.2ch" y="6.6em" width="2ch" height="1em" class="bc95"/>
+<rect x="1.2ch" y="7.6em" width="31ch" height="1em" class="bc0"/>
+<rect x="34.2ch" y="7.6em" width="2ch" height="1em" class="bc100"/>
+<rect x="36.2ch" y="7.6em" width="2ch" height="1em" class="bc101"/>
+<rect x="38.2ch" y="7.6em" width="2ch" height="1em" class="bc102"/>
+<rect x="40.2ch" y="7.6em" width="2ch" height="1em" class="bc103"/>
+<rect x="42.2ch" y="7.6em" width="2ch" height="1em" class="bc104"/>
+<rect x="44.2ch" y="7.6em" width="2ch" height="1em" class="bc0"/>
+<rect x="46.2ch" y="7.6em" width="2ch" height="1em" class="bc105"/>
+<rect x="48.2ch" y="7.6em" width="2ch" height="1em" class="bc106"/>
+<rect x="50.2ch" y="7.6em" width="2ch" height="1em" class="bc33"/>
+<rect x="52.2ch" y="7.6em" width="2ch" height="1em" class="bc107"/>
+<rect x="54.2ch" y="7.6em" width="2ch" height="1em" class="bc108"/>
+<rect x="56.2ch" y="7.6em" width="2ch" height="1em" class="bc109"/>
+<rect x="58.2ch" y="7.6em" width="2ch" height="1em" class="bc110"/>
+<rect x="60.2ch" y="7.6em" width="2ch" height="1em" class="bc0"/>
+<rect x="62.2ch" y="7.6em" width="2ch" height="1em" class="bc111"/>
+<rect x="64.2ch" y="7.6em" width="2ch" height="1em" class="bc32"/>
+<rect x="66.2ch" y="7.6em" width="2ch" height="1em" class="bc33"/>
+<rect x="1.2ch" y="8.6em" width="31ch" height="1em" class="bc112"/>
+<rect x="32.2ch" y="8.6em" width="2ch" height="1em" class="bc113"/>
+<rect x="34.2ch" y="8.6em" width="2ch" height="1em" class="bc114"/>
+<rect x="36.2ch" y="8.6em" width="2ch" height="1em" class="bc115"/>
+<rect x="38.2ch" y="8.6em" width="2ch" height="1em" class="bc116"/>
+<rect x="40.2ch" y="8.6em" width="2ch" height="1em" class="bc117"/>
+<rect x="42.2ch" y="8.6em" width="2ch" height="1em" class="bc118"/>
+<rect x="44.2ch" y="8.6em" width="2ch" height="1em" class="bc119"/>
+<rect x="46.2ch" y="8.6em" width="2ch" height="1em" class="bc120"/>
+<rect x="48.2ch" y="8.6em" width="2ch" height="1em" class="bc121"/>
+<rect x="50.2ch" y="8.6em" width="2ch" height="1em" class="bc122"/>
+<rect x="52.2ch" y="8.6em" width="2ch" height="1em" class="bc123"/>
+<rect x="54.2ch" y="8.6em" width="2ch" height="1em" class="bc124"/>
+<rect x="56.2ch" y="8.6em" width="2ch" height="1em" class="bc125"/>
+<rect x="58.2ch" y="8.6em" width="2ch" height="1em" class="bc126"/>
+<rect x="60.2ch" y="8.6em" width="2ch" height="1em" class="bc127"/>
+<rect x="62.2ch" y="8.6em" width="2ch" height="1em" class="bc128"/>
+<rect x="64.2ch" y="8.6em" width="2ch" height="1em" class="bc129"/>
+<rect x="66.2ch" y="8.6em" width="2ch" height="1em" class="bc127"/>
+<rect x="1.2ch" y="9.6em" width="31ch" height="1em" class="bc130"/>
+<rect x="34.2ch" y="9.6em" width="2ch" height="1em" class="bc131"/>
+<rect x="36.2ch" y="9.6em" width="2ch" height="1em" class="bc132"/>
+<rect x="38.2ch" y="9.6em" width="2ch" height="1em" class="bc133"/>
+<rect x="40.2ch" y="9.6em" width="2ch" height="1em" class="bc134"/>
+<rect x="42.2ch" y="9.6em" width="2ch" height="1em" class="bc135"/>
+<rect x="44.2ch" y="9.6em" width="2ch" height="1em" class="bc136"/>
+<rect x="46.2ch" y="9.6em" width="2ch" height="1em" class="bc137"/>
+<rect x="48.2ch" y="9.6em" width="2ch" height="1em" class="bc138"/>
+<rect x="50.2ch" y="9.6em" width="2ch" height="1em" class="bc131"/>
+<rect x="52.2ch" y="9.6em" width="2ch" height="1em" class="bc132"/>
+<rect x="54.2ch" y="9.6em" width="2ch" height="1em" class="bc133"/>
+<rect x="56.2ch" y="9.6em" width="2ch" height="1em" class="bc134"/>
+<rect x="58.2ch" y="9.6em" width="2ch" height="1em" class="bc135"/>
+<rect x="60.2ch" y="9.6em" width="2ch" height="1em" class="bc136"/>
+<rect x="62.2ch" y="9.6em" width="2ch" height="1em" class="bc137"/>
+<rect x="64.2ch" y="9.6em" width="2ch" height="1em" class="bc139"/>
+<rect x="66.2ch" y="9.6em" width="2ch" height="1em" class="bc140"/>
+<rect x="1.2ch" y="10.6em" width="31ch" height="1em" class="bc141"/>
+<rect x="34.2ch" y="10.6em" width="2ch" height="1em" class="bc142"/>
+<rect x="36.2ch" y="10.6em" width="2ch" height="1em" class="bc143"/>
+<rect x="38.2ch" y="10.6em" width="2ch" height="1em" class="bc144"/>
+<rect x="40.2ch" y="10.6em" width="2ch" height="1em" class="bc145"/>
+<rect x="42.2ch" y="10.6em" width="2ch" height="1em" class="bc146"/>
+<rect x="44.2ch" y="10.6em" width="2ch" height="1em" class="bc147"/>
+<rect x="46.2ch" y="10.6em" width="2ch" height="1em" class="bc148"/>
+<rect x="48.2ch" y="10.6em" width="2ch" height="1em" class="bc149"/>
+<rect x="50.2ch" y="10.6em" width="2ch" height="1em" class="bc150"/>
+<rect x="52.2ch" y="10.6em" width="2ch" height="1em" class="bc151"/>
+<rect x="54.2ch" y="10.6em" width="2ch" height="1em" class="bc152"/>
+<rect x="56.2ch" y="10.6em" width="2ch" height="1em" class="bc153"/>
+<rect x="58.2ch" y="10.6em" width="2ch" height="1em" class="bc154"/>
+<rect x="60.2ch" y="10.6em" width="2ch" height="1em" class="bc48"/>
+<rect x="62.2ch" y="10.6em" width="2ch" height="1em" class="bc155"/>
+<rect x="64.2ch" y="10.6em" width="2ch" height="1em" class="bc156"/>
+<rect x="66.2ch" y="10.6em" width="2ch" height="1em" class="bc147"/>
+<rect x="1.2ch" y="11.6em" width="31ch" height="1em" class="bc157"/>
+<rect x="32.2ch" y="11.6em" width="2ch" height="1em" class="bc158"/>
+<rect x="34.2ch" y="11.6em" width="2ch" height="1em" class="bc159"/>
+<rect x="36.2ch" y="11.6em" width="2ch" height="1em" class="bc160"/>
+<rect x="38.2ch" y="11.6em" width="2ch" height="1em" class="bc161"/>
+<rect x="40.2ch" y="11.6em" width="2ch" height="1em" class="bc162"/>
+<rect x="42.2ch" y="11.6em" width="2ch" height="1em" class="bc163"/>
+<rect x="44.2ch" y="11.6em" width="2ch" height="1em" class="bc164"/>
+<rect x="46.2ch" y="11.6em" width="2ch" height="1em" class="bc165"/>
+<rect x="48.2ch" y="11.6em" width="2ch" height="1em" class="bc166"/>
+<rect x="50.2ch" y="11.6em" width="2ch" height="1em" class="bc167"/>
+<rect x="52.2ch" y="11.6em" width="2ch" height="1em" class="bc168"/>
+<rect x="54.2ch" y="11.6em" width="2ch" height="1em" class="bc169"/>
+<rect x="56.2ch" y="11.6em" width="2ch" height="1em" class="bc170"/>
+<rect x="58.2ch" y="11.6em" width="2ch" height="1em" class="bc171"/>
+<rect x="60.2ch" y="11.6em" width="2ch" height="1em" class="bc48"/>
+<rect x="62.2ch" y="11.6em" width="2ch" height="1em" class="bc172"/>
+<rect x="64.2ch" y="11.6em" width="2ch" height="1em" class="bc173"/>
+<rect x="66.2ch" y="11.6em" width="2ch" height="1em" class="bc164"/>
+<rect x="1.2ch" y="12.6em" width="31ch" height="1em" class="bc174"/>
+<rect x="32.2ch" y="12.6em" width="2ch" height="1em" class="bc175"/>
+<rect x="34.2ch" y="12.6em" width="2ch" height="1em" class="bc176"/>
+<rect x="36.2ch" y="12.6em" width="2ch" height="1em" class="bc177"/>
+<rect x="38.2ch" y="12.6em" width="2ch" height="1em" class="bc178"/>
+<rect x="40.2ch" y="12.6em" width="2ch" height="1em" class="bc179"/>
+<rect x="42.2ch" y="12.6em" width="2ch" height="1em" class="bc180"/>
+<rect x="44.2ch" y="12.6em" width="2ch" height="1em" class="bc48"/>
+<rect x="46.2ch" y="12.6em" width="2ch" height="1em" class="bc181"/>
+<rect x="48.2ch" y="12.6em" width="2ch" height="1em" class="bc182"/>
+<rect x="50.2ch" y="12.6em" width="2ch" height="1em" class="bc183"/>
+<rect x="52.2ch" y="12.6em" width="2ch" height="1em" class="bc184"/>
+<rect x="54.2ch" y="12.6em" width="2ch" height="1em" class="bc185"/>
+<rect x="56.2ch" y="12.6em" width="2ch" height="1em" class="bc186"/>
+<rect x="58.2ch" y="12.6em" width="2ch" height="1em" class="bc187"/>
+<rect x="60.2ch" y="12.6em" width="2ch" height="1em" class="bc48"/>
+<rect x="62.2ch" y="12.6em" width="2ch" height="1em" class="bc188"/>
+<rect x="64.2ch" y="12.6em" width="2ch" height="1em" class="bc189"/>
+<rect x="66.2ch" y="12.6em" width="2ch" height="1em" class="bc190"/>
+<rect x="1.2ch" y="13.6em" width="31ch" height="1em" class="bc191"/>
+<rect x="32.2ch" y="13.6em" width="2ch" height="1em" class="bc192"/>
+<rect x="34.2ch" y="13.6em" width="2ch" height="1em" class="bc193"/>
+<rect x="36.2ch" y="13.6em" width="2ch" height="1em" class="bc194"/>
+<rect x="38.2ch" y="13.6em" width="2ch" height="1em" class="bc195"/>
+<rect x="40.2ch" y="13.6em" width="2ch" height="1em" class="bc196"/>
+<rect x="42.2ch" y="13.6em" width="2ch" height="1em" class="bc197"/>
+<rect x="44.2ch" y="13.6em" width="2ch" height="1em" class="bc198"/>
+<rect x="46.2ch" y="13.6em" width="2ch" height="1em" class="bc199"/>
+<rect x="48.2ch" y="13.6em" width="2ch" height="1em" class="bc200"/>
+<rect x="50.2ch" y="13.6em" width="2ch" height="1em" class="bc201"/>
+<rect x="52.2ch" y="13.6em" width="2ch" height="1em" class="bc194"/>
+<rect x="54.2ch" y="13.6em" width="2ch" height="1em" class="bc202"/>
+<rect x="56.2ch" y="13.6em" width="2ch" height="1em" class="bc203"/>
+<rect x="58.2ch" y="13.6em" width="2ch" height="1em" class="bc204"/>
+<rect x="60.2ch" y="13.6em" width="2ch" height="1em" class="bc205"/>
+<rect x="62.2ch" y="13.6em" width="2ch" height="1em" class="bc206"/>
+<rect x="64.2ch" y="13.6em" width="2ch" height="1em" class="bc207"/>
+<rect x="66.2ch" y="13.6em" width="2ch" height="1em" class="bc208"/>
+<rect x="1.2ch" y="14.6em" width="33ch" height="1em" class="bc209"/>
+<rect x="34.2ch" y="14.6em" width="2ch" height="1em" class="bc210"/>
+<rect x="36.2ch" y="14.6em" width="2ch" height="1em" class="bc211"/>
+<rect x="38.2ch" y="14.6em" width="2ch" height="1em" class="bc212"/>
+<rect x="40.2ch" y="14.6em" width="2ch" height="1em" class="bc213"/>
+<rect x="42.2ch" y="14.6em" width="2ch" height="1em" class="bc214"/>
+<rect x="44.2ch" y="14.6em" width="2ch" height="1em" class="bc215"/>
+<rect x="46.2ch" y="14.6em" width="2ch" height="1em" class="bc216"/>
+<rect x="48.2ch" y="14.6em" width="2ch" height="1em" class="bc217"/>
+<rect x="50.2ch" y="14.6em" width="2ch" height="1em" class="bc218"/>
+<rect x="52.2ch" y="14.6em" width="2ch" height="1em" class="bc219"/>
+<rect x="54.2ch" y="14.6em" width="2ch" height="1em" class="bc220"/>
+<rect x="56.2ch" y="14.6em" width="2ch" height="1em" class="bc221"/>
+<rect x="58.2ch" y="14.6em" width="2ch" height="1em" class="bc222"/>
+<rect x="60.2ch" y="14.6em" width="2ch" height="1em" class="bc223"/>
+<rect x="62.2ch" y="14.6em" width="4ch" height="1em" class="bc224"/>
+<rect x="66.2ch" y="14.6em" width="2ch" height="1em" class="bc215"/>
+</g>
+<text x="1.2ch" y="1.1em"><tspan class="fc0">3024 Day                                                           </tspan></text>
+<text x="1.2ch" y="2.1em"><tspan class="fc1">3024 Night                                                         </tspan></text>
+<text x="1.2ch" y="3.1em"><tspan class="fc2">Aardvark Blue                                                      </tspan></text>
+<text x="1.2ch" y="4.1em"><tspan class="fc3">Abernathy                                                          </tspan></text>
+<text x="1.2ch" y="5.1em"><tspan class="fc4">Adventure                                                          </tspan></text>
+<text x="1.2ch" y="6.1em"><tspan class="fc5">AdventureTime                                                      </tspan></text>
+<text x="1.2ch" y="7.1em"><tspan class="fc6">Afterglow                                                          </tspan></text>
+<text x="1.2ch" y="8.1em"><tspan class="fc7">Alabaster                                                          </tspan></text>
+<text x="1.2ch" y="9.1em"><tspan class="fc8">AlienBlood                                                         </tspan></text>
+<text x="1.2ch" y="10.1em"><tspan class="fc9">Andromeda                                                          </tspan></text>
+<text x="1.2ch" y="11.1em"><tspan class="fc10">Apple Classic                                                      </tspan></text>
+<text x="1.2ch" y="12.1em"><tspan class="fc11">Apple System Colors                                                </tspan></text>
+<text x="1.2ch" y="13.1em"><tspan class="fc12">Argonaut                                                           </tspan></text>
+<text x="1.2ch" y="14.1em"><tspan class="fc13">Arthur                                                             </tspan></text>
+<text x="1.2ch" y="15.1em"><tspan class="fc14">AtelierSulphurpool                                                 </tspan></text>
+</svg>
diff --git a/cli/testdata/nonewline.svg b/cli/testdata/nonewline.svg
index 90e8906..32cefec 100644
--- a/cli/testdata/nonewline.svg
+++ b/cli/testdata/nonewline.svg
@@ -15,7 +15,5 @@
         }
     </style>
     <rect width="100%" height="100%" x="0" y="0" style="fill: #000000"/>
-<g x="0">
-<text y="0.5em"><tspan>nonewline</tspan></text>
-</g>
+<text x="0ch" y="0.5em"><tspan>nonewline</tspan></text>
 </svg>
diff --git a/cli/testdata/onechar.svg b/cli/testdata/onechar.svg
index 32265e5..e10ac8e 100644
--- a/cli/testdata/onechar.svg
+++ b/cli/testdata/onechar.svg
@@ -15,7 +15,5 @@
         }
     </style>
     <rect width="100%" height="100%" x="0" y="0" style="fill: #000000"/>
-<g x="0">
-<text y="0.5em"><tspan>a</tspan></text>
-</g>
+<text x="0ch" y="0.5em"><tspan>a</tspan></text>
 </svg>
diff --git a/cli/testdata/onecharnewline.svg b/cli/testdata/onecharnewline.svg
index 32265e5..e10ac8e 100644
--- a/cli/testdata/onecharnewline.svg
+++ b/cli/testdata/onecharnewline.svg
@@ -15,7 +15,5 @@
         }
     </style>
     <rect width="100%" height="100%" x="0" y="0" style="fill: #000000"/>
-<g x="0">
-<text y="0.5em"><tspan>a</tspan></text>
-</g>
+<text x="0ch" y="0.5em"><tspan>a</tspan></text>
 </svg>
diff --git a/cli/testdata/oneline.svg b/cli/testdata/oneline.svg
index 26517bb..3db88bb 100644
--- a/cli/testdata/oneline.svg
+++ b/cli/testdata/oneline.svg
@@ -15,7 +15,5 @@
         }
     </style>
     <rect width="100%" height="100%" x="0" y="0" style="fill: #000000"/>
-<g x="0">
-<text y="0.5em"><tspan>oneline</tspan></text>
-</g>
+<text x="0ch" y="0.5em"><tspan>oneline</tspan></text>
 </svg>
diff --git a/cli/testdata/params-colon-semicolon.svg b/cli/testdata/params-colon-semicolon.svg
index db2c995..e4c3b01 100644
--- a/cli/testdata/params-colon-semicolon.svg
+++ b/cli/testdata/params-colon-semicolon.svg
@@ -22,7 +22,5 @@
 <g class="bg">
 <rect x="0ch" y="0em" width="40ch" height="1em" class="bc0"/>
 </g>
-<g x="0">
-<text y="0.5em"><tspan> </tspan><tspan class="fc0">params with mix colon semicolon red bg </tspan></text>
-</g>
+<text x="0ch" y="0.5em"><tspan> </tspan><tspan class="fc0">params with mix colon semicolon red bg </tspan></text>
 </svg>
diff --git a/cli/testdata/powerline.svg b/cli/testdata/powerline.svg
index 905352b..fc4c854 100644
--- a/cli/testdata/powerline.svg
+++ b/cli/testdata/powerline.svg
@@ -63,10 +63,8 @@
 <rect x="27ch" y="3em" width="8ch" height="1em" class="bc5"/>
 <rect x="35ch" y="3em" width="29ch" height="1em" class="bc3"/>
 </g>
-<g x="0">
-<text y="0.5em"><tspan x="0ch"> </tspan><tspan x="1ch">p</tspan><tspan x="2ch">a</tspan><tspan x="3ch">t</tspan><tspan x="4ch">r</tspan><tspan x="5ch">i</tspan><tspan x="6ch">c</tspan><tspan x="7ch">k</tspan><tspan x="8ch">@</tspan><tspan x="9ch">z</tspan><tspan x="10ch">e</tspan><tspan x="11ch">n</tspan><tspan x="12ch">b</tspan><tspan x="13ch">o</tspan><tspan x="14ch">o</tspan><tspan x="15ch">k</tspan><tspan x="16ch"> </tspan><tspan x="17ch" class="fc0"></tspan><tspan x="18ch" class="fa0"> </tspan><tspan x="19ch" class="fa0">~</tspan><tspan x="20ch" class="fa0">/</tspan><tspan x="21ch" class="fa0">s</tspan><tspan x="22ch" class="fa0">r</tspan><tspan x="23ch" class="fa0">c</tspan><tspan x="24ch" class="fa0">/</tspan><tspan x="25ch" class="fa0">a</tspan><tspan x="26ch" class="fa0">n</tspan><tspan x="27ch" class="fa0">s</tspan><tspan x="28ch" class="fa0">i</tspan><tspan x="29ch" class="fa0">s</tspan><tspan x="30ch" class="fa0">v</tspan><tspan x="31ch" class="fa0">g</tspan><tspan x="32ch" class="fa0"> </tspan><tspan x="33ch" class="fa4"></tspan><tspan x="34ch" class="fa0"> </tspan><tspan x="35ch" class="fa0">↱</tspan><tspan x="36ch" class="fa0"> </tspan><tspan x="37ch" class="fa0">s</tspan><tspan x="38ch" class="fa0">v</tspan><tspan x="39ch" class="fa0">g</tspan><tspan x="40ch" class="fa0">s</tspan><tspan x="41ch" class="fa0">c</tspan><tspan x="42ch" class="fa0">r</tspan><tspan x="43ch" class="fa0">e</tspan><tspan x="44ch" class="fa0">e</tspan><tspan x="45ch" class="fa0">n</tspan><tspan x="46ch" class="fa0">-</tspan><tspan x="47ch" class="fa0">r</tspan><tspan x="48ch" class="fa0">e</tspan><tspan x="49ch" class="fa0">w</tspan><tspan x="50ch" class="fa0">r</tspan><tspan x="51ch" class="fa0">i</tspan><tspan x="52ch" class="fa0">t</tspan><tspan x="53ch" class="fa0">e</tspan><tspan x="54ch" class="fa0"> </tspan><tspan x="55ch" class="fa0">±</tspan><tspan x="56ch" class="fa0"> </tspan><tspan x="57ch" class="fa3"></tspan></text>
-<text y="1.5em"><tspan x="0ch"> </tspan><tspan x="1ch">p</tspan><tspan x="2ch">a</tspan><tspan x="3ch">t</tspan><tspan x="4ch">r</tspan><tspan x="5ch">i</tspan><tspan x="6ch">c</tspan><tspan x="7ch">k</tspan><tspan x="8ch">@</tspan><tspan x="9ch">z</tspan><tspan x="10ch">e</tspan><tspan x="11ch">n</tspan><tspan x="12ch">b</tspan><tspan x="13ch">o</tspan><tspan x="14ch">o</tspan><tspan x="15ch">k</tspan><tspan x="16ch"> </tspan><tspan x="17ch" class="fc0"></tspan><tspan x="18ch" class="fa0"> </tspan><tspan x="19ch" class="fa0">~</tspan><tspan x="20ch" class="fa0">/</tspan><tspan x="21ch" class="fa0">s</tspan><tspan x="22ch" class="fa0">r</tspan><tspan x="23ch" class="fa0">c</tspan><tspan x="24ch" class="fa0">/</tspan><tspan x="25ch" class="fa0">a</tspan><tspan x="26ch" class="fa0">n</tspan><tspan x="27ch" class="fa0">s</tspan><tspan x="28ch" class="fa0">i</tspan><tspan x="29ch" class="fa0">s</tspan><tspan x="30ch" class="fa0">v</tspan><tspan x="31ch" class="fa0">g</tspan><tspan x="32ch" class="fa0"> </tspan><tspan x="33ch" class="fa4"></tspan><tspan x="34ch" class="fa0"> </tspan><tspan x="35ch" class="fa0"></tspan><tspan x="36ch" class="fa0"> </tspan><tspan x="37ch" class="fa0">s</tspan><tspan x="38ch" class="fa0">v</tspan><tspan x="39ch" class="fa0">g</tspan><tspan x="40ch" class="fa0">s</tspan><tspan x="41ch" class="fa0">c</tspan><tspan x="42ch" class="fa0">r</tspan><tspan x="43ch" class="fa0">e</tspan><tspan x="44ch" class="fa0">e</tspan><tspan x="45ch" class="fa0">n</tspan><tspan x="46ch" class="fa0">-</tspan><tspan x="47ch" class="fa0">r</tspan><tspan x="48ch" class="fa0">e</tspan><tspan x="49ch" class="fa0">w</tspan><tspan x="50ch" class="fa0">r</tspan><tspan x="51ch" class="fa0">i</tspan><tspan x="52ch" class="fa0">t</tspan><tspan x="53ch" class="fa0">e</tspan><tspan x="54ch" class="fa0"> </tspan><tspan x="55ch" class="fa3"></tspan></text>
-<text y="2.5em"><tspan x="0ch"> </tspan><tspan x="1ch">p</tspan><tspan x="2ch">a</tspan><tspan x="3ch">t</tspan><tspan x="4ch">r</tspan><tspan x="5ch">i</tspan><tspan x="6ch">c</tspan><tspan x="7ch">k</tspan><tspan x="8ch">@</tspan><tspan x="9ch">z</tspan><tspan x="10ch">e</tspan><tspan x="11ch">n</tspan><tspan x="12ch">b</tspan><tspan x="13ch">o</tspan><tspan x="14ch">o</tspan><tspan x="15ch">k</tspan><tspan x="16ch"> </tspan><tspan x="17ch" class="fc0"></tspan><tspan x="18ch" class="fa0"> </tspan><tspan x="19ch" class="fa0">~</tspan><tspan x="20ch" class="fa0">/</tspan><tspan x="21ch" class="fa0">s</tspan><tspan x="22ch" class="fa0">r</tspan><tspan x="23ch" class="fa0">c</tspan><tspan x="24ch" class="fa0">/</tspan><tspan x="25ch" class="fa0">a</tspan><tspan x="26ch" class="fa0">n</tspan><tspan x="27ch" class="fa0">s</tspan><tspan x="28ch" class="fa0">i</tspan><tspan x="29ch" class="fa0">s</tspan><tspan x="30ch" class="fa0">v</tspan><tspan x="31ch" class="fa0">g</tspan><tspan x="32ch" class="fa0"> </tspan><tspan x="33ch" class="fa4"></tspan><tspan x="34ch" class="fa0"> </tspan><tspan x="35ch" class="fa0"></tspan><tspan x="36ch" class="fa0"> </tspan><tspan x="37ch" class="fa0">s</tspan><tspan x="38ch" class="fa0">v</tspan><tspan x="39ch" class="fa0">g</tspan><tspan x="40ch" class="fa0">s</tspan><tspan x="41ch" class="fa0">c</tspan><tspan x="42ch" class="fa0">r</tspan><tspan x="43ch" class="fa0">e</tspan><tspan x="44ch" class="fa0">e</tspan><tspan x="45ch" class="fa0">n</tspan><tspan x="46ch" class="fa0">-</tspan><tspan x="47ch" class="fa0">r</tspan><tspan x="48ch" class="fa0">e</tspan><tspan x="49ch" class="fa0">w</tspan><tspan x="50ch" class="fa0">r</tspan><tspan x="51ch" class="fa0">i</tspan><tspan x="52ch" class="fa0">t</tspan><tspan x="53ch" class="fa0">e</tspan><tspan x="54ch" class="fa0"> </tspan><tspan x="55ch" class="fa3"></tspan></text>
-<text y="3.5em"><tspan x="0ch" class="bold fc1"> </tspan><tspan x="1ch" class="bold fc1">❐</tspan><tspan x="2ch" class="bold fc1"> </tspan><tspan x="3ch" class="bold fc1">0</tspan><tspan x="4ch" class="bold fc1"> </tspan><tspan x="5ch" class="fc2"></tspan><tspan x="6ch" class="fc3"> </tspan><tspan x="7ch" class="fc3">↑</tspan><tspan x="8ch" class="fc3"> </tspan><tspan x="9ch" class="fc3">9</tspan><tspan x="10ch" class="fc3">h</tspan><tspan x="11ch" class="fc3"> </tspan><tspan x="12ch" class="fc3">5</tspan><tspan x="13ch" class="fc3">2</tspan><tspan x="14ch" class="fc3">m</tspan><tspan x="15ch" class="fc3"> </tspan><tspan x="16ch" class="fc4"></tspan><tspan x="17ch" class="fc4"> </tspan><tspan x="18ch" class="fc1"></tspan><tspan x="19ch" class="fc5"> </tspan><tspan x="20ch" class="fc5">1</tspan><tspan x="21ch" class="fc5"> </tspan><tspan x="22ch" class="fc5">z</tspan><tspan x="23ch" class="fc5">s</tspan><tspan x="24ch" class="fc5">h</tspan><tspan x="25ch" class="fc5"> </tspan><tspan x="26ch" class="fc6"></tspan><tspan x="27ch" class="fc1"></tspan><tspan x="28ch" class="bold fc1"> </tspan><tspan x="29ch" class="bold fc1">2</tspan><tspan x="30ch" class="bold fc1"> </tspan><tspan x="31ch" class="bold fc1">z</tspan><tspan x="32ch" class="bold fc1">s</tspan><tspan x="33ch" class="bold fc1">h</tspan><tspan x="34ch" class="bold fc1"> </tspan><tspan x="35ch" class="bold fc5"></tspan></text>
-</g>
+<text x="0ch" y="0.5em"><tspan x="0ch"> </tspan><tspan x="1ch">p</tspan><tspan x="2ch">a</tspan><tspan x="3ch">t</tspan><tspan x="4ch">r</tspan><tspan x="5ch">i</tspan><tspan x="6ch">c</tspan><tspan x="7ch">k</tspan><tspan x="8ch">@</tspan><tspan x="9ch">z</tspan><tspan x="10ch">e</tspan><tspan x="11ch">n</tspan><tspan x="12ch">b</tspan><tspan x="13ch">o</tspan><tspan x="14ch">o</tspan><tspan x="15ch">k</tspan><tspan x="16ch"> </tspan><tspan x="17ch" class="fc0"></tspan><tspan x="18ch" class="fa0"> </tspan><tspan x="19ch" class="fa0">~</tspan><tspan x="20ch" class="fa0">/</tspan><tspan x="21ch" class="fa0">s</tspan><tspan x="22ch" class="fa0">r</tspan><tspan x="23ch" class="fa0">c</tspan><tspan x="24ch" class="fa0">/</tspan><tspan x="25ch" class="fa0">a</tspan><tspan x="26ch" class="fa0">n</tspan><tspan x="27ch" class="fa0">s</tspan><tspan x="28ch" class="fa0">i</tspan><tspan x="29ch" class="fa0">s</tspan><tspan x="30ch" class="fa0">v</tspan><tspan x="31ch" class="fa0">g</tspan><tspan x="32ch" class="fa0"> </tspan><tspan x="33ch" class="fa4"></tspan><tspan x="34ch" class="fa0"> </tspan><tspan x="35ch" class="fa0">↱</tspan><tspan x="36ch" class="fa0"> </tspan><tspan x="37ch" class="fa0">s</tspan><tspan x="38ch" class="fa0">v</tspan><tspan x="39ch" class="fa0">g</tspan><tspan x="40ch" class="fa0">s</tspan><tspan x="41ch" class="fa0">c</tspan><tspan x="42ch" class="fa0">r</tspan><tspan x="43ch" class="fa0">e</tspan><tspan x="44ch" class="fa0">e</tspan><tspan x="45ch" class="fa0">n</tspan><tspan x="46ch" class="fa0">-</tspan><tspan x="47ch" class="fa0">r</tspan><tspan x="48ch" class="fa0">e</tspan><tspan x="49ch" class="fa0">w</tspan><tspan x="50ch" class="fa0">r</tspan><tspan x="51ch" class="fa0">i</tspan><tspan x="52ch" class="fa0">t</tspan><tspan x="53ch" class="fa0">e</tspan><tspan x="54ch" class="fa0"> </tspan><tspan x="55ch" class="fa0">±</tspan><tspan x="56ch" class="fa0"> </tspan><tspan x="57ch" class="fa3"></tspan></text>
+<text x="0ch" y="1.5em"><tspan x="0ch"> </tspan><tspan x="1ch">p</tspan><tspan x="2ch">a</tspan><tspan x="3ch">t</tspan><tspan x="4ch">r</tspan><tspan x="5ch">i</tspan><tspan x="6ch">c</tspan><tspan x="7ch">k</tspan><tspan x="8ch">@</tspan><tspan x="9ch">z</tspan><tspan x="10ch">e</tspan><tspan x="11ch">n</tspan><tspan x="12ch">b</tspan><tspan x="13ch">o</tspan><tspan x="14ch">o</tspan><tspan x="15ch">k</tspan><tspan x="16ch"> </tspan><tspan x="17ch" class="fc0"></tspan><tspan x="18ch" class="fa0"> </tspan><tspan x="19ch" class="fa0">~</tspan><tspan x="20ch" class="fa0">/</tspan><tspan x="21ch" class="fa0">s</tspan><tspan x="22ch" class="fa0">r</tspan><tspan x="23ch" class="fa0">c</tspan><tspan x="24ch" class="fa0">/</tspan><tspan x="25ch" class="fa0">a</tspan><tspan x="26ch" class="fa0">n</tspan><tspan x="27ch" class="fa0">s</tspan><tspan x="28ch" class="fa0">i</tspan><tspan x="29ch" class="fa0">s</tspan><tspan x="30ch" class="fa0">v</tspan><tspan x="31ch" class="fa0">g</tspan><tspan x="32ch" class="fa0"> </tspan><tspan x="33ch" class="fa4"></tspan><tspan x="34ch" class="fa0"> </tspan><tspan x="35ch" class="fa0"></tspan><tspan x="36ch" class="fa0"> </tspan><tspan x="37ch" class="fa0">s</tspan><tspan x="38ch" class="fa0">v</tspan><tspan x="39ch" class="fa0">g</tspan><tspan x="40ch" class="fa0">s</tspan><tspan x="41ch" class="fa0">c</tspan><tspan x="42ch" class="fa0">r</tspan><tspan x="43ch" class="fa0">e</tspan><tspan x="44ch" class="fa0">e</tspan><tspan x="45ch" class="fa0">n</tspan><tspan x="46ch" class="fa0">-</tspan><tspan x="47ch" class="fa0">r</tspan><tspan x="48ch" class="fa0">e</tspan><tspan x="49ch" class="fa0">w</tspan><tspan x="50ch" class="fa0">r</tspan><tspan x="51ch" class="fa0">i</tspan><tspan x="52ch" class="fa0">t</tspan><tspan x="53ch" class="fa0">e</tspan><tspan x="54ch" class="fa0"> </tspan><tspan x="55ch" class="fa3"></tspan></text>
+<text x="0ch" y="2.5em"><tspan x="0ch"> </tspan><tspan x="1ch">p</tspan><tspan x="2ch">a</tspan><tspan x="3ch">t</tspan><tspan x="4ch">r</tspan><tspan x="5ch">i</tspan><tspan x="6ch">c</tspan><tspan x="7ch">k</tspan><tspan x="8ch">@</tspan><tspan x="9ch">z</tspan><tspan x="10ch">e</tspan><tspan x="11ch">n</tspan><tspan x="12ch">b</tspan><tspan x="13ch">o</tspan><tspan x="14ch">o</tspan><tspan x="15ch">k</tspan><tspan x="16ch"> </tspan><tspan x="17ch" class="fc0"></tspan><tspan x="18ch" class="fa0"> </tspan><tspan x="19ch" class="fa0">~</tspan><tspan x="20ch" class="fa0">/</tspan><tspan x="21ch" class="fa0">s</tspan><tspan x="22ch" class="fa0">r</tspan><tspan x="23ch" class="fa0">c</tspan><tspan x="24ch" class="fa0">/</tspan><tspan x="25ch" class="fa0">a</tspan><tspan x="26ch" class="fa0">n</tspan><tspan x="27ch" class="fa0">s</tspan><tspan x="28ch" class="fa0">i</tspan><tspan x="29ch" class="fa0">s</tspan><tspan x="30ch" class="fa0">v</tspan><tspan x="31ch" class="fa0">g</tspan><tspan x="32ch" class="fa0"> </tspan><tspan x="33ch" class="fa4"></tspan><tspan x="34ch" class="fa0"> </tspan><tspan x="35ch" class="fa0"></tspan><tspan x="36ch" class="fa0"> </tspan><tspan x="37ch" class="fa0">s</tspan><tspan x="38ch" class="fa0">v</tspan><tspan x="39ch" class="fa0">g</tspan><tspan x="40ch" class="fa0">s</tspan><tspan x="41ch" class="fa0">c</tspan><tspan x="42ch" class="fa0">r</tspan><tspan x="43ch" class="fa0">e</tspan><tspan x="44ch" class="fa0">e</tspan><tspan x="45ch" class="fa0">n</tspan><tspan x="46ch" class="fa0">-</tspan><tspan x="47ch" class="fa0">r</tspan><tspan x="48ch" class="fa0">e</tspan><tspan x="49ch" class="fa0">w</tspan><tspan x="50ch" class="fa0">r</tspan><tspan x="51ch" class="fa0">i</tspan><tspan x="52ch" class="fa0">t</tspan><tspan x="53ch" class="fa0">e</tspan><tspan x="54ch" class="fa0"> </tspan><tspan x="55ch" class="fa3"></tspan></text>
+<text x="0ch" y="3.5em"><tspan x="0ch" class="bold fc1"> </tspan><tspan x="1ch" class="bold fc1">❐</tspan><tspan x="2ch" class="bold fc1"> </tspan><tspan x="3ch" class="bold fc1">0</tspan><tspan x="4ch" class="bold fc1"> </tspan><tspan x="5ch" class="fc2"></tspan><tspan x="6ch" class="fc3"> </tspan><tspan x="7ch" class="fc3">↑</tspan><tspan x="8ch" class="fc3"> </tspan><tspan x="9ch" class="fc3">9</tspan><tspan x="10ch" class="fc3">h</tspan><tspan x="11ch" class="fc3"> </tspan><tspan x="12ch" class="fc3">5</tspan><tspan x="13ch" class="fc3">2</tspan><tspan x="14ch" class="fc3">m</tspan><tspan x="15ch" class="fc3"> </tspan><tspan x="16ch" class="fc4"></tspan><tspan x="17ch" class="fc4"> </tspan><tspan x="18ch" class="fc1"></tspan><tspan x="19ch" class="fc5"> </tspan><tspan x="20ch" class="fc5">1</tspan><tspan x="21ch" class="fc5"> </tspan><tspan x="22ch" class="fc5">z</tspan><tspan x="23ch" class="fc5">s</tspan><tspan x="24ch" class="fc5">h</tspan><tspan x="25ch" class="fc5"> </tspan><tspan x="26ch" class="fc6"></tspan><tspan x="27ch" class="fc1"></tspan><tspan x="28ch" class="bold fc1"> </tspan><tspan x="29ch" class="bold fc1">2</tspan><tspan x="30ch" class="bold fc1"> </tspan><tspan x="31ch" class="bold fc1">z</tspan><tspan x="32ch" class="bold fc1">s</tspan><tspan x="33ch" class="bold fc1">h</tspan><tspan x="34ch" class="bold fc1"> </tspan><tspan x="35ch" class="bold fc5"></tspan></text>
 </svg>
diff --git a/cli/testdata/tabs.svg b/cli/testdata/tabs.svg
index 2ea3ac9..fcf770d 100644
--- a/cli/testdata/tabs.svg
+++ b/cli/testdata/tabs.svg
@@ -15,15 +15,13 @@
         }
     </style>
     <rect width="100%" height="100%" x="0" y="0" style="fill: #000000"/>
-<g x="0">
-<text y="0.5em"><tspan>0       0</tspan></text>
-<text y="1.5em"><tspan>1       1</tspan></text>
-<text y="2.5em"><tspan>2       2
</tspan></text>
-<text y="3.5em"><tspan>3       3
</tspan></text>
-<text y="4.5em"><tspan>4       4
</tspan></text>
-<text y="5.5em"><tspan>5       5
</tspan></text>
-<text y="6.5em"><tspan>6       6
</tspan></text>
-<text y="7.5em"><tspan>7       7
</tspan></text>
-<text y="8.5em"><tspan>8               8
</tspan></text>
-</g>
+<text x="0ch" y="0.5em"><tspan>0       0</tspan></text>
+<text x="0ch" y="1.5em"><tspan>1       1</tspan></text>
+<text x="0ch" y="2.5em"><tspan>2       2
</tspan></text>
+<text x="0ch" y="3.5em"><tspan>3       3
</tspan></text>
+<text x="0ch" y="4.5em"><tspan>4       4
</tspan></text>
+<text x="0ch" y="5.5em"><tspan>5       5
</tspan></text>
+<text x="0ch" y="6.5em"><tspan>6       6
</tspan></text>
+<text x="0ch" y="7.5em"><tspan>7       7
</tspan></text>
+<text x="0ch" y="8.5em"><tspan>8               8
</tspan></text>
 </svg>
diff --git a/cli/testdata/terminal-colors-n.svg b/cli/testdata/terminal-colors-n.svg
index 6f3f8e1..6b07de0 100644
--- a/cli/testdata/terminal-colors-n.svg
+++ b/cli/testdata/terminal-colors-n.svg
@@ -532,24 +532,22 @@
 <rect x="40ch" y="20em" width="4ch" height="1em" class="bc236"/>
 <rect x="44ch" y="20em" width="4ch" height="1em" class="bc214"/>
 </g>
-<g x="0">
-<text y="0.5em"><tspan>System colors:</tspan></text>
-<text y="1.5em"><tspan>  </tspan><tspan class="fa15">0   1   2   3   4   5   6   7 </tspan></text>
-<text y="2.5em"><tspan>  </tspan><tspan class="fa15">8   </tspan><tspan class="fa0">9  10  11  12  13  14  15 </tspan></text>
-<text y="4.5em"><tspan>6x6x6 color cube and greyscale:</tspan></text>
-<text y="5.5em"><tspan> </tspan><tspan class="fc0">16  22  28  34  </tspan><tspan class="fc1">40  46   </tspan><tspan class="fc0">52  58  64  </tspan><tspan class="fc1">70  76  82   </tspan><tspan class="fc0">88  94 100 </tspan><tspan class="fc1">106 112 118  </tspan></text>
-<text y="6.5em"><tspan> </tspan><tspan class="fc0">17  23  29  </tspan><tspan class="fc1">35  41  47   </tspan><tspan class="fc0">53  59  65  </tspan><tspan class="fc1">71  77  83   </tspan><tspan class="fc0">89  95 </tspan><tspan class="fc1">101 107 113 119  </tspan></text>
-<text y="7.5em"><tspan> </tspan><tspan class="fc0">18  24  30  </tspan><tspan class="fc1">36  42  48   </tspan><tspan class="fc0">54  60  66  </tspan><tspan class="fc1">72  78  84   </tspan><tspan class="fc0">90  96 </tspan><tspan class="fc1">102 108 114 120  </tspan></text>
-<text y="8.5em"><tspan> </tspan><tspan class="fc0">19  25  31  </tspan><tspan class="fc1">37  43  49   </tspan><tspan class="fc0">55  61  </tspan><tspan class="fc1">67  73  79  85   </tspan><tspan class="fc0">91  97 </tspan><tspan class="fc1">103 109 115 121  </tspan></text>
-<text y="9.5em"><tspan> </tspan><tspan class="fc0">20  26  32  </tspan><tspan class="fc1">38  44  50   </tspan><tspan class="fc0">56  62  </tspan><tspan class="fc1">68  74  80  86   </tspan><tspan class="fc0">92  98 </tspan><tspan class="fc1">104 110 116 122  </tspan></text>
-<text y="10.5em"><tspan> </tspan><tspan class="fc0">21  27  33  </tspan><tspan class="fc1">39  45  51   </tspan><tspan class="fc0">57  63  </tspan><tspan class="fc1">69  75  81  87   </tspan><tspan class="fc0">93  99 </tspan><tspan class="fc1">105 111 117 123  </tspan></text>
-<text y="12.5em"><tspan class="fc0">124 130 </tspan><tspan class="fc1">136 142 148 154  </tspan><tspan class="fc0">160 166 </tspan><tspan class="fc1">172 178 184 190  </tspan><tspan class="fc0">196 202 </tspan><tspan class="fc1">208 214 220 226  </tspan></text>
-<text y="13.5em"><tspan class="fc0">125 131 </tspan><tspan class="fc1">137 143 149 155  </tspan><tspan class="fc0">161 167 </tspan><tspan class="fc1">173 179 185 191  </tspan><tspan class="fc0">197 </tspan><tspan class="fc1">203 209 215 221 227  </tspan></text>
-<text y="14.5em"><tspan class="fc0">126 132 </tspan><tspan class="fc1">138 144 150 156  </tspan><tspan class="fc0">162 168 </tspan><tspan class="fc1">174 180 186 192  </tspan><tspan class="fc0">198 </tspan><tspan class="fc1">204 210 216 222 228  </tspan></text>
-<text y="15.5em"><tspan class="fc0">127 133 </tspan><tspan class="fc1">139 145 151 157  </tspan><tspan class="fc0">163 169 </tspan><tspan class="fc1">175 181 187 193  </tspan><tspan class="fc0">199 </tspan><tspan class="fc1">205 211 217 223 229  </tspan></text>
-<text y="16.5em"><tspan class="fc0">128 134 </tspan><tspan class="fc1">140 146 152 158  </tspan><tspan class="fc0">164 </tspan><tspan class="fc1">170 176 182 188 194  </tspan><tspan class="fc0">200 </tspan><tspan class="fc1">206 212 218 224 230  </tspan></text>
-<text y="17.5em"><tspan class="fc0">129 135 </tspan><tspan class="fc1">141 147 153 159  </tspan><tspan class="fc0">165 </tspan><tspan class="fc1">171 177 183 189 195  </tspan><tspan class="fc0">201 </tspan><tspan class="fc1">207 213 219 225 231  </tspan></text>
-<text y="19.5em"><tspan class="fc0">232 233 234 235 236 237 238 239 240 241 242 243 </tspan></text>
-<text y="20.5em"><tspan class="fc1">244 245 246 247 248 249 250 251 252 253 254 255 </tspan></text>
-</g>
+<text x="0ch" y="0.5em"><tspan>System colors:</tspan></text>
+<text x="0ch" y="1.5em"><tspan>  </tspan><tspan class="fa15">0   1   2   3   4   5   6   7 </tspan></text>
+<text x="0ch" y="2.5em"><tspan>  </tspan><tspan class="fa15">8   </tspan><tspan class="fa0">9  10  11  12  13  14  15 </tspan></text>
+<text x="0ch" y="4.5em"><tspan>6x6x6 color cube and greyscale:</tspan></text>
+<text x="0ch" y="5.5em"><tspan> </tspan><tspan class="fc0">16  22  28  34  </tspan><tspan class="fc1">40  46   </tspan><tspan class="fc0">52  58  64  </tspan><tspan class="fc1">70  76  82   </tspan><tspan class="fc0">88  94 100 </tspan><tspan class="fc1">106 112 118  </tspan></text>
+<text x="0ch" y="6.5em"><tspan> </tspan><tspan class="fc0">17  23  29  </tspan><tspan class="fc1">35  41  47   </tspan><tspan class="fc0">53  59  65  </tspan><tspan class="fc1">71  77  83   </tspan><tspan class="fc0">89  95 </tspan><tspan class="fc1">101 107 113 119  </tspan></text>
+<text x="0ch" y="7.5em"><tspan> </tspan><tspan class="fc0">18  24  30  </tspan><tspan class="fc1">36  42  48   </tspan><tspan class="fc0">54  60  66  </tspan><tspan class="fc1">72  78  84   </tspan><tspan class="fc0">90  96 </tspan><tspan class="fc1">102 108 114 120  </tspan></text>
+<text x="0ch" y="8.5em"><tspan> </tspan><tspan class="fc0">19  25  31  </tspan><tspan class="fc1">37  43  49   </tspan><tspan class="fc0">55  61  </tspan><tspan class="fc1">67  73  79  85   </tspan><tspan class="fc0">91  97 </tspan><tspan class="fc1">103 109 115 121  </tspan></text>
+<text x="0ch" y="9.5em"><tspan> </tspan><tspan class="fc0">20  26  32  </tspan><tspan class="fc1">38  44  50   </tspan><tspan class="fc0">56  62  </tspan><tspan class="fc1">68  74  80  86   </tspan><tspan class="fc0">92  98 </tspan><tspan class="fc1">104 110 116 122  </tspan></text>
+<text x="0ch" y="10.5em"><tspan> </tspan><tspan class="fc0">21  27  33  </tspan><tspan class="fc1">39  45  51   </tspan><tspan class="fc0">57  63  </tspan><tspan class="fc1">69  75  81  87   </tspan><tspan class="fc0">93  99 </tspan><tspan class="fc1">105 111 117 123  </tspan></text>
+<text x="0ch" y="12.5em"><tspan class="fc0">124 130 </tspan><tspan class="fc1">136 142 148 154  </tspan><tspan class="fc0">160 166 </tspan><tspan class="fc1">172 178 184 190  </tspan><tspan class="fc0">196 202 </tspan><tspan class="fc1">208 214 220 226  </tspan></text>
+<text x="0ch" y="13.5em"><tspan class="fc0">125 131 </tspan><tspan class="fc1">137 143 149 155  </tspan><tspan class="fc0">161 167 </tspan><tspan class="fc1">173 179 185 191  </tspan><tspan class="fc0">197 </tspan><tspan class="fc1">203 209 215 221 227  </tspan></text>
+<text x="0ch" y="14.5em"><tspan class="fc0">126 132 </tspan><tspan class="fc1">138 144 150 156  </tspan><tspan class="fc0">162 168 </tspan><tspan class="fc1">174 180 186 192  </tspan><tspan class="fc0">198 </tspan><tspan class="fc1">204 210 216 222 228  </tspan></text>
+<text x="0ch" y="15.5em"><tspan class="fc0">127 133 </tspan><tspan class="fc1">139 145 151 157  </tspan><tspan class="fc0">163 169 </tspan><tspan class="fc1">175 181 187 193  </tspan><tspan class="fc0">199 </tspan><tspan class="fc1">205 211 217 223 229  </tspan></text>
+<text x="0ch" y="16.5em"><tspan class="fc0">128 134 </tspan><tspan class="fc1">140 146 152 158  </tspan><tspan class="fc0">164 </tspan><tspan class="fc1">170 176 182 188 194  </tspan><tspan class="fc0">200 </tspan><tspan class="fc1">206 212 218 224 230  </tspan></text>
+<text x="0ch" y="17.5em"><tspan class="fc0">129 135 </tspan><tspan class="fc1">141 147 153 159  </tspan><tspan class="fc0">165 </tspan><tspan class="fc1">171 177 183 189 195  </tspan><tspan class="fc0">201 </tspan><tspan class="fc1">207 213 219 225 231  </tspan></text>
+<text x="0ch" y="19.5em"><tspan class="fc0">232 233 234 235 236 237 238 239 240 241 242 243 </tspan></text>
+<text x="0ch" y="20.5em"><tspan class="fc1">244 245 246 247 248 249 250 251 252 253 254 255 </tspan></text>
 </svg>
diff --git a/cli/testdata/terminalwidth4.svg b/cli/testdata/terminalwidth4.svg
index d097d32..4181cb6 100644
--- a/cli/testdata/terminalwidth4.svg
+++ b/cli/testdata/terminalwidth4.svg
@@ -15,7 +15,5 @@
         }
     </style>
     <rect width="100%" height="100%" x="0" y="0" style="fill: #000000"/>
-<g x="0">
-<text y="0.5em"><tspan>012345689</tspan></text>
-</g>
+<text x="0ch" y="0.5em"><tspan>012345689</tspan></text>
 </svg>
diff --git a/cli/testdata/underlinedefault.svg b/cli/testdata/underlinedefault.svg
index e73d9d2..f93d127 100644
--- a/cli/testdata/underlinedefault.svg
+++ b/cli/testdata/underlinedefault.svg
@@ -18,8 +18,6 @@
         }
     </style>
     <rect width="100%" height="100%" x="0" y="0" style="fill: #000000"/>
-<g x="0">
-<text y="0.5em"><tspan class="underline">under</tspan></text>
-<text y="1.5em"><tspan class="underline">line</tspan></text>
-</g>
+<text x="0ch" y="0.5em"><tspan class="underline">under</tspan></text>
+<text x="0ch" y="1.5em"><tspan class="underline">line</tspan></text>
 </svg>
diff --git a/cli/testdata/underlinenewline.svg b/cli/testdata/underlinenewline.svg
index e73d9d2..f93d127 100644
--- a/cli/testdata/underlinenewline.svg
+++ b/cli/testdata/underlinenewline.svg
@@ -18,8 +18,6 @@
         }
     </style>
     <rect width="100%" height="100%" x="0" y="0" style="fill: #000000"/>
-<g x="0">
-<text y="0.5em"><tspan class="underline">under</tspan></text>
-<text y="1.5em"><tspan class="underline">line</tspan></text>
-</g>
+<text x="0ch" y="0.5em"><tspan class="underline">under</tspan></text>
+<text x="0ch" y="1.5em"><tspan class="underline">line</tspan></text>
 </svg>
diff --git a/cli/testdata/underlinetabs.svg b/cli/testdata/underlinetabs.svg
index c954895..ffc26ee 100644
--- a/cli/testdata/underlinetabs.svg
+++ b/cli/testdata/underlinetabs.svg
@@ -25,15 +25,13 @@
 <g class="bg">
 <rect x="0ch" y="5em" width="9ch" height="1em" class="ba4"/>
 </g>
-<g x="0">
-<text y="0.5em"><tspan class="underline">0       0</tspan></text>
-<text y="1.5em"><tspan class="underline">1       1</tspan></text>
-<text y="2.5em"><tspan class="underline">2       2</tspan></text>
-<text y="3.5em"><tspan class="underline">3       3</tspan></text>
-<text y="4.5em"><tspan class="underline fa12">4       4</tspan></text>
-<text y="5.5em"><tspan class="underline">5       5</tspan></text>
-<text y="6.5em"><tspan class="underline">6       6</tspan></text>
-<text y="7.5em"><tspan class="underline">7       7</tspan></text>
-<text y="8.5em"><tspan class="underline">8               8</tspan></text>
-</g>
+<text x="0ch" y="0.5em"><tspan class="underline">0       0</tspan></text>
+<text x="0ch" y="1.5em"><tspan class="underline">1       1</tspan></text>
+<text x="0ch" y="2.5em"><tspan class="underline">2       2</tspan></text>
+<text x="0ch" y="3.5em"><tspan class="underline">3       3</tspan></text>
+<text x="0ch" y="4.5em"><tspan class="underline fa12">4       4</tspan></text>
+<text x="0ch" y="5.5em"><tspan class="underline">5       5</tspan></text>
+<text x="0ch" y="6.5em"><tspan class="underline">6       6</tspan></text>
+<text x="0ch" y="7.5em"><tspan class="underline">7       7</tspan></text>
+<text x="0ch" y="8.5em"><tspan class="underline">8               8</tspan></text>
 </svg>
diff --git a/cli/testdata/underlinetabs_backgroundcolor.svg b/cli/testdata/underlinetabs_backgroundcolor.svg
index 43491bf..8f1f3bc 100644
--- a/cli/testdata/underlinetabs_backgroundcolor.svg
+++ b/cli/testdata/underlinetabs_backgroundcolor.svg
@@ -25,15 +25,13 @@
 <g class="bg">
 <rect x="0ch" y="5em" width="9ch" height="1em" class="ba4"/>
 </g>
-<g x="0">
-<text y="0.5em"><tspan class="underline">0       0</tspan></text>
-<text y="1.5em"><tspan class="underline">1       1</tspan></text>
-<text y="2.5em"><tspan class="underline">2       2</tspan></text>
-<text y="3.5em"><tspan class="underline">3       3</tspan></text>
-<text y="4.5em"><tspan class="underline fa12">4       4</tspan></text>
-<text y="5.5em"><tspan class="underline">5       5</tspan></text>
-<text y="6.5em"><tspan class="underline">6       6</tspan></text>
-<text y="7.5em"><tspan class="underline">7       7</tspan></text>
-<text y="8.5em"><tspan class="underline">8               8</tspan></text>
-</g>
+<text x="0ch" y="0.5em"><tspan class="underline">0       0</tspan></text>
+<text x="0ch" y="1.5em"><tspan class="underline">1       1</tspan></text>
+<text x="0ch" y="2.5em"><tspan class="underline">2       2</tspan></text>
+<text x="0ch" y="3.5em"><tspan class="underline">3       3</tspan></text>
+<text x="0ch" y="4.5em"><tspan class="underline fa12">4       4</tspan></text>
+<text x="0ch" y="5.5em"><tspan class="underline">5       5</tspan></text>
+<text x="0ch" y="6.5em"><tspan class="underline">6       6</tspan></text>
+<text x="0ch" y="7.5em"><tspan class="underline">7       7</tspan></text>
+<text x="0ch" y="8.5em"><tspan class="underline">8               8</tspan></text>
 </svg>

From 84f62e19a16b0c95e7e291c0db110133327537ba Mon Sep 17 00:00:00 2001
From: Patrick Huesmann <info@patrick-huesmann.de>
Date: Mon, 11 Mar 2024 19:01:47 +0100
Subject: [PATCH 6/6] doc: update README.md

---
 README.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/README.md b/README.md
index 7c5cff4..e5026eb 100644
--- a/README.md
+++ b/README.md
@@ -31,6 +31,7 @@ Example usage:
 --grid              Grid mode (sets position for each character)
 --help, -h          Show help
 --listcolorschemes  List color schemes
+--marginsize WxH    Margin size (in either pixel or font units)
 --transparent       Transparent background
 --version, -v       Show version
 --width, -w NUMBER  Terminal width (auto if not set)
@@ -75,6 +76,11 @@ By default, `ansisvg` uses font-relative `ch`/`em` coordinates. This should make
 
 Inkscape currently [cannot deal with SVG size expressed in font-relative units](https://gitlab.com/inkscape/inkscape/-/issues/4737), a quick workaround is Ctrl-Shift-R (resize page to content).
 
+## Margin size
+
+With `--marginsize` a margin can be defined, so there is a bit of empty space (or "border") around the image. Default is zero margin size, i.e. the terminal characters are touching the edge of the image.
+`--marginsize` is interpreted as X/Y in the currently selected units, i.e. `ch`/`em` by default, and `px` if `--charboxsize` is used.
+
 ## Consolidated text vs. grid mode
 
 By default, `ansisvg` consolidates text to `<tspan>` chunks, leaving the X positioning of characters to the SVG renderer. This usually works well for monospace fonts. However if not all glyphs involved are monospace (e.g. when exotic characters are used, making the SVG renderer fall back to a different font for those characters) then the alignment will be off; this can be worked around with `-grid` mode which will make `ansisvg` put each character to explicit positions, making the SVG bigger and less readable but ensuring proper positioning/alignment for all characters.