SVGo: a Go Library for SVG generation
3 likes1,654 views
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.
![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](https://image.slidesharecdn.com/svgo-110622182636-phpapp02/85/SVGo-a-Go-Library-for-SVG-generation-11-320.jpg)
![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](https://image.slidesharecdn.com/svgo-110622182636-phpapp02/85/SVGo-a-Go-Library-for-SVG-generation-13-320.jpg)
![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](https://image.slidesharecdn.com/svgo-110622182636-phpapp02/85/SVGo-a-Go-Library-for-SVG-generation-14-320.jpg)
SVGo: a Go Library for SVG generation
- 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
- 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
- 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