SVG and CSS are besties

Best practices in preparing the SVG images used inline or in sprite images and how to easily style SVG images using CSS with a neat tip.

This is an addendum to this initial presentations: https://speakerdeck.com/olivierobert/managing-svg-images

Transcript

1. SVG and CSS are besties Olivier Robert August 15th, 2018
2. Introduction • Best practices in preparing the SVG images used inline or in sprite images • Helps in getting the most benefits from using SVG images • Addendum to the presentation “Managing SVG images”
3. Designers give this to developers The rendered image looks neat But if you look under the hood...
4. Designers give this to developers Tons of generated and unnecessary code. No thank you!
5. SVG make-over No more garbage code, only what is needed
6. Feels better already. But it can even be better-er.
7. SVG styling with ease • Enforce consistent naming • Enforce fixed width / height for all icons ◦ 32px is a good default ▪ 2x default font size (16px) ◦ Can be anything e.g. 16px, 48px • Enforce default color for all images e.g. black ◦ Consistency ◦ It does not matter which color as it will be replaced • Use SVGO to clean up SVG images
8. SVG styling with ease Introducing CSS currentColor value
9. SVG styling with ease https://codepen.io/olivierobert/pen/bjyBeK
10. SVG + CSS FTW!!!
11. Thanks! Contact Nimbl3 hello@nimbl3.com 399 Sukhumvit Road, Interchange 21 Klongtoey nua, Wattana Bangkok 10110 28C Stanley St, Singapore 068737 20th Floor, Central Tower 28 Queen's Road Central, Hong Kong nimbl3.com