SVGo Workshop from SVG Open 2011

1. Programming Pictures
Anthony Starks
SVG Open 2011 Workshop

2. A Li=le Go
Library Overview
Sketching with code
Pictures

3. A Li=le Go
Library Overview
Sketching with code
Pictures

4. package main
import (
"pkg"
)
func foo(x, y int) int {
...
}
// start here
func main() {
z := foo(10, 20)
pkg.Stuff(z)
}
Go Fundamentals: program structure

5. var (
number,i,j int
big float64 = 12345678.90
things = []string{"one", "two"}
)
foo := 10
bar := 20.0
baz := `SVG is "really" cool`
Go Fundamentals: variables and declaraEons

6. if SVGisCool {
...
} else {
...
}
for t:= 0.0; t <= 360.0; t += 60.0 {
...
}
Go Fundamentals: if and loop

7. A Li=le Go
Library Overview
Sketching with code
Pictures

9. 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

10. object arguments a=ributes
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

11. New(w io.Writer) Specify the desEnaEon for the generated code
Start(w, h int, opEons ...string) Begin the SVG document, with opEons
Startview(w, h, minx, miny, vw, vh int) Begin the document with a viewport
Group(s ...string)/Gend() Begin a group with arbitrary a=ributes
Gid(id string)/Gend() Begin/end a group with an id
Gstyle(s string)/Gend() Begin/end a group style
ClipPath(s ...string)/ClipEnd() Begin/end ClipPath
Def(s string)/DefEnd() Begin/end definiEon block
Title(s string) Specify the document Etle
Desc(s string) Specify the document descripEon
Link(href, Etle 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

12. Rect(x, y, w, h int, s ...string) CenterRect(x, y, w, h int, s ...string)
Roundrect(x, y, w, h, rx, ry int, s ...string) Ellipse(x, y, rx, ry int, s ...string)
Circle(x, y, r int, s ...string) Square(x, y, w int, s ...string) Polygon(x, y []int, s ...string)
Shapes

13. 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

14. 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

15. 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

16. 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

17. ⟶ ⟶
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

18. 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 funcEon
{
... 2 specify the script, by reference
}
3 specify SVG elements, operate on these
function doStuff(element)
{ 4 end the SVG document
...
}
ScripEng

19. A Li=le Go
Library Overview
Sketching with code
Pictures

20. SVGo Hello world

24. using goplay and a browser to sketch with code

25. inspecEng the generated code

26. A Li=le Go
Library Overview
Sketching with code
Pictures

27. Bugdriod

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

59. Pictures from the Internet

60. 1 $ flickr50 beach
h=p://api.flickr.com/services/rest/?
2 method=flickr.photos.search&api_key=...&text=beach&per_page=50&sort=interesEngness-­‐desc
<?xml version="1.0" encoding="ug-­‐8" ?>
<rsp stat="ok">
<photos page="1" pages="377728" perpage="50" total="18886368">
<photo id="6161689323" owner="30858303@N04"
secret="62b5d50e76" server="6171" farm="7"
Etle="Los Urros (Sunrise)" ispublic="1" isfriend="0" isfamily="0" />
3 <photo id="6145252600" owner="29609591@N08"
secret="306ae87341" server="6088" farm="7"
Etle="Ardnamurchan Lighthouse" ispublic="1" isfriend="0" isfamily="0"/>
....
</photos>
</rsp>
4
1 command
2 flickr request URL
3 flickr XML response
4 Picture

61. define the input data structures
read the input
parse the input into the structures
draw
read/parse/draw pa=ern

62. package main
import (
"os"
"http"
"url"
"xml"
"fmt"
imports
"github.com/ajstarks/svgo"
)
type FlickrResp struct {
Stat string `xml:"attr"`
Photos Photos
}
type Photos struct { data structures
Photo []Photo
}
type Photo struct {
Id string `xml:"attr"`
Secret string `xml:"attr"`
Server string `xml:"attr"`
Farm string `xml:"attr"`
Title string `xml:"attr"`
}

63. var (
width = 805
height = 500
canvas = svg.New(os.Stdout)
)
const (
apifmt =
"http://api.flickr.com/services/rest/?method=%s&api_key=%s&%s=%s&per_page=50&sort=interestingness-desc"
urifmt = "http://farm%s.static.flickr.com/%s/%s.jpg"
apiKey = "...your key here..."
textStyle = "font-family:Calibri,sans-serif; font-size:48px; fill:white; text-anchor:start"
imageWidth = 75
imageHeight = 75
)
Variables and constants

64. // FlickrAPI calls the API given a method with single name/value pair
func flickrAPI(method, name, value string) string {
return fmt.Sprintf(apifmt, method, apiKey, name, value)
}
// makeURI converts the elements of a photo into a Flickr photo URI
func makeURI(p Photo, imsize string) string {
im := p.Id + "_" + p.Secret
if len(imsize) > 0 {
im += "_" + imsize
}
return fmt.Sprintf(urifmt, p.Farm, p.Server, im)
}
// imageGrid reads the response from Flickr, and creates a grid of images
func imageGrid(f FlickrResp, x, y, cols, gutter int, imgsize string) {
if f.Stat != "ok" {
fmt.Fprintf(os.Stderr, "%vn", f)
return
}
xpos := x
for i, p := range f.Photos.Photo {
if i%cols == 0 && i > 0 {
xpos = x
y += (imageHeight + gutter)
}
canvas.Link(makeURI(p, ""), p.Title)
canvas.Image(xpos, y, imageWidth, imageHeight, makeURI(p, "s"))
canvas.LinkEnd()
xpos += (imageWidth + gutter)
}
}
make the image grid from the XML response

65. // fs calls the Flickr API to perform a photo search
func fs(s string) {
var f FlickrResp
r, weberr := http.Get(flickrAPI("flickr.photos.search", "text", s))
if weberr != nil {
fmt.Fprintf(os.Stderr, "%vn", weberr)
return
}
defer r.Body.Close()
xmlerr := xml.Unmarshal(r.Body, &f)
if xmlerr != nil || r.StatusCode != http.StatusOK {
fmt.Fprintf(os.Stderr, "%v (status=%d)n", xmlerr, r.StatusCode)
return
}
canvas.Title(s)
imageGrid(f, 5, 5, 10, 5, "s")
canvas.Text(20, height-30, s, textStyle)
}
// for each search term on the commandline, create a photo grid
func main() {
for i := 1; i < len(os.Args); i++ {
canvas.Start(width, height)
canvas.Rect(0, 0, width, height, "fill:black")
fs(url.QueryEscape(os.Args[i]))
canvas.End()
}
}
Call the API from the main funcEon

66. have fun programming pictures
Contact ajstarks@gmail.com
Repository h=ps://github.com/ajstarks/svgo
Examples h=p://flic.kr/s/aHsjpMnssp
Go Programming Language h=p://golang.org