Managing SVG images

Process improvements on how to manage and use SVG images in web applications. Also shows setup details and gotchas.

Transcript

1. Managing SVG images Olivier Robert September 8th 2017
2. Intro • Improve our process to manage and use SVG images in web projects • Show setup details and gotchas
3. Now • Shell script ◦ Rely on NPM package “svg-sprite” ◦ 1 script per sprite image • Outputs ◦ 1 stylesheet ◦ 1 SVG sprite • Use with a Rake task (optional, Rails project only)
4. Now ...a very long script
5. Issues • Sizing in “rem“ does not work sometimes, have to fallback to “pixel” ⇒ Issue in the generated stylesheet due to % sizing • Duplication of icons for each color
6. New Process Inline SVG
7. New Process • Webpack plugin • Outputs: ◦ 1 SVG sprite ◦ No stylesheet
8. New Process • Use SVG tag • Use xlink:href with an ID ⇒ No SVG code • Need to define the viewbox to match the icon size
9. New Process • Insert the sprite image a the stop of the body ⇒ Needs to be defined first • Use HTML attribute “hidden” to hide it
10. Profit Single styled SVG image
11. New Process
12. Things to know • Can access any part of the SVG as CSS selectors: ◦ “<path/>” ◦ “<g/>” ⇒ Great for animation • Old version of IE still requires a polyfill: SVG4everybody ⇒ There is a webpack plugin
13. Things to know Requires to clean up the output of some SVG files
14. Thanks! Contact Nimbl3 hello@nimbl3.com 399 Sukhumvit Road, Interchange 21 Klongtoey nua, Wattana Bangkok 10110 20th Floor, Central Tower 28 Queen's Road Central, Hong Kong nimbl3.com