Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Programming Pictures with SVGo

7eca3e06edc3c69004aaf57de51900c2?s=47 Anthony Starks
October 18, 2011

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


Anthony Starks

October 18, 2011


  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
  7. None
  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
  17. None
  18. Arc Circle Line Rect Roundrect Line fill:rgb(164,198,57) Scale

  19. SVGo  Hello  world

  20. None
  21. None
  22. None
  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
  27. None
  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