automatically add xml namespace to divs, small tweaks

d2renderers/d2svg/d2svg.go

@@ -1107,7 +1107,6 @@ func drawShape(writer io.Writer, targetShape d2target.Shape, sketchRunner *d2ske
 			render = strings.ReplaceAll(render, "<hr>", "<hr />")
 
 			mdEl := d2themes.NewThemableElement("div")
-			mdEl.Xmlns = "http://www.w3.org/1999/xhtml"
 			mdEl.ClassName = "md"
 			mdEl.Content = render
 			fmt.Fprint(writer, mdEl.Render())
@@ -1456,7 +1455,6 @@ const DEFAULT_THEME int64 = 0
 
 var DEFAULT_DARK_THEME *int64 = nil // no theme selected
 
-// TODO minify output at end
 func Render(diagram *d2target.Diagram, opts *RenderOpts) ([]byte, error) {
 	var sketchRunner *d2sketch.Runner
 	pad := DEFAULT_PADDING
@@ -1542,17 +1540,9 @@ func Render(diagram *d2target.Diagram, opts *RenderOpts) ([]byte, error) {
 		`</mask>`,
 	}, "\n"))
 
-	// TODO minify
+	// generate style elements that will be appended to the SVG tag
-	// TODO background stuff. e.g. dotted, grid, colors
-	backgroundEl := d2themes.NewThemableElement("rect")
-	backgroundEl.X = float64(left)
-	backgroundEl.Y = float64(top)
-	backgroundEl.Width = float64(w)
-	backgroundEl.Height = float64(h)
-	backgroundEl.Fill = BG_COLOR
-
-	// generate elements that will be appended to the SVG tag
 	upperBuf := &bytes.Buffer{}
