Intro to SVGs a.k.a.  This  Presentation  Is  a  Thing  That   Is  Happening,  I  Guess By  Cara  Heacock 

First of all, why the subtitle? I’m  not  sure  you  understand  how  haphazardly  this  happened… 

So then this happened… 

So now this presentation is happening 

Anyway… 

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.) 

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 

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! 

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 

How to make an SVG • It  will  spit  out   some  craziness  to   plug  in  your   markup,  and   you’re  good. 

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 tags to know TAG DESCRIPTION

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. 

Manipulating SVGs with jQuery Because  jQuery  hates  you 

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'); }); 

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)