This document discusses using SVG icons on websites. It covers different formats for icons like PNG and icon fonts, then focuses on SVG. SVG is explained as scalable vector graphics in XML format that can contain paths and shapes. Benefits of SVG include scalability, performance, accessibility, and ability to style with CSS. The document demonstrates exporting SVG from tools, optimizing with SVGO, embedding SVG in HTML and CSS, using SVG icon systems, and animating SVG with libraries like GreenSock. Resources for further SVG information and use are provided.
14. Scalable Vector Graphics
• XML based
• Made up of scalable vector shapes and paths.
• Lines, Circles, Polygons, Ellipse, etc.
• Can be used on websites
20. Why use SVG
• Scales better because it’s vector based
• More performant than jpeg, png, and icon fonts.
• Accessible
• Can be used on the web in 3 different ways.
• Can be styled and animated using CSS and JavaScript
• And so much more!
30. Why use SVG
• Scales better because it’s vector based
• More performant than jpeg, png, and icon fonts.
• Accessible
• Can be used for the web in 3 different ways.
• Can be styled and animated using CSS and JavaScript
• And so much more!
49. SVG Animation - GreenSock
• Great Browser Support
• Doesn’t rely on other library
• Support and documentation
• Funded
• Used by 2.5 million sites
• https://greensock.com/svg-tips
50. So much more with SVG
• Banners
• DataVisuals
• Illustrations
• Infographics
• And More!
52. Resources
• Mega List of SVG Information
https://css-tricks.com/mega-list-svg-information/
• SVG on the Web - A Practical Guide
https://svgontheweb.com/
• SVG - Mozilla Developer Network (MDN)
https://developer.mozilla.org/en-US/docs/Web/SVG