A typical function call in SVGo looks like this:

canvas.Rect(100, 200, 250, 125, "fill:none;stroke:red")

Where canvas refers to a structure which contains a Go io.Writer [6] that specifies the destination for the generated SVG. The io.Writer interface is designed so that the destination can be files, web servers, network connections, etc.

Rect is the SVG object, (in Go, functions beginning with an upper-case character are public), followed by a set of integer parameters (100, 200, 250, 125). The final optional parameter is a string in CSS [7] format that applies style to the object. The generated SVG for the call above is:

<rect x="100" y="200" width="250" height="125" style="fill:none;stroke:red"/>

If the final parameter is omitted, the SVG implementation's default style is applied. The optional parameter(s) may be a single string, which generates a single SVG style attribute, or Go variadic parameters---a series strings which represent name, value pairs which generate XML attribute names and values applied to the SVG element. For example:

canvas.Rect(100, 200, 250, 125, `id="redbox"`, `fill="red"`)

generates:

<rect x="100" y="200" width="250" height="125" id="redbox" fill="red"/>

This alternative form is useful if the standard API needs to augmented by adding attributes and values. It is often useful to apply a global style to a graphic elements, for example those generated in a loop:

canvas.Gstyle("fill:blue;stroke:red")
for x,y := 10,10; y < 500; y+=50 {
    canvas.Rect(x, y, 60, 40)
}
canvas.Gend()

Here is a complete Go program which generates SVG to the standard output file:

package main

import (
    "os"
    "github.com/ajstarks/svgo"
)
func main() {
    width := 500
    height := 500
    canvas := svg.New(os.Stdout)    
    canvas.Start(width, height)
    canvas.Rect(0, 0, width, height)
    canvas.Ellipse(width/2, height, width/2,height/3,"fill:rgb(44,77,232)")             
    canvas.Text(width/2, height/2, "Hello, World", "fill:white;font-size:48pt;text-anchor:middle")
    canvas.End()
}

The program begins with standard Go code to create a standalone application, and imports the SVGo library along with the Go standard operating system library, os. To install an external library on your system, use the goinstall program to fetch the library from a code repository with the command goinstall github.com/ajstarks/svgo. Once installed, you refer to the library with the same name.

In the main function, variables represent the SVG canvas' width and height, and the destination for the generated SVG. Next, the SVG document begins, and the first call of Rect creates a black rectangle (note the lack of style string), followed by a blue ellipse, and white text centered on the canvas. The program generates this SVG:

<?xml version="1.0"?>
<!-- Generated by SVGo -->
<svg width="500" height="500"
xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="0" y="0" width="500" height="500" />
<ellipse cx="250" cy="500" rx="250" ry="166" style="fill:rgb(44,77,232)"/>
<text x="250" y="250" style="fill:white;font-size:48pt;text-anchor:middle">Hello, World</text>
</svg>

The general philosophy of SVGo is to decompose pictures into components, applying style and transformations, treating SVG as the "assembly language" for graphics, with the SVGo program as the compiler.

Go encourages programming with types, and here is the type definition that SVGo uses to specify gradients:

type Offcolor struct {
    Offset  uint8
    Color   string
    Opacity float
}

Given the definition, you define gradient variables, and use them in your programs.

lg := []svg.Offcolor{
    {0, "rgb(255,255,0)", 1.0},     // 0% offset, opaque yellow
    {100, "rgb(255,0,0)", .5},      // 100% offset, transparent red
    {0, "rgb(200,200,200)", .75},   // 0% offset, 75% transparent gray
    {100, "rgb(0,0,255)", 1.0},     // 100% offset, opaque green
}

canvas := svg.New(os.Stdout)
canvas.Defs()
canvas.LinearGradient("h", 0, 100, 0, 0, lg)
canvas.LinearGradient("v", 0, 0, 100, 0, lg)
canvas.DefEnd()
canvas.Rect(300, 200, 100, 100, "fill:url(#h)")
canvas.Rect(100, 200, 100, 100, "fill:url(#v)")

This code defines a slice [8] of Offcolors, with four elements which define the offset, color and opacity of a linear gradient named lg. Next, two linear gradients are defined: "h" for for horizontal, and "v" for vertical, which are used as a fill pattern for Rects

A common pattern is to read data in XML or JSON, and produce a graphical representation in SVG. This pattern works for local files and is easily adapted for data fetched over the network from services that provide APIs like Flickr and Twitter.

Go's standard xml and json packages support unmarshaling input data into data structures which are then processed to make pictures. A typical program that uses this pattern:

