SVGo workshop

Programming Pictures
Anthony Starks
SVG Open 2011 Workshop

A Li=le Go
Library Overview
Sketching with code
Pictures

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

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

if SVGisCool {
...
} else {
...
}

for t:= 0.0; t <= 360.0; t += 60.0 {
...
}

Go Fundamentals: if and loop

object arguments CSS style

Rect(100, 200, 250, 125,"ﬁll:gray; stroke:blue")

(100,200)
<rect x="100" y="200"
width="250" height="125" 125

style="ﬁll:gray; stroke:blue"/>
250

objects, API and output

object arguments a=ributes

Rect(100, 200, 250, 125,
ìd="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

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 deﬁniEon 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 deﬁned content

End() End the SVG document

Structure, Metadata, Links

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

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

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

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, ﬁll, align string) Textpath(t, pathid string, s ...string)

Text and Image

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

⟶ ⟶
44 77 232 44 77 232 .33
RGB(r, g, b int) RGBA(r, g, b int, alpha ﬂoat64)

Grid(x, y, w, h, n int, s ...string)

Colors, Grid

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

using goplay and a browser to sketch with code

inspecEng the generated code

fill:rgb(164,198,57)
Scale

Line

Arc
Roundrect
Circle

Line Rect

Pictures from the Internet

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

deﬁne the input data structures

read the input

parse the input into the structures

draw

read/parse/draw pa=ern

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"`
}

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

// 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

// 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

have fun programming pictures

Contact ajstarks@gmail.com
Repository h=ps://github.com/ajstarks/svgo
Examples h=p://ﬂic.kr/s/aHsjpMnssp
Go Programming Language h=p://golang.org

SVGo workshop

More Related Content

What's hot

Viewers also liked

Similar to SVGo workshop

Recently uploaded

SVGo workshop