What I Learned About SVG

Transcript

1. What I learned about SVG In 5 minutes or less
2. Scalable Vector Graphics
3. Goal: Provide both a retina and non-retina solution for our graphic needs.
5. Product Design
7. 120 Lines of Code
8. 120 Lines of Code - 11KB
9. 96 Lines of Code - 9KB
10. 96 Lines of Code - 9KB
12. 5 Paths - 8KB
13. 5 Paths - 8KB dramatization of actual events
14. #svg-full-logo { height: 26px; width: 49px; path { fill: #777; } } To Manipulate Inline SVG with CSS
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