With the goplay command, a simple web application included in the standard Go distribution, the developer/designer uses a web browser (tested on Chrome, Firefox, and Safari on Windows and Mac OS X) to "play" with snippets of Go code and immediately see the results. The generated SVG is placed in-line, interpreted directly, showing the picture. After starting goplay and entering a URL like: http://localhost:3999/hellosvg.go, code is displayed in the left-hand textarea, ready to be edited and built. Pressing Shift-ENTER compiles and runs the code and shows the output on the right. If you want to tweak the program, move to the textarea, make the change, and press Shift-ENTER again. This method allows you to sketch in code [9], with immediate feedback. This mode of working is particularly useful when working out an algorithm, prototyping a visual effect, or simply playing around. For even greater interaction, goplay has an option to build/display on each keystroke.

Go's standard library includes a pseudo random number generator, which can be used to create variable visual effects. By loading a program in goplay, you can quickly try random iterations, and also tweak variables to alter the picture. For example, in the program below, you can alter the available colors, iterations, and maximum stroke width. Note how the program is structured: a single function, randarc embodies the picture, with its behavior controlled by its parameters and variables. In this case the picture is designed to scale with the overall SVG dimensions by tying the parameters to width and height. Also note how Go's Sprintf function is used dynamically create the CSS style.

package main

import (
    "os"
    "rand"
    "time"
    "fmt"
    "github.com/ajstarks/svgo"
)

const arcfmt = "stroke:%s;stroke-opacity:%.2f;stroke-width:%dpx;fill:none"
var colors = []string{"red", "green", "blue", "white", "gray"}

func randarc(canvas *svg.SVG, aw, ah, sw int, f1, f2 bool) {
    begin := rand.Intn(aw)
    arclength := rand.Intn(aw)
    end := begin + arclength
    baseline := ah / 2
    al := arclength / 2
    cl := len(colors)
    canvas.Arc(begin, baseline, al, al, 0, f1, f2, end, baseline,
        fmt.Sprintf("stroke:%s;stroke-opacity:%.2f;stroke-width:%dpx;fill:none",
            colors[rand.Intn(cl)], rand.Float64(), rand.Intn(sw)))
}

func main() {
    rand.Seed(time.Nanoseconds() % 1e9)

    width := 300
    height := 300
    aw := width / 2
    maxstroke := height / 10
    iterations := 50
    canvas := svg.New(os.Stdout)
    canvas.Start(width, height)
    canvas.Rect(0, 0, width, height)
    for i := 0; i < iterations; i++ {
        randarc(canvas, aw, height, maxstroke, false, true)
        randarc(canvas, aw, height, maxstroke, false, false)
    }
    canvas.End()
}

Even simple loops can be used to make interesting pictures. In this case the "tweakable" items are α and αi (controls the transparency), the text to be displayed ("s"), the rotation angle, θ with its interval θi

package main

import (
    "os"
    "fmt"
    "github.com/ajstarks/svgo"
)

func main() {
    width := 200
    height := 200
    α := 1.0
    αi := 0.03
    θi := 30.0
    h2 := height/2
    w2 := width/2

    canvas := svg.New(os.Stdout)
    canvas.Start(width, height)
    canvas.Rect(0, 0, width, height)
    canvas.Gstyle("font-family:serif;fill:white;font-size:72pt")
    canvas.Gtransform(fmt.Sprintf("translate(%d,%d)", w2, h2))

    for θ := 0.0; θ <= 360.0; θ += θi {
        canvas.Text(0, 0, "s", 
            fmt.Sprintf(`transform="rotate(%.3f)"`, θ),
            fmt.Sprintf(`fill-opacity="%.3f"`,α))
        α -= αi
    }
    canvas.Gend()
    canvas.Gend()
    canvas.End()
}

Here is "s", "v", and "g":

Here is the result of drawing the letter "i", and varying the angle: 10, 30, 45, 90 degrees

Other comparative examples are found at the FORM+CODE website [10].

The Go standard library includes the http package, which facilites writing web servers and applications, and its use of the io.Writer interface allows you to flexibly specify the destination of the generated SVG, so that it's as easy to serve SVG in a web server as it is writing to the screen.

This code generates colored shapes based on a URL. The main function creates two handlers which match /circle/ and /rect/ URLs, and then the program listens for requests. The corresponding circle and rect functions then create shapes based on a style passed in the URL. After running the program, opening: http://localhost:1958/circle/green displays a green circle in the web browser.

package main

import (
    "http"
    "log"
    "strings"
    "github.com/ajstarks/svgo"
)

const defaultstyle = "fill:rgb(127,0,0)"

func main() {
    http.Handle("/circle/", http.HandlerFunc(circle))
    http.Handle("/rect/", http.HandlerFunc(rect))
    err := http.ListenAndServe(1958, nil)
    if err != nil {
    log.Println("ListenAndServe:", err)
    }
}

func circle(w http.ResponseWriter, req *http.Request) {
  w.Header().Set("Content-Type", "image/svg+xml")
  s := svg.New(w)
  s.Start(500, 500)
  s.Title("Circle")
  s.Circle(250, 250, 125, shapestyle(req.URL.Path))
  s.End()
}

