Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

So then this happened…

Slide 4

Slide 4 text

So now this presentation is happening

Slide 5

Slide 5 text

Anyway…

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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!

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

SVG tags to know TAG DESCRIPTION The  container  for  the  SVG Container  for  subelements  of  the  SVG  (if  you  were  using  layers   in  your  drawing  program,  it  will  probably  put  all  the  shapes  in   A  line  between  two  points A  line  that  can  have  curves  and  more  than  two  points ,  ,   ,   Some  basic,  self-­‐explanatory  shapes

Slide 13

Slide 13 text

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.

Slide 14

Slide 14 text

Manipulating SVGs with jQuery Because  jQuery  hates  you

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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)