programming  pictures  withAnthony  J.  Starks                  ajstarks@gmail.com      @ajstarks
The  views  and  opinions  presented  here  are  personal  views  and           do  not  necessarily  reflect  the  views  ...
mo@va@on
inspira@on:  Processing
0.  Install  Go1.  goinstall  github.com/ajstarks/svgo2.  Make  picturesgeKng  started  with
‣ interfaces   ‣ variadic  arguments   ‣ composite  literals  and  types   ‣ format,  string,  xml,  flag  libraries   ‣ fa...
object       arguments                         CSS  style Rect(100,  200,  250,  125,"fill:gray;  stroke:blue")            ...
object       arguments                          aZributes Rect(100,  200,  250,  125,       `id="box"`,  `fill="gray"`,  `s...
New(w  io.Writer)                                   Specify  the  des@na@on  for  the  generated  codeStart(w,  h  int,  o...
Line(x1,  y1,  x2,  y2  int,  s  ...string)                            Polyline(x,  y  []int,  s  ...string)              ...
Scale(n  float64)                ScaleXY(dx,  dy  float64)  SkewX(a  float64)                                         SkewY(a...
Text(x,  y  int,  t  string,  s  ...string)                           Image(x,  y,  w,  h  int,  link  string,  s  ...stri...
Offcolor                                                                              Offset  uint8                         ...
⟶                                                                              ⟶   44 77 232                              ...
1 canvas.Start(500, 500, `onload="Startup()"`)  2 canvas.Script("application/javascript", "http://example.com/myscript.js"...
fill:rgb(164,198,57)Scale                             Line                             ArcRoundrect               Circle  ...
SVGo  Hello  world
using  goplay  and  a  browser  to  sketch  with  code
inspec@ng  the  generated  code
imports,  constants,  flags                        main  func@on;  use  the                          circle  func@on  to  h...
define  the  input  data  structures                        read  the  input             parse  the  input  into  the  stru...
pmap  -­‐stagger  -­‐p  -­‐g  100  -­‐bg  lightsteelblue  -­‐t  "Browser  Market  Share"  -­‐show@tle  bs.xml  >  bs.svg
rr:  radar  roadmap   servermap:                compx:  component                          infrastructure  models    diagr...
Tools  -­‐  con@nuedpv:  porjolio  view     bulletgraph:  qualita@ve     Nmeline:  @meline/milestones                     ...
Principle:  Automate  the  crea@on  of  consistently-­‐styled  views  from  standardized  data   data
Visio                                 Chrome                               FirefoxXML     Tool     SVG                    ...
compx    –w  1200  –h  900  –t  "Title"  file.xml  >  file.svg    Tool  name      Command  op@ons             Input     Output
Browser   EditorCommand  lines
Visio   EditorCommand  lines
compx:  components  on  a  grid
top       guZer      les            0            1row            2            3                      0           1        ...
Component            opera@ng  system              sosware      nnw           n          nne nw                           ...
Thing  1                             Thing  2                           Stuff                   e                w<comp  id...
ϴ  =  10   ϴ  =  30   ϴ  =  60   ϴ  =  90varia@ons  on  the  leZer  i
flickr50  and  twiZer  update  frequency
tumblrpic
google  webfonts
layer  tennis  remixes
layer  Tennis:  all  of  season  3
“Have  fun  programming  pictures” Contact      @ajstarks,  ajstarks@gmail.com Repository   hZp://github.com/ajstarks/svgo...
SVGo: a Go Library for SVG generation
SVGo: a Go Library for SVG generation
SVGo: a Go Library for SVG generation
SVGo: a Go Library for SVG generation
SVGo: a Go Library for SVG generation
SVGo: a Go Library for SVG generation
Upcoming SlideShare
Loading in …5
×

SVGo: a Go Library for SVG generation

2,954 views

Published on

SVGo is a Go programming language library for generation of SVG. The talk discusses the design of the library, the concept of sketching in code, and the development of visualizations and tools.

Published in: Technology, Art & Photos
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total views
2,954
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
22
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

SVGo: a Go Library for SVG generation

  1. 1. programming  pictures  withAnthony  J.  Starks                  ajstarks@gmail.com      @ajstarks
  2. 2. The  views  and  opinions  presented  here  are  personal  views  and   do  not  necessarily  reflect  the  views  of  Sanofi
  3. 3. mo@va@on
  4. 4. inspira@on:  Processing
  5. 5. 0.  Install  Go1.  goinstall  github.com/ajstarks/svgo2.  Make  picturesgeKng  started  with
  6. 6. ‣ interfaces ‣ variadic  arguments ‣ composite  literals  and  types ‣ format,  string,  xml,  flag  libraries ‣ fast  compiles   ‣ goinstall ‣ goplay ‣ func@ons  as  the  unit  of  graphics  workGo  Language  features  in  
  7. 7. 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"/> 250objects,  API  and  output
  8. 8. 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"/> 250objects,  API  and  output
  9. 9. New(w  io.Writer) Specify  the  des@na@on  for  the  generated  codeStart(w,  h  int,  op@ons  ...string) Begin  the  SVG  document,  with  op@onsStartview(w,  h,  minx,  miny,  vw,  vh  int) Begin  the  document  with  a  viewportGid(id  string)/Gend() Begin/end  a  group  with  an  idGstyle(s  string)/Gend() Begin/end  a  group  styleDef(s  string)/DefEnd() Begin/end  defini@on  blockTitle(s  string) Specify  the  document  @tleDesc(s  string) Specify  the  document  descrip@onLink(href,  @tle  string)/LinkEnd() Link  to  content  between  Link  and  LinkEndUse(x,  y  int,  link  string,  style  ...string) Use  previously  defined  contentEnd() End  the  SVG  documentStructure,  Metadata,  Links
  10. 10. 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
  11. 11. 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
  12. 12. 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
  13. 13. 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
  14. 14. ⟶ ⟶ 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
  15. 15. 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
  16. 16. fill:rgb(164,198,57)Scale Line ArcRoundrect Circle Line Rect
  17. 17. SVGo  Hello  world
  18. 18. using  goplay  and  a  browser  to  sketch  with  code
  19. 19. inspec@ng  the  generated  code
  20. 20. 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  itdrawing  in  a  web  server
  21. 21. define  the  input  data  structures read  the  input parse  the  input  into  the  structures drawread/parse/draw  paZern
  22. 22. pmap  -­‐stagger  -­‐p  -­‐g  100  -­‐bg  lightsteelblue  -­‐t  "Browser  Market  Share"  -­‐show@tle  bs.xml  >  bs.svg
  23. 23. rr:  radar  roadmap servermap:   compx:  component   infrastructure  models diagramsroadmap:  roadmaps   pmap:  percentage  maps techstack:  technology  and  @melines stack  and  standardsIT  architecture  tools  using
  24. 24. Tools  -­‐  con@nuedpv:  porjolio  view bulletgraph:  qualita@ve   Nmeline:  @meline/milestones and  compara@ve  measures arch9:  9-­‐box
  25. 25. Principle:  Automate  the  crea@on  of  consistently-­‐styled  views  from  standardized  data data
  26. 26. Visio   Chrome FirefoxXML   Tool   SVG   PNG Word JPG PowerPoint PDF Adobe  Readertool  workflow
  27. 27. compx    –w  1200  –h  900  –t  "Title"  file.xml  >  file.svg    Tool  name Command  op@ons Input Output
  28. 28. Browser EditorCommand  lines
  29. 29. Visio EditorCommand  lines
  30. 30. compx:  components  on  a  grid
  31. 31. top guZer les 0 1row 2 3 0 1 2 3 colcompx  grid
  32. 32. Component opera@ng  system sosware nnw n nne nw newnw ene w ewsw ese sw se ssw s sse
  33. 33. 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>
  34. 34. ϴ  =  10 ϴ  =  30 ϴ  =  60 ϴ  =  90varia@ons  on  the  leZer  i
  35. 35. flickr50  and  twiZer  update  frequency
  36. 36. tumblrpic
  37. 37. google  webfonts
  38. 38. layer  tennis  remixes
  39. 39. layer  Tennis:  all  of  season  3
  40. 40. “Have  fun  programming  pictures” Contact @ajstarks,  ajstarks@gmail.com Repository hZp://github.com/ajstarks/svgo Examples hZp://flic.kr/s/aHsjpMnssp

×