How to start with svg icons

Lightning Talk by Khrystyna Skvarok, Front-End Developer at Innocode, about How to start with svg icons. During PizzaWine FrontEnd Party, Lviv, 18.03.2016

Transcript

1. LET’S COOK SVG ICONS Khrystia Skvarok @barvysta
2. GREAT DEBATE: ICON FONT VS SVG INLINE
3. Advantages resizable without losing quality, extra sharp on retina displays
4. The same CSS control as with a font + control individual parts of a multi-part icon + use SVG-specific CSS stroke property + animation! Better control
5. The icons are inserted via pseudo element, and it depends on line-height, vertical-align, letter-spacing, word-spacing; SVG is just an element with the width and height you set Much less efforts
6. Font icon is a pseudo element on an empty <span> Semantic SVG was designed to be used as image.
7. HUNGRY? 5 minutes more, please :)
8. SVG cares better about accessibility (screen readers and speech recognition tools) http://www.sitepoint.com/tips-accessible-svg/ VS Accessibility https://www.filamentgroup.com/lab/bulletproof_icon_fonts.html
9. Disadvantages 
 SVG is not supported in IE < 9
 Loading external SVG file is not supported in IE 9, 10,11, only Edge
10. LET’S COOK it!
11. Solutions • using the <img> tag • using background image
12. • using SVG <defs> and <symbol> Insert SVG into body and then display icons by the <use> tag http://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/
13. Keep SVG in separate file and reference the SVG symbols from it • SVG for Everybody; • svgxuse Polyfill for IE 9,10,11:
14. Ready to use? • grunt-svgstore, grunticon; • gulp-svg-sprite; • SVG icons in React; • Fontello; • IcoMoon.
15. Finally we can go eat! 
 Thanks for your patience ;)