svg with grunticon
TRANSCRIPT
SVG with Grunticonby Matt Vanderpol
Presented at SmashingConf SF 2016 Jam Session
Personally
Professionally
• Full Stack
• Custom WordPress themes
• Performance and Mobile
Overview
• SVG Rocks
• Grunticon Intro
• Examples
• Grunticon and Sass
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
Vector
Plain text
Swiss Army Chainsaw
Photo Credit: https://500px.com/photo/55320074/swiss-army-chainsaw-knife-by-christian-edgar-schmidt
Grunticon
• What?
• Who?
• How?
Setting Up• npm • grunt • svg files
Config Options of Note
cssprefix customselectors
corsEmbed enhanceSVG
compressPNG
Grunticon Use Cases
• Background Images
• Foreground Images
BackgroundDefault usage
CSS background image No default height Works w/out JS
ForegroundInject SVG into the markup
Allows styling Requires JavaScript
Examples
• Color Change
• Animation
AnimationWith JavaScript
With CSS
Something Missing…
• Hover effect
• Semantic classnames
Grunticon and Sass - Easy Right?
• Generate Sass files
• Most bits in place
Photo Credit: https://www.flickr.com/photos/mattijn/4419973636/
Challenges
• Individual Sass files for “variable stacks”
• Preview template to pull it together
• Differentiate variable types
• Helpers to get “sprite” data
Grunticon SVG via Sass!
• When it’s working it’s great
• Modernizr for svg support
Pitfalls
• File protocol
• Height/width in SVG
• Need hooks in SVG for styling
• Class Manipulation
• MinificationPhoto Credit: https://www.flickr.com/photos/7951075@N03/3639157564/
Recap
• SVG is a great image format
• Grunticon makes it easy
• A few tweaks make it better
Icons
• https://pixelbuddha.net/freebie/25-design-and-shapes-icons
• https://useiconic.com/open
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