Your SlideShare is downloading. ×
0
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
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
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
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
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
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
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
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

SVGo: a Go Library for SVG generation

2,454

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.

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,454
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
20
Comments
1
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. programming  pictures  withAnthony  J.  Starks                  ajstarks@gmail.com      @ajstarks
  • 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  Go1.  goinstall  github.com/ajstarks/svgo2.  Make  picturesgeKng  started  with
  • 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. 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. 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. 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. 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. 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. 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. 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. ⟶ ⟶ 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. 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. fill:rgb(164,198,57)Scale Line ArcRoundrect Circle Line Rect
  • 17. SVGo  Hello  world
  • 18. using  goplay  and  a  browser  to  sketch  with  code
  • 19. inspec@ng  the  generated  code
  • 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. define  the  input  data  structures read  the  input parse  the  input  into  the  structures drawread/parse/draw  paZern
  • 22. pmap  -­‐stagger  -­‐p  -­‐g  100  -­‐bg  lightsteelblue  -­‐t  "Browser  Market  Share"  -­‐show@tle  bs.xml  >  bs.svg
  • 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. Tools  -­‐  con@nuedpv:  porjolio  view bulletgraph:  qualita@ve   Nmeline:  @meline/milestones and  compara@ve  measures arch9:  9-­‐box
  • 25. Principle:  Automate  the  crea@on  of  consistently-­‐styled  views  from  standardized  data data
  • 26. Visio   Chrome FirefoxXML   Tool   SVG   PNG Word JPG PowerPoint PDF Adobe  Readertool  workflow
  • 27. compx    –w  1200  –h  900  –t  "Title"  file.xml  >  file.svg    Tool  name Command  op@ons Input Output
  • 28. Browser EditorCommand  lines
  • 29. Visio EditorCommand  lines
  • 30. compx:  components  on  a  grid
  • 31. top guZer les 0 1row 2 3 0 1 2 3 colcompx  grid
  • 32. Component opera@ng  system sosware nnw n nne nw newnw ene w ewsw ese sw se ssw s sse
  • 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. ϴ  =  10 ϴ  =  30 ϴ  =  60 ϴ  =  90varia@ons  on  the  leZer  i
  • 35. flickr50  and  twiZer  update  frequency
  • 36. tumblrpic
  • 37. google  webfonts
  • 38. layer  tennis  remixes
  • 39. layer  Tennis:  all  of  season  3
  • 40. “Have  fun  programming  pictures” Contact @ajstarks,  ajstarks@gmail.com Repository hZp://github.com/ajstarks/svgo Examples hZp://flic.kr/s/aHsjpMnssp

×