Wardley MAp canvas in SVG + Go

canvas.svg

<?xml version="1.0"?>
<!-- Generated by SVGo -->
<svg width="1200" height="830"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Wardley</title>
<rect x="0" y="0" width="1200" height="830" style="fill:white" />
<defs>
<linearGradient id="wardleyGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="rgb(196,196,196)" stop-opacity="1.00"/>
<stop offset="30%" stop-color="rgb(255,255,255)" stop-opacity="1.00"/>
<stop offset="70%" stop-color="rgb(255,255,255)" stop-opacity="1.00"/>
<stop offset="100%" stop-color="rgb(196,196,196)" stop-opacity="1.00"/>
</linearGradient>
<marker id="arrow" refX="15" refY="0" markerWidth="12" markerHeight="12" viewBox="0 -5 10 10" >
<path d="M0,-5L10,0L0,5" style="fill:red" />
</marker>
<marker id="graphArrow" refX="9" refY="0" markerWidth="12" markerHeight="12" viewBox="0 -5 10 10" >
<path d="M0,-5L10,0L0,5" style="fill:black" />
</marker>
</defs>
<rect x="25" y="0" width="1175" height="805" style="fill:url(#wardleyGradient)" />
<g transform="translate(0,830) rotate(270)">
<g font-family="&quot;Helvetica Neue&quot;,Helvetica,Arial,sans-serif" font-size="13px"> >
<line x1="25" y1="25" x2="830" y2="25" stroke="black" stroke-width="1" marker-end="url(#graphArrow)" />
<line x1="830" y1="325" x2="25" y2="325" stroke="#b8b8b8" stroke-dasharray="2,2" />
<line x1="830" y1="625" x2="25" y2="625" stroke="#b8b8b8" stroke-dasharray="2,2" />
<line x1="830" y1="925" x2="25" y2="925" stroke="#b8b8b8" stroke-dasharray="2,2" />
<text x="35" y="15" text-anchor="start" >Invisible</text>
<text x="795" y="15" text-anchor="end" >Visible</text>
<text x="440" y="15" text-anchor="middle" font-weight="bold" >Value Chain</text>
</g>
</g>
<line x1="25" y1="805" x2="1190" y2="805" stroke="black" stroke-width="1" marker-end="url(#graphArrow)" />
<g font-family="&quot;Helvetica Neue&quot;,Helvetica,Arial,sans-serif" font-size="13px" font-style="italic" >
<text x="35" y="15" font-style="normal" font-size="11px" font-weight="bold" >Uncharted</text>
<text x="1180" y="15" font-style="normal" font-size="11px" font-weight="bold" text-anchor="end" >Industrialised</text>
<text x="30" y="818" >Gensesis</text>
<text x="330" y="818" >Custom-Build</text>
<text x="630" y="818" >Product</text>
<text x="630" y="830" >(+rental)</text>
<text x="930" y="818" >Commodity</text>
<text x="930" y="830" >(+utility)</text>
<text x="1200" y="823" text-anchor="end" font-weight="bold" font-style="normal" >Evolution</text>
</g>
</svg>

main.go

package main

import (
	"os"

	svg "github.com/ajstarks/svgo"
)

func main() {
	width := 1200
	height := 830
	padLeft := 25
	padBottom := 25

	lg := []svg.Offcolor{
		{Offset: 0, Color: "rgb(196,196,196)", Opacity: 1.0},
		{Offset: 30, Color: "rgb(255,255,255)", Opacity: 1.0},
		{Offset: 70, Color: "rgb(255,255,255)", Opacity: 1.0},
		{Offset: 100, Color: "rgb(196,196,196)", Opacity: 1.0}}

	g := svg.New(os.Stdout)
	g.Start(width, height)
	g.Title("Wardley")
	g.Rect(0, 0, width, height, "fill:white")
	g.Def()
	g.LinearGradient("wardleyGradient", 0, 0, 100, 0, lg)
	g.Marker("arrow", 15, 0, 12, 12, `viewBox="0 -5 10 10"`)
	g.Path("M0,-5L10,0L0,5", "fill:red")
	g.MarkerEnd()

	g.Marker("graphArrow", 9, 0, 12, 12, `viewBox="0 -5 10 10"`)
	g.Path("M0,-5L10,0L0,5", "fill:black")
	g.MarkerEnd()
	g.DefEnd()

	g.Rect(padLeft, 0, width-padLeft, height-padBottom, "fill:url(#wardleyGradient)")
	g.TranslateRotate(0, height, 270)
	g.Group(`font-family=""Helvetica Neue",Helvetica,Arial,sans-serif" font-size="13px">`)
	g.Line(padBottom, padLeft, height, padLeft, `stroke="black"`, `stroke-width="1"`, `marker-end="url(#graphArrow)"`)
	g.Line(height, width/4+padLeft, padBottom, width/4+padLeft, `stroke="#b8b8b8"`, `stroke-dasharray="2,2"`)
	g.Line(height, width/2+padLeft, padBottom, width/2+padLeft, `stroke="#b8b8b8"`, `stroke-dasharray="2,2"`)
	g.Line(height, 3*width/4+padLeft, padBottom, 3*width/4+padLeft, `stroke="#b8b8b8"`, `stroke-dasharray="2,2"`)
	g.Text(padBottom+10, padLeft-10, "Invisible", `text-anchor="start"`)
	g.Text(height-padBottom-10, padLeft-10, "Visible", `text-anchor="end"`)
	g.Text(height/2+padBottom, padLeft-10, "Value Chain", `text-anchor="middle" font-weight="bold"`)
	g.Gend()
	g.Gend()

	g.Line(padLeft, height-padBottom, width-10, height-padBottom, `stroke="black"`, `stroke-width="1"`, `marker-end="url(#graphArrow)"`)
	g.Group(`font-family=""Helvetica Neue",Helvetica,Arial,sans-serif"`, `font-size="13px"`, `font-style="italic"`)
	g.Text(padLeft+10, 15, "Uncharted", `font-style="normal"`, `font-size="11px"`, `font-weight="bold"`)
	g.Text(width-20, 15, "Industrialised", `font-style="normal"`, `font-size="11px"`, `font-weight="bold"`, `text-anchor="end"`)

	g.Text(padLeft+5, height-padBottom/2, "Gensesis")
	g.Text(padLeft+5+width/4, height-padBottom/2, "Custom-Build")
	g.Text(padLeft+5+width/2, height-padBottom/2, "Product")
	g.Text(padLeft+5+width/2, height, "(+rental)")
	g.Text(padLeft+5+3*width/4, height-padBottom/2, "Commodity")
	g.Text(padLeft+5+3*width/4, height, "(+utility)")
	g.Text(width, height-padBottom/2+5, "Evolution", `text-anchor="end"`, `font-weight="bold"`, `font-style="normal"`)

	g.Gend()
	g.End()
}