+	embedFonts(upperBuf, buf.String(), diagram.FontFamily) // embedFonts *must* run before `d2sketch.DefineFillPatterns`, but after all elements are appended to `buf`
 	themeStylesheet, err := themeCSS(themeID, darkThemeID)
 	if err != nil {
 		return nil, err
@@ -1571,11 +1561,19 @@ func Render(diagram *d2target.Diagram, opts *RenderOpts) ([]byte, error) {
 	if hasMarkdown {
 		fmt.Fprintf(upperBuf, `<style type="text/css">%s</style>`, mdCSS)
 	}
-	embedFonts(upperBuf, buf.String(), diagram.FontFamily) // embedFonts *must* run before d2sketch.DefineFillPatterns
 	if sketchRunner != nil {
 		d2sketch.DefineFillPatterns(upperBuf)
 	}
 
+	// TODO background stuff. e.g. dotted, grid, colors
+	backgroundEl := d2themes.NewThemableElement("rect")
+	backgroundEl.X = float64(left)
+	backgroundEl.Y = float64(top)
+	backgroundEl.Width = float64(w)
+	backgroundEl.Height = float64(h)
+	backgroundEl.Fill = BG_COLOR
+
+	// TODO minify
 	docRendered := fmt.Sprintf(`<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="%d" height="%d" viewBox="%d %d %d %d">%s%s%s</svg>`,
 		w, h, left, top, w, h,
 		upperBuf.String(),

d2themes/element.go

@@ -48,6 +48,11 @@ type ThemableElement struct {
 }
 
 func NewThemableElement(tag string) *ThemableElement {
+	xmlns := ""
+	if tag == "div" {
+		xmlns = "http://www.w3.org/1999/xhtml"
+	}
+
 	return &ThemableElement{
 		tag,
 		math.MaxFloat64,
@@ -68,7 +73,7 @@ func NewThemableElement(tag string) *ThemableElement {
 		"",
 		"",
 		"",
-		"",
+		xmlns,
 		color.Empty,
 		color.Empty,
 		color.Empty,

e2etests/testdata/measured/empty-class/dagre/sketch.exp.svg

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="316" height="248" viewBox="-102 -102 316 248"><style type="text/css"><![CDATA[.shape {
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="316" height="248" viewBox="-102 -102 316 248"><style type="text/css"><![CDATA[]]></style><style type="text/css"><![CDATA[.shape {
   shape-rendering: geometricPrecision;
   stroke-linejoin: round;
 }
@@ -30,7 +30,7 @@
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><style type="text/css"><![CDATA[]]></style><rect x="-102.000000" y="-102.000000" width="316.000000" height="248.000000" class=" fill-N7" /><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="112.000000" height="44.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="112.000000" height="44.000000" class="class_header fill-N1" /><line x1="0.000000" x2="112.000000" y1="44.000000" y2="44.000000" class=" stroke-N1" style="stroke-width:1" /></g></g><mask id="148127623" maskUnits="userSpaceOnUse" x="-102" y="-102" width="316" height="248">
+]]></script><rect x="-102.000000" y="-102.000000" width="316.000000" height="248.000000" class=" fill-N7" /><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="112.000000" height="44.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="112.000000" height="44.000000" class="class_header fill-N1" /><line x1="0.000000" x2="112.000000" y1="44.000000" y2="44.000000" class=" stroke-N1" style="stroke-width:1" /></g></g><mask id="148127623" maskUnits="userSpaceOnUse" x="-102" y="-102" width="316" height="248">
 <rect x="-102" y="-102" width="316" height="248" fill="white"></rect>
 
 </mask></svg>

e2etests/testdata/measured/empty-shape/dagre/sketch.exp.svg

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="304" height="304" viewBox="-102 -102 304 304"><style type="text/css"><![CDATA[.shape {
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="304" height="304" viewBox="-102 -102 304 304"><style type="text/css"><![CDATA[]]></style><style type="text/css"><![CDATA[.shape {
   shape-rendering: geometricPrecision;
   stroke-linejoin: round;
 }
@@ -30,7 +30,7 @@
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><style type="text/css"><![CDATA[]]></style><rect x="-102.000000" y="-102.000000" width="304.000000" height="304.000000" class=" fill-N7" /><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="100.000000" height="100.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g></g><mask id="198791073" maskUnits="userSpaceOnUse" x="-102" y="-102" width="304" height="304">
+]]></script><rect x="-102.000000" y="-102.000000" width="304.000000" height="304.000000" class=" fill-N7" /><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="100.000000" height="100.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g></g><mask id="198791073" maskUnits="userSpaceOnUse" x="-102" y="-102" width="304" height="304">
 <rect x="-102" y="-102" width="304" height="304" fill="white"></rect>
 
 </mask></svg>

e2etests/testdata/measured/empty-sql_table/dagre/sketch.exp.svg

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="254" height="216" viewBox="-102 -102 254 216"><style type="text/css"><![CDATA[.shape {
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="254" height="216" viewBox="-102 -102 254 216"><style type="text/css"><![CDATA[]]></style><style type="text/css"><![CDATA[.shape {
   shape-rendering: geometricPrecision;
   stroke-linejoin: round;
 }
@@ -30,7 +30,7 @@
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><style type="text/css"><![CDATA[]]></style><rect x="-102.000000" y="-102.000000" width="254.000000" height="216.000000" class=" fill-N7" /><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="50.000000" height="12.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="50.000000" height="12.000000" class="class_header fill-N1" /></g></g><mask id="2388684491" maskUnits="userSpaceOnUse" x="-102" y="-102" width="254" height="216">
+]]></script><rect x="-102.000000" y="-102.000000" width="254.000000" height="216.000000" class=" fill-N7" /><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="50.000000" height="12.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="50.000000" height="12.000000" class="class_header fill-N1" /></g></g><mask id="2388684491" maskUnits="userSpaceOnUse" x="-102" y="-102" width="254" height="216">
 <rect x="-102" y="-102" width="254" height="216" fill="white"></rect>
 
 </mask></svg>

e2etests/testdata/regression/elk_img_empty_label_panic/dagre/sketch.exp.svg

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="492" height="332" viewBox="-102 -102 492 332"><style type="text/css"><![CDATA[.shape {
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="492" height="332" viewBox="-102 -102 492 332"><style type="text/css"><![CDATA[]]></style><style type="text/css"><![CDATA[.shape {
   shape-rendering: geometricPrecision;
   stroke-linejoin: round;
 }
@@ -30,7 +30,7 @@
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><style type="text/css"><![CDATA[]]></style><rect x="-102.000000" y="-102.000000" width="492.000000" height="332.000000" class=" fill-N7" /><g id="img"><g class="shape" ><image x="0.000000" y="0.000000" width="128.000000" height="128.000000" href="https://icons.terrastruct.com/infra/019-network.svg" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g></g><g id="ico"><g class="shape" ><rect x="188.000000" y="14.000000" width="100.000000" height="100.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg" x="213.000000" y="39.000000" width="50" height="50" /></g><mask id="3349745798" maskUnits="userSpaceOnUse" x="-102" y="-102" width="492" height="332">
+]]></script><rect x="-102.000000" y="-102.000000" width="492.000000" height="332.000000" class=" fill-N7" /><g id="img"><g class="shape" ><image x="0.000000" y="0.000000" width="128.000000" height="128.000000" href="https://icons.terrastruct.com/infra/019-network.svg" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g></g><g id="ico"><g class="shape" ><rect x="188.000000" y="14.000000" width="100.000000" height="100.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg" x="213.000000" y="39.000000" width="50" height="50" /></g><mask id="3349745798" maskUnits="userSpaceOnUse" x="-102" y="-102" width="492" height="332">
 <rect x="-102" y="-102" width="492" height="332" fill="white"></rect>
 
 </mask></svg>

e2etests/testdata/regression/elk_img_empty_label_panic/elk/sketch.exp.svg

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="452" height="332" viewBox="-90 -90 452 332"><style type="text/css"><![CDATA[.shape {
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="452" height="332" viewBox="-90 -90 452 332"><style type="text/css"><![CDATA[]]></style><style type="text/css"><![CDATA[.shape {
   shape-rendering: geometricPrecision;
   stroke-linejoin: round;
 }
@@ -30,7 +30,7 @@
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><style type="text/css"><![CDATA[]]></style><rect x="-90.000000" y="-90.000000" width="452.000000" height="332.000000" class=" fill-N7" /><g id="img"><g class="shape" ><image x="12.000000" y="12.000000" width="128.000000" height="128.000000" href="https://icons.terrastruct.com/infra/019-network.svg" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g></g><g id="ico"><g class="shape" ><rect x="160.000000" y="26.000000" width="100.000000" height="100.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg" x="185.000000" y="51.000000" width="50" height="50" /></g><mask id="1174832781" maskUnits="userSpaceOnUse" x="-90" y="-90" width="452" height="332">
+]]></script><rect x="-90.000000" y="-90.000000" width="452.000000" height="332.000000" class=" fill-N7" /><g id="img"><g class="shape" ><image x="12.000000" y="12.000000" width="128.000000" height="128.000000" href="https://icons.terrastruct.com/infra/019-network.svg" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g></g><g id="ico"><g class="shape" ><rect x="160.000000" y="26.000000" width="100.000000" height="100.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg" x="185.000000" y="51.000000" width="50" height="50" /></g><mask id="1174832781" maskUnits="userSpaceOnUse" x="-90" y="-90" width="452" height="332">
 <rect x="-90" y="-90" width="452" height="332" fill="white"></rect>
 
 </mask></svg>