func rect(w http.ResponseWriter, req *http.Request) {
    w.Header().Set("Content-Type", "image/svg+xml")
    s := svg.New(w)
    s.Start(500, 500)
    s.Title("Rectangle")
    s.Rect(250, 250, 100, 200, shapestyle(req.URL.Path))
    s.End()
}

func shapestyle(path string) string {
    i := strings.LastIndex(path, "/") + 1
    if i > 0 && len(path[i:]) > 0 {
        return "fill:" + path[i:]
    }
    return defaultstyle
}

This picture demonstrates Google Web Fonts [11] and its API with SVGo. The key to its operation is the URI:

http://fonts.googleapis.com/css?family={fonts}

where {fonts} is a pipe-delimited list of font names. The result of performing a HTTP GET on this URI is CSS code that specifies the fonts. For example,

http://fonts.googleapis.com/css?family=Pacifico 

produces:

@font-face {
    font-family: 'Pacifico';
    font-style: normal;
    font-weight: normal;
    src: local('Pacifico'), url('http://themes.googleusercontent.com/font?kit=fKnfV28XkldRW297cFLeqfesZW2xOQ-xsNqO47m55DA') format('truetype');
}

The program to generate the picture works by using a Go function to perform the GET (googlefont(fontname string)), and place the resulting CSS in a SVG defs element. The program is then able to use the web fonts by name just like any other local font. In this case looping over the names in the list, and displaying "Hello, World" in the corresponding font.

SVGo includes the Script function that applies scripting to graphics elements. The following program uses Go's composite literals to specify data for polygons, displays the polygons, and applies JavaScript to the graphics elements to make them draggable [12].

func main() {
    // HTML5 logo data from 
    // "Understanding and Optimizing Web Graphics", Session 508, 
    // Dean Jackson, Apple WWDC 2011
    //
    // Draggable elements via Jeff Schiller's dragsvg Javascript library

    // shield
    var sx = []int{71, 30, 481, 440, 255}
    var sy = []int{460, 0, 0, 460, 512}
    // highlight
    var hx = []int{256, 405, 440, 256}
    var hy = []int{472, 431, 37, 37}
    // "five"
    var fx = []int{181, 176, 392, 393, 396, 397, 114, 115, 129, 325, 318, 256, 192, 188, 132, 139, 256, 371, 372, 385, 387, 371}
    var fy = []int{208, 150, 150, 138, 109, 94, 94, 109, 265, 265, 338, 355, 338, 293, 293, 382, 414, 382, 372, 223, 208, 208}

    canvas := svg.New(os.Stdout)
    width := 512
    height := 512

    // begin the document with the onload event, and namespace for dragging
    canvas.Start(width, height, `onload="initializeDraggableElements();"`, `xmlns:drag="http://www.codedread.com/dragsvg"`)
    canvas.Rect(0, 0, width, height)                                               // black background
    canvas.Script("application/javascript", "http://www.codedread.com/dragsvg.js") // reference the drag script
    canvas.Polygon(sx, sy, `drag:enable="true"`, canvas.RGB(227, 79, 38))          // draggable shield
    canvas.Polygon(fx, fy, `drag:enable="true"`, canvas.RGB(219, 219, 219))        // draggable five
    canvas.Polygon(hx, hy, `drag:enable="true"`, canvas.RGBA(255, 255, 255, 0.3))  // draggable highlight
    canvas.End()
}

SVGo is used to create a set of visualization tools for use in IT architecture and related disciplines. The tools operate from the principle that precise and consistent graphical views are generated from standard data representations in XML. Separation of data and view allows for independent analysis of data and the generation of alternative and combined/composite views with little extra effort. In all cases the user is not concerned with the details of layout, style, the tools automatically handle these aspects.

In addition to a general-purpose grid-based layout diagramming tool described below, SVGo has been used to develop tools to visualize timelines, server configurations, proportional maps, technology stacks, portfolio views, and roadmaps.

All tools have a common command line structure, and generate SVG to standard output. The common practice is to manage collections of visualizations from a project directory, and generate the visualization sets via batch files.

The Internet is full of interesting data that you use to make pictures, and most services include an API to get at the data. Using the same pattern described above, the developer/designer can retrieve the data from the network and transform the data to interesting pictures.

New(w io.Writer) *SVG Constructor, Specify the output destination.

CenterRect(x int, y int, w int, h int, s ...string) draw a rectangle with its center at x,y, with width w, and height h.

Textlines(x, y int, s []string, size, spacing int, fill, align string) Places lines of text in s, starting at x,y, at the specified size, fill, and alignment, and spacing.

Grid(x int, y int, w int, h int, n int, s ...string) draws a grid of straight lines starting at x,y, with a width w, and height h, and a size of n.