SVGs with Cara Heacock

More at http://nebraskajs.com/2014/svg/

Transcript

1. Intro to SVGs a.k.a.  This  Presentation  Is  a  Thing  That   Is  Happening,  I  Guess By  Cara  Heacock
2. First of all, why the subtitle? I’m  not  sure  you  understand  how  haphazardly  this  happened…
3. So then this happened…
4. So now this presentation is happening
5. Anyway…
6. What are SVGs? Scalable  Vector  Graphics   • Allows  for  using  vector  images  on  web  pages   • All  the  major  browsers  at  least  sorta  kinda  support   them  (IE  9+,  Firefox,  Safari,  Opera,  Chrome,  etc.)
7. What are vector graphics? • Composed  of  pixels   – a  grid  of  squares   • Scaling  it  up  results  in  lower   quality;  you  can  see  the  pixels   • Common  file  types:  jpg,  jpeg,   png,  gif • Composed  of  MATH   – mathematically   determined  points,  lines,   curves,  and  shapes   • You  can  scale  it  to  any  size   because  the  image  is  made   of  math   • Common  file  types:  svg,  ai   (Adobe  Illustrator) Raster            VS          Vector Bitmap/Raster  Graphics Vector  Graphics
8. Why use SVGs? • Scalability   – You  can  make  them  whatever  size  you  want   without  losing  quality.   • Less  HTTP  requests   – SVGs  are  built  into  the  markup  and  will  load  faster   than  the  client  requesting  an  image.   • Manipulatable  with  CSS/Javascript   – Want  to  change  the  color  of  your  graphic  on  the   fly?  You  can!
9. How to make an SVG • Make  your  image   using  a  software   that  supports   vector  graphics   – My  software  of   choice  is  Adobe   Illustrator   • Save  it  as  an  SVG
10. How to make an SVG • It  will  spit  out   some  craziness  to   plug  in  your   markup,  and   you’re  good. <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/ 1999/xlink" x="0px" y="0px" width="750px" height="580px" viewBox="0 0 750 580" enable-background="new 0 0 750 580" xml:space="preserve"> <rect fill="#DDDDDD" width="750" height="580"/> <polygon fill="#FFFFFF" points="731.291,0 545.558,4.381 374.878,215.512 204.337,4.381 18.674,0 0,155.272 50.294,267.974 157.417,352.732 62.403,430.973 72.648,562.304 231.97,580 374.878,432.005 517.924,580 677.386,562.304 687.627,430.973 592.609,352.732 699.723,267.974 749.999,155.272 "/> <polygon fill="#F9A198" points="49.065,20.953 158.688,134.504 225.712,71.991 159.715,21.888 "/> <polygon fill="#FFF276" points="31.374,35.907 25.4,146.839 59.41,233.103 146.309,159.271 "/> <polygon fill="#9898ED" points="237.916,95.72 167.5,157.401 251.111,233.103 276.233,134.504 "/> <polygon fill="#7BD6B3" points="160.714,177.962 247.064,259.271 179.581,334.037 74.364,248.056 "/> <polygon fill="#F9A198" points="284.065,144 264.065,265.813 339.719,334.037 346.395,219.168 "/> <polygon fill="#FFF276" points="256.724,285.439 198.904,340.789 325.065,343 "/> <polygon fill="#9898ED" points="183.383,363 259.9,412.327 334.112,357.664 "/> <polygon fill="#7BD6B3" points="339.785,379.495 269.064,431.149 284.43,493.43 343.395,429.799 "/> <polygon fill="#F9A198" points="251.065,442.799 109.307,543.887 217.044,552.633 258.065,507.406 "/> <polygon fill="#FFF276" points="163.149,376.667 233.142,421.84 93.247,530.406 86.235,443.122 "/> <polygon fill="#F9A198" points="698.254,20.953 588.631,134.504 521.606,71.991 587.604,21.888 "/> <polygon fill="#7BD6B3" points="716.945,35.907 722.918,146.839 688.908,233.103 602.009,159.271 "/> <polygon fill="#9898ED" points="510.403,95.72 580.818,157.401 497.207,233.103 472.085,134.504 "/> <polygon fill="#FFF276" points="587.604,177.962 501.254,259.271 568.738,334.037 673.954,248.056 "/> <polygon fill="#7BD6B3" points="463.253,144 483.253,265.813 407.6,334.037 400.924,219.168 "/> <polygon fill="#F9A198" points="490.595,285.439 548.414,340.789 422.254,343 "/> <polygon fill="#7BD6B3" points="563.936,363 487.418,412.327 413.207,357.664 "/> <polygon fill="#9898ED" points="585.169,376.667 515.178,421.84 655.071,530.406 662.083,443.122 "/> <polygon fill="#F9A198" points="407.846,379.495 478.565,431.149 463.2,493.43 404.235,429.799 "/> <polygon fill="#7BD6B3" points="497.565,442.799 639.323,543.887 531.586,552.633 490.565,507.406 "/> <polygon fill="#999999" points="382,487.5 390,346.5 381.651,177.963 367.592,172 358.5,341 361.5,477.5 371.5,553 "/> <polygon fill="#999999" points="315.641,65.942 341.692,70.859 360,164.411 366.559,154.723 352.184,60.777 304.086,48.959 297.543,104.887 338.517,127.359 335,87 325,87 323.503,104.18 308.681,98.906 "/> <polygon fill="#999999" points="445.145,46.964 396.217,63.008 380.98,160.25 386.5,165.75 404.653,71.093 430.604,68.229 438.414,99.992 423.286,105.549 422,88 412,88 409.116,127.357 449.529,106.028 "/> </svg>
11. How to make an SVG • If  you’re  confused  about  what   exactly  is  going  on  in  the  SVG,   it’s  okay.  It  looks  like  craziness.   • You  can  easily  inspect  the  SVG   elements  in  a  browser.  Once   you  know  what’s  going  on   where,  add  HTML  comments   for  your  reference,  or  even   better,  add  IDs/classes  for   manipulating  the  SVG  later. <svg id=“butterfly” ...> <g id=“back”> ... </g> <g id=“sections”> <polygon id=“sect_0” ...> <polygon id=“sect_1” ...> <polygon id=“sect_2” ...> ... </g> <g id=“body”> ... </g> </svg>
12. SVG tags to know TAG DESCRIPTION <svg> The  container  for  the  SVG <g> Container  for  subelements  of  the  SVG  (if  you  were  using  layers   in  your  drawing  program,  it  will  probably  put  all  the  shapes  in   <line> A  line  between  two  points <path> A  line  that  can  have  curves  and  more  than  two  points <circle>,  <ellipse>,   <rect>,  <polygon> Some  basic,  self-­‐explanatory  shapes
13. Manipulating SVGs with jQuery Let’s  say  you  want  a  polygon
 to  turn  red  on  click… /* Polygons use the “fill” attribute to determine their color */ ! .red { fill: #f9a198; } Your  CSS $('polygon').click(function () { $(this).addClass('red'); }); You  might  think  your  jQuery  should  look   something  like  this… NO Do  not  fall  down  the  same   debugging  rabbit  hole  I  did.
14. Manipulating SVGs with jQuery Because  jQuery  hates  you
15. Manipulating SVGs with jQuery • To  add/remove  classes  with  SVG  elements,  you   will  need  to  use  .attr(‘class’,  ‘your-­‐class’)   and  .removeAttr(‘class’). $('polygon').click(function () { $(this).attr('class', 'red'); });
16. The End :3 Twitter:   @CaraHeacock   ! ! GitHub:   https://github.com/Caraheacock   ! Repos  on  my  GitHub  to  check  out  that  use  SVGs:   • “butterflies”  (Lydia  Butterfly  game)   • “caraheacock.github.io”  (my  portfolio  site)