Programming Pictures with SVGo

Presentation from SVG Open 2011 on SVGo, a Go Language library for generating SVG. The presentations shows the design of the library, interactive sketching, and making pictures from your own data and data from Internet services

Transcript

1. Anthony  J.  Starks                                             ajstarks@gmail.com                 @ajstarks programming  pictures  with
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. Go  Language  features  in   ‣ interfaces ‣ variadic  arguments ‣ composite  literals  and  types ‣ format,  string,  xml,  flag  libraries ‣ fast  compiles   ‣ goinstall ‣ goplay ‣ func@ons  as  the  unit  of  graphics  work
8. Rect(100,  200,  250,  125,"fill:gray;  stroke:blue") object arguments CSS  style objects,  API  and  output <rect  x="100"  y="200"   width="250"  height="125"   style="fill:gray;  stroke:blue"/> (100,200) 250 125
9. Rect(100,  200,  250,  125, object arguments objects,  API  and  output `id="box"`,  `fill="gray"`,  `stroke="blue"`) <rect  x="100"  y="200" width="250"  height="125" id="box"  fill="gray"  stroke="blue"/> aZributes (100,200) 250 125
10. Structure,  Metadata,  Links 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
11. Lines,  Curves,  and  Path Polyline(x,  y  []int,  s  ...string) Line(x1,  y1,  x2,  y2  int,  s  ...string) Arc(sx  sy,  ax,  ay,  r  int,  large,  sweep  bool,  ex  ey  int,  s  ...string) Bezier(sx,  sy,  cx,  cy,  px,  py,  ex,  ey  int,  s  ...string) Path(d  string,  s  ...string) Qbez(sx,  sy,  cx,  cy,  ex,  ey  int,  s  ...string)
12. Transforms SkewX(a  float64) SkewXY(ax,  ay  float64) SkewY(a  float64) Scale(n  float64) ScaleXY(dx,  dy  float64) Translate(x,  y  int) Rotate(r  float64) RotateTranslate(x,  y  int,  r  float64) TranslateRotate(x,  y  int,  r  float64) Gtransform(s  string)
13. Textpath(t,  pathid  string,  s  ...string) 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) Text  and  Image
14. Gradients Offset  uint8 Color  string Opacity  float64 Offcolor LinearGradient(id  string,  x1,  y1,  x2,  y2  uint8,  sc  []Offcolor) RadialGradient(id  string,  cx,  cy,  r,  fx,  fy  uint8,  sc  []Offcolor)
15. Colors,  Grid RGB(r,  g,  b  int) 44 77 232 ⟶ RGBA(r,  g,  b  int,  alpha  float64) .33 ⟶ 44 77 232 Grid(x,  y,  w,  h,  n  int,  s  ...string)
16. Scrip@ng canvas.Start(500, 500, `onload="Startup()"`) canvas.Script("application/javascript", "http://example.com/myscript.js") canvas.Rect(10, 10, 100, 200) canvas.End() 1 2 3 4 function StartUp() { ... } function doStuff(element) { ... } example.com/myscript.js 1 2 3 4 Begin  the  document,  load  your  func@on   specify  the  script,  by  reference specify  SVG  elements,  operate  on  these end  the  SVG  document
18. Arc Circle Line Rect Roundrect Line fill:rgb(164,198,57) Scale
19. SVGo  Hello  world
23. using  goplay  and  a  browser  to  sketch   with  code
24. inspec@ng  the  generated  code
25. drawing  in  a  web  server 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
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. servermap:   infrastructure  models roadmap:  roadmaps   and  @melines pmap:  percentage  maps techstack:  technology   stack  and  standards compx:  component   diagrams IT  architecture  tools  using rr:  radar  roadmap
30. Tools  -­‐  con@nued pv:  porjolio  view bulletgraph:  qualita@ve   and  compara@ve  measures arch9:  9-­‐box Nmeline:  @meline/milestones
31. Principle:  Automate  the  crea@on  of   consistently-­‐styled  views  from   standardized  data data
32. Tool   SVG   Word PowerPoint Adobe  Reader Visio   Chrome Firefox XML   tool  workflow PDF PNG JPG
33. compx    –w  1200  –h  900  –t  "Title"  file.xml  >  file.svg     Command  op@ons Input Output Tool  name
34. Browser Editor Command  lines
35. Command  lines Visio Editor
36. compx:  components  on  a  grid
37. top les guZer 0 0 1 1 2 3 2 3 row col compx  grid
38. n s e w ne se nnw nne ene ssw sse nw sw ese wnw wsw Component sosware opera@ng  system
39. Thing  1 <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> Thing  2 Stuff e w
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