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

Programming Pictures with SVGo

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
Tweet

More Decks by Anthony Starks

Other Decks in Design

Transcript

  1. Anthony  J.  Starks              

                                  [email protected]                 @ajstarks programming  pictures  with
  2. The  views  and  opinions  presented  here  are  personal  views  and

      do  not  necessarily  reflect  the  views  of  Sanofi
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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)
  8. 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)
  9. 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
  10. 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)
  11. 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)
  12. 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
  13. 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
  14. define  the  input  data  structures read  the  input parse  the

     input  into  the  structures draw read/parse/draw  paZern
  15. 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
  16. Tools  -­‐  con@nued pv:  porjolio  view bulletgraph:  qualita@ve   and

     compara@ve  measures arch9:  9-­‐box Nmeline:  @meline/milestones
  17. Tool   SVG   Word PowerPoint Adobe  Reader Visio  

    Chrome Firefox XML   tool  workflow PDF PNG JPG
  18. compx    –w  1200  –h  900  –t  "Title"  file.xml  >

     file.svg     Command  op@ons Input Output Tool  name
  19. top les guZer 0 0 1 1 2 3 2

    3 row col compx  grid
  20. n s e w ne se nnw nne ene ssw

    sse nw sw ese wnw wsw Component sosware opera@ng  system
  21. 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
  22. ϴ  =  10 ϴ  =  30 ϴ  =  60 ϴ

     =  90 varia@ons  on  the  leZer  i