Download to read offline
Uploaded byMatt Vanderpol
SVG with Grunticon
Matt Vanderpol presented on using SVG and Grunticon for images. Grunticon allows using SVG images as CSS background images and injecting them into HTML markup. It has options like changing image colors and adding animations. Using Grunticon with Sass requires generating individual Sass files and helpers to style sprites. Potential issues include file protocol errors, needing hooks in SVG for styling, and minification bugs. In summary, Grunticon makes using SVG images easier but some tweaks may be needed for more advanced styling and integration with other tools like Sass.
SVG with Grunticon
- 1. SVG with Grunticon byMatt Vanderpol Presented at SmashingConf SF 2016 Jam Session
- 2.
- 3. Professionally • Full Stack •Custom WordPress themes • Performance and Mobile
- 4. Overview • SVG Rocks •Grunticon Intro • Examples • Grunticon and Sass
- 5. SVG Intro/Review • Vector •Plain text • Swiss Army Image Format By W3C, CC BY 2.5, https://commons.wikimedia.org/w/index.php?curid=1895005
- 6.
- 7.
- 8. Swiss Army Chainsaw PhotoCredit: https://500px.com/photo/55320074/swiss-army-chainsaw-knife-by-christian-edgar-schmidt
- 9.
- 10. Setting Up • npm •grunt • svg files
- 11.
- 12. Grunticon Use Cases •Background Images • Foreground Images
- 13. Background Default usage CSS backgroundimage No default height Works w/out JS
- 14. Foreground Inject SVG intothe markup Allows styling Requires JavaScript
- 15. Examples • Color Change •Animation
- 16. Color Change Screen Capturefrom http://www.grunticon.com
- 17.
- 18. Something Missing… • Hovereffect • Semantic classnames
- 19. Grunticon and Sass- Easy Right? • Generate Sass files • Most bits in place Photo Credit: https://www.flickr.com/photos/mattijn/4419973636/
- 20. Challenges • Individual Sassfiles for “variable stacks” • Preview template to pull it together • Differentiate variable types • Helpers to get “sprite” data
- 21. Grunticon SVG viaSass! • When it’s working it’s great • Modernizr for svg support
- 23. Pitfalls • File protocol •Height/width in SVG • Need hooks in SVG for styling • Class Manipulation • Minification Photo Credit: https://www.flickr.com/photos/7951075@N03/3639157564/
- 24. Recap • SVG isa great image format • Grunticon makes it easy • A few tweaks make it better
- 25.
- 26. Resources • https://github.com/bookwyrm/ grunticon-example • http://www.grunticon.com/ •https://css-tricks.com/inline- svg-grunticon-fallback/ • https://sarasoueidan.com/tags/ svg/index.html • https://github.com/ filamentgroup/gulpicon Matt Vanderpol @bookwyrm