The document introduces SVGo, a Go library for generating SVG drawings programmatically. It demonstrates how to use SVGo to create basic shapes like rectangles and lines, add attributes, apply transformations, and script interactions. The goal of SVGo is to allow generating consistent SVG views from standardized data.

1. programming pictures with
Anthony J. Starks
ajstarks@gmail.com
@ajstarks

2. The views and opinions presented here are personal views and
do not necessarily reflect the views of Sanofi

3. mo@va@on

4. inspira@on: Processing

5. 0. Install Go
1. goinstall github.com/ajstarks/svgo
2. Make pictures
geKng started with

6. ‣ interfaces
‣ variadic arguments
‣ composite literals and types
‣ format, string, xml, flag libraries
‣ fast compiles
‣ goinstall
‣ goplay
‣ func@ons as the unit of graphics work
Go Language features in

8. object arguments CSS style
Rect(100, 200, 250, 125,"fill:gray; stroke:blue")
(100,200)
<rect x="100" y="200"
width="250" height="125" 125
style="fill:gray; stroke:blue"/>
250
objects, API and output

9. object arguments aZributes
Rect(100, 200, 250, 125,
`id="box"`, `fill="gray"`, `stroke="blue"`)
(100,200)
<rect x="100" y="200"
width="250" height="125" 125
id="box" fill="gray" stroke="blue"/>
250
objects, API and output

10. New(w io.Writer) Specify the des@na@on for the generated code
Start(w, h int, op@ons ...string) Begin the SVG document, with op@ons
Startview(w, h, minx, miny, vw, vh int) Begin the document with a viewport
Gid(id string)/Gend() Begin/end a group with an id
Gstyle(s string)/Gend() Begin/end a group style
Def(s string)/DefEnd() Begin/end defini@on block
Title(s string) Specify the document @tle
Desc(s string) Specify the document descrip@on
Link(href, @tle string)/LinkEnd() Link to content between Link and LinkEnd
Use(x, y int, link string, style ...string) Use previously defined content
End() End the SVG document
Structure, Metadata, Links

11. Line(x1, y1, x2, y2 int, s ...string) Polyline(x, y []int, s ...string)
Qbez(sx, sy, cx, cy, ex, ey int, s ...string) Bezier(sx, sy, cx, cy, px, py, ex, ey int, s ...string)
Arc(sx sy, ax, ay, r int, large, sweep bool, ex ey int, s ...string) Path(d string, s ...string)
Lines, Curves, and Path

12. Scale(n float64) ScaleXY(dx, dy float64)
SkewX(a float64)
SkewY(a float64) SkewXY(ax, ay float64)
Gtransform(s string)
TranslateRotate(x, y int, r float64)
RotateTranslate(x, y int, r float64)
Translate(x, y int)
Rotate(r float64)
Transforms

13. Text(x, y int, t string, s ...string) Image(x, y, w, h int, link string, s ...string)
Textlines(x, y int, s []string, size, spacing int, fill, align string) Textpath(t, pathid string, s ...string)
Text and Image

14. Offcolor
Offset uint8
Color string
Opacity float64
LinearGradient(id string, x1, y1, x2, y2 uint8, sc []Offcolor)
RadialGradient(id string, cx, cy, r, fx, fy uint8, sc []Offcolor)
Gradients

15. ⟶ ⟶
44 77 232 44 77 232 .33
RGB(r, g, b int) RGBA(r, g, b int, alpha float64)
Grid(x, y, w, h, n int, s ...string)
Colors, Grid

16. 1 canvas.Start(500, 500, `onload="Startup()"`)
2 canvas.Script("application/javascript", "http://example.com/myscript.js")
3 canvas.Rect(10, 10, 100, 200)
4 canvas.End()
example.com/myscript.js
function StartUp()
1 Begin the document, load your func@on
{
... 2 specify the script, by reference
}
3 specify SVG elements, operate on these
function doStuff(element)
{ 4 end the SVG document
...
}
Scrip@ng

18. fill:rgb(164,198,57)
Scale
Line
Arc
Roundrect
Circle
Line Rect

19. SVGo Hello world

23. using goplay and a browser to sketch
with code

24. inspec@ng the generated code

25. imports, constants, flags
main func@on; use the
circle func@on to handle
the URL
in the circle func@on,
write the generated SVG
to the web client
if the URL contains a
color, use it
drawing in a web server

26. define the input data structures
read the input
parse the input into the structures
draw
read/parse/draw paZern

28. pmap -­‐stagger -­‐p -­‐g 100 -­‐bg lightsteelblue
-­‐t "Browser Market Share" -­‐show@tle bs.xml > bs.svg

29. rr: radar roadmap servermap: compx: component
infrastructure models diagrams
roadmap: roadmaps pmap: percentage maps techstack: technology
and @melines stack and standards
IT architecture tools using

30. Tools -­‐ con@nued
pv: porjolio view bulletgraph: qualita@ve Nmeline: @meline/milestones
and compara@ve measures
arch9: 9-­‐box

31. Principle: Automate the crea@on of
consistently-­‐styled views from
standardized data
data

32. Visio
Chrome
Firefox
XML Tool SVG
PNG Word
JPG PowerPoint
PDF Adobe Reader
tool workflow

33. compx –w 1200 –h 900 –t "Title" file.xml > file.svg
Tool name Command op@ons Input Output

34. Browser Editor
Command lines

35. Visio Editor
Command lines

36. compx: components on a grid

37. top guZer
les
0
1
row
2
3
0 1 2 3
col
compx grid

38. Component
opera@ng system
sosware
nnw n nne
nw ne
wnw ene
w e
wsw ese
sw se
ssw s sse

39. Thing 1 Thing 2
Stuff
e w
<comp id="t1" row="0" col="0" name="Thing 1" .../>
<comp id="t2" row="0" col="2" name="Thing 2"...>
<connect sloc="w" dloc="e" dest="t1" mark="d">
Stuff
</connect>
</comp>

40. ϴ = 10 ϴ = 30 ϴ = 60 ϴ = 90
varia@ons on the leZer i

41. flickr50 and twiZer update frequency

42. tumblrpic

43. google webfonts

44. layer tennis remixes

45. layer Tennis: all of season 3

46. “Have fun programming pictures”
Contact @ajstarks, ajstarks@gmail.com
Repository hZp://github.com/ajstarks/svgo
Examples hZp://flic.kr/s/aHsjpMnssp