SVG 101
0 likes•711 views
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.
SVG 101
- 4. 1) PNG
- 5. 2) Sprites
- 6. 3) Retina
- 7. 4) Sprites with Retina
- 8. 5) Icon Font Libraries
- 9. 6) Custom Icon Fonts
- 10. 7) SVG
- 11. 8) SVG Icon Systems
- 12. 1. PNG 2. Sprites 3. Retina 4. Retina Sprites 5. Icon Font Libraries 6. Custom Icon Fonts 7. SVG (3 different ways) 8. SVG Icon System
- 14. Scalable Vector Graphics • XML based • Made up of scalable vector shapes and paths. • Lines, Circles, Polygons, Ellipse, etc. • Can be used on websites
- 15. Applications
- 16. Video of exporting on AI and Sketch
- 17. Video of exporting on AI and Sketch
- 18. Code Editors
- 19. Video of editing SVG with Sublime
- 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!
- 21. Vector vs Pixel
- 22. When to use SVG
- 23. Not for Raster Graphics (Photographs)
- 24. SVG is only used by 4.0% of all Websites Source: https://w3techs.com/technologies/details/im-svg/all/all
- 25. SVG was around since 2001
- 26. Browser Support
- 27. PSD
- 28. Sketch
- 29. Comfortable using PNGs and Icon Fonts
- 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!
- 31. No more excuses… start using SVGs!
- 32. Using SVG on the Web
- 33. Optimize - SVGO • Grunt-svgmin / Gulp-svgo https://github.com/sindresorhus/grunt-svgmin https://github.com/corneliusio/gulp-svgo • svgo-compressor - Sketch plugin https://github.com/BohemianCoding/svgo-compressor • SVG-NOW - Illustrator plugin: https://github.com/davidderaedt/SVG-NOW • SVGO GUI https://github.com/svg/svgo-gui
- 34. Video of using SVGO GUI
- 35. Using SVG on the Web • As <img> tag in HTML • Inline in HTML • As CSS background image
- 36. As <img> tag
- 37. Inline in HTML
- 38. As CSS background image
- 39. Adding SVG through WordPress Editor • Core Trac Ticket https://core.trac.wordpress.org/ticket/24251 • SVG Support plugin https://wordpress.org/plugins/svg-support/ • Code Snippet (functions.php) https://css-tricks.com/snippets/wordpress/allow-svg- through-wordpress-media-uploader/
- 40. SVG Icon System
- 41. My Workflow 1. Export SVG 2. Upload to IcoMoon for symbol-defs.svg file https://icomoon.io/ 3. PostCSS SVG Plugin (Using Grunt) https://github.com/jonathantneal/postcss-svg 4. Example usage: background-image: url('images/icons/symbol-defs.svg#icon-menu');
- 44. SVG Sprites Task Runners • Gulp: gulp-svg-sprite https://github.com/shakyShane/gulp-svg-sprites • Grunt: grunt-svg-sprite https://github.com/jkphl/grunt-svg-sprite
- 45. SVG and CSS
- 46. SVG and CSS • SVG presentation attributes are becoming CSS properties • alignment-baseline, baseline-shift, clip, clip-path, clip-rule, color, color-interpolation, color- interpolation-filters, color-profile, color-rendering, cursor, direction, display, dominant- baseline, enable-background, fill, fill-opacity, fill-rule, filter, flood-color, flood-opacity, font- family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, glyph- orientation-horizontal, glyph-orientation-vertical, image-rendering, kerning, letter-spacing, lighting-color, marker-end, marker-mid, marker-start, mask, opacity, overflow, pointer-events, shape-rendering, stop-color, stop-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, text-decoration, text-rendering, unicode-bidi, visibility, word-spacing, writing-mode • CSS animation is finally starting to make sense in the context of SVG
- 47. SVG and CSS
- 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!
- 51. Examples
- 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
- 53. Thank You Email: [email protected] Twitter: @SMY315