What I Learned About SVG

297d4a4b165eb79b7e341645a05c70d6?s=47 Rachel Ober
February 21, 2014
Programming
0
19

What I Learned About SVG

297d4a4b165eb79b7e341645a05c70d6?s=128

Rachel Ober

February 21, 2014
Tweet

Want more?

297d4a4b165eb79b7e341645a05c70d6?s=48 rachelober
0
26
297d4a4b165eb79b7e341645a05c70d6?s=48 rachelober
0
51
297d4a4b165eb79b7e341645a05c70d6?s=48 rachelober
1
28
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
1
100
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
1
55
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
0
60
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
4
120
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
3
140
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
2
210
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
2
390
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
1
110
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
4
200

Transcript

  1. 1.

    What I learned about SVG In 5 minutes or less

  2. 2.

    Scalable Vector Graphics

  3. 3.

    Goal: Provide both a retina and non-retina solution for our

    graphic needs.
  4. 4.
    None
  5. 5.

    Product Design

  6. 6.
    None
  7. 7.

    120 Lines of Code

  8. 8.

    120 Lines of Code - 11KB

  9. 9.

    96 Lines of Code - 9KB

  10. 10.

    96 Lines of Code - 9KB

  11. 11.
    None
  12. 12.

    5 Paths - 8KB

  13. 13.

    5 Paths - 8KB dramatization of actual events

  14. 14.

    #svg-full-logo { height: 26px; width: 49px; path { fill: #777;

    } } To Manipulate Inline SVG with CSS
  15. 15.
    None
  16. 16.
    None
  17. 17.

    Tips Tricks Gotchas • CSS can only be used on

    an inline SVG, not an SVG embedded as an <img> • There’s a new Rails Helper for that! • Need to make sure it has a view port size • Add a class for each path/shape • Preferably add an id for the main SVG