Leaving Pixels Behind:
A VECTOR WORKFLOW FOR DESIGNERS
vv
filament group
TODD PARKER
everyone
MAKE THE WEB WORK FOR
TOPICS
vector
WHY GO
THIS.
OLDEST SCHOOL
SPRITE LIKE A BOSS
RETINA-IZED
“Samsung’s 2014 phones will feature 560 PPI displays – 880 PPI in 2015…”
http://www.extremetech.com/computing/170451-samsungs-2014-phones-will-feature-560-ppi-displays-880-ppi-in-2015-foldable-in-2016
WELP
1x...2x...6x...12x...
icon fonts
THE GENIUS HACK
ICON-O-MATIC
SINGLE COLOR
NO LIMITS !!!
UH-OH.
NO @FONT-FACE SUPPORT
Opera Mini - 261 million
Nokia XPress browser - 70 million
Blackberry 4 & 5 - stock browser - 20 million [1]
Android 2.1 - stock browser - 10 million [2]
Windows Phone 7 - 7.8 - 10-15 million [3]
Android 4 - UCBrowser
Symbian 10 - Nokia Browser 8.3.1.4
WebOS - stock browser
Android 2.1 - Dolphin
~370 million
devices don’t � support @font-face
700 million
Total iOS devices � worldwide
1 billion
Total Android � devices worldwide
YIKES
ICON FONTS NEED A FALLBACK
CHRIS LIKES SVG
sIFR...cufón...
A TRANSITIONAL TECHNIQUE
svg
THE JOY OF
FULL COLOR VECTORS
CSS STYLING
RESPONSIVE
OPTICAL CORRECTION
INTERACTIVE
ILLUSTRATIONS
VISUALIZATIONS
INFOGRAPHICS
MAPS
BITMAPS
http://www.smashingmagazine.com/2013/06/02/clown-car-technique-solving-for-adaptive-images-in-responsive-web-design/ Image: http://britandgrit.com/?p=4589
ETC.
ICON SETS GALORE
Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C)
...since 1999.
SVGs ARE TEXT FILES
<svg>
<rect width="100%" height="100%" fill="blue" />
<circle cx="150" cy="100" r="80" fill="yellow" />
</svg>
BASIC SHAPES
<svg>
<g id="foo">
<path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
</g>
</svg>
PATHS + GROUPS
<svg class="icon-twitter">
<use xlink:href="#icon-twitter"></use>
</svg>
<svg class="icon-twitter footer">
<use xlink:href="#icon-twitter"></use>
</svg>
.footer {
fill: red;
}
CSS YOUR SVGs
SVG IS MASSIVE
FILTERS & EFFECTS
Apply SVG filters & effects to vectors or bitmaps
BLEND MODES
PHOTOSHOP, BASICALLY
LEARN HERE
caniuse?
SOLD, BUT
IE9+
Chrome 14+
Safari 4+
Firefox 3.6+
Opera 15+
Opera Mobile 12+
iOS 3+
Android 4.0+
BlackBerry 10
SUPPORTS SVG
NOPE
IE 6, 7, 8
Android 1-2.3
Opera Mini*
* Mini actually supports SVG but has really bad rendering bugs on 2x displays
CLEARLY, WE NEED FALLBACKS
svg or bitmap?
HOW TO DECIDE:
IS IT A PHOTO?
THIS IS 414kb
HOW COMPLEX IS THE ARTWORK?
VISUAL EFFECTS?
DEFINITELY USE SVG
USE BITMAP
TEST & DECIDE
svg file sizes
UNDERSTANDING
FILE SIZE COMPARISON
http://www.blugraphic.com
2x PNG 8
SVG
12.6k
13.4k
BECAUSE SVGS ARE TEXT...
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="18.398px" height="16px">
<g>
<path fill="#468100" d="M10.993,14.72H8.541L4.04,9.354H1.884v5.366h-1.891V1.22h3.663c0.812,0,1.497,0.04,2.048,0.127C6.253,1.43,6.775,1.629,7.271,1.938C7.765,2.243,8.16,2.631,8.45,3.105c0.288,0.48,0.432,1.072,0.432,1.778c0,0.991-0.264,1.821-0.793,2.484C7.565,8.03,6.842,8.523,5.939,8.844L10.993,14.72z M6.908"/>
</g>
<polygon fill="#468100" points="17.426,7.916 16.286,7.916 16.051,7.916 16.051,14.523 11.761,14.523 11.761,7.916 11.049,7.916
9.662,7.916 9.414,7.916 13.887,1.418 18.398,7.916 "/>
</svg>
...THEY CAN BE GZIP’d
https://www.youtube.com/watch?v=SWBkneyTyPU
SVGs CAN COMPRESS 60-80%
http://encode.ru/threads/1889-gzthermal-pseudo-thermal-view-of-Gzip-Deflate-compression-efficiency
BITMAPS, NOT SO MUCH
http://encode.ru/threads/1889-gzthermal-pseudo-thermal-view-of-Gzip-Deflate-compression-efficiency
FILE SIZE COMPARISON
http://www.blugraphic.com
2x PNG 8
SVG
12.6k
13.4k
FILE SIZE COMPARISON
http://www.blugraphic.com
2x PNG 8
SVG
3.8k GZIPPED
12.6k
+ IS IT A PHOTO?
+ ILLUSTRATION COMPLEXITY
+ VISUAL EFFECTS / LEVEL OF REALISM
+ FILE SIZE OF GZIP’D SVG vs. 2X BITMAP
VECTOR OR BITMAP?
vectors
CREATING
POPULAR TOOLS
do’s and don’ts
ILLUSTRATOR
USE FILLS, GRADIENTS, STROKES
OPACITY: OBJECTS + GRADIENT STEPS
ROUNDED CORNERS
EFFECT
LIVE CORNERS
EFFECT > PATH & TRANSFORM
ILLUSTRATOR
OUTPUT
AVOID 3D EFFECTS
ILLUSTRATOR
OUTPUT
13k
0.5k
AVOID DROP SHADOWS
RASTERIZED SHADOW
EMBEDDED BITMAP
ADDS ~300 bytes
GZIP ME
“FAUX” SHADOW
NO OPACITY OR BLUR!
“FLAT” SHADOW
AVOID BLUR
64k EMBEDDED BITMAP
Use SVG’s gaussian blur filter for this.
OUTLINE TEXT
<text font-family="'SourceSansPro-Bold'" font-size="10">?</text>
IF NOT OUTLINED:
PATHFINDER > UNITE
ILLUSTRATOR
SVG OUTPUT
AVOID BLEND MODES
RECREATE with PATHFINDER > INTERSECT
Select objects > copy > paste in place > apply intersect
<circle fill="#EC008B" cx="23.5" cy="42.7" r="18.2"/>
<path fill="#6F2D8F" d="M32,40.5c1.5,0.4,3.1,0.7,4.8,0.7c9.3,0,16.9-7,18-16c-1.5-0.4-3.1-0.7-4.8-0.7C40.7,24.5,33.1,31.5,32,40.5z"/>
<path fill="#71323E" d="M41.5,40.4c-0.1-0.5-0.1-1-0.3-1.5c0-0.1,0-0.1,0-0.2c-0.1-0.5-0.2-0.9-0.4-1.4c0-0.1-0.1-0.2-0.1-0.4c-0.1-0.4-0.3-0.8-0.4-1.2c-0.1-0.2-0.2-0.5-0.3-0.7c-0.1-0.3-0.2-0.5-0.4-0.8c-0.2-0.5-0.5-0.9-0.8-1.3c0,0,0,0,0-0.1c-0.6-0.9-1.3-1.8-2-2.6c-0.8,0.8-1.4,1.7-2,2.6c0,0,0,0,0,0c-0.3,0.4-0.5,0.9-0.8,1.3c-0.1,0.2-0.2,0.5-0.4,0.8c-0.1,0.2-0.2,0.5-0.3,0.7c-0.2,0.4-0.3,0.8-0.4,1.2c0,0.1-0.1,0.2-0.1,0.4c-0.1,0.5-0.3,0.9-0.4,1.4c0,0.1,0,0.1,0,0.2c-0.1,0.5-0.2,1-0.3,1.5c0,0,0,0.1,0,0.1c0.7,0.2,1.4,0.3,2,0.4c0.2,0,0.4,0.1,0.6,0.1c0.2,0,0.5,0.1,0.7,0.1c0.5,0,1,0.1,1.5,0.1s1,0,1.5-0.1c0.2,0,0.5,0,0.7-0.1c0.2,0,0.4-0.1,0.6-0.1c0.7-0.1,1.4-0.3,2-0.4C41.5,40.4,41.5,40.4,41.5,40.4z"/>
SIMPLER SHAPES FTW
PATHFINDER > INTERSECT
OPTIMIZE: PATH > SIMPLIFY
<path fill="#71323E" d="M43.7,49.5c-0.5-3.8-2.2-7.3-4.8-10.1c-2.6,2.8-4.3,6.4-4.8,10.2c3.1,0.8,6.4,0.8,9.5,0C43.7,49.6,43.7,49.6,43.7,49.5C43.6,49,43.7,49.6,43.7,49.5z"/>
<path fill="#71323E" d="M41.5,40.4c-0.1-0.5-0.1-1-0.3-1.5c0-0.1,0-0.1,0-0.2c-0.1-0.5-0.2-0.9-0.4-1.4c0-0.1-0.1-0.2-0.1-0.4c-0.1-0.4-0.3-0.8-0.4-1.2c-0.1-0.2-0.2-0.5-0.3-0.7c-0.1-0.3-0.2-0.5-0.4-0.8c-0.2-0.5-0.5-0.9-0.8-1.3c0,0,0,0,0-0.1c-0.6-0.9-1.3-1.8-2-2.6c-0.8,0.8-1.4,1.7-2,2.6c0,0,0,0,0,0c-0.3,0.4-0.5,0.9-0.8,1.3c-0.1,0.2-0.2,0.5-0.4,0.8c-0.1,0.2-0.2,0.5-0.3,0.7c-0.2,0.4-0.3,0.8-0.4,1.2c0,0.1-0.1,0.2-0.1,0.4c-0.1,0.5-0.3,0.9-0.4,1.4c0,0.1,0,0.1,0,0.2c-0.1,0.5-0.2,1-0.3,1.5c0,0,0,0.1,0,0.1c0.7,0.2,1.4,0.3,2,0.4c0.2,0,0.4,0.1,0.6,0.1c0.2,0,0.5,0.1,0.7,0.1c0.5,0,1,0.1,1.5,0.1s1,0,1.5-0.1c0.2,0,0.5,0,0.7-0.1c0.2,0,0.4-0.1,0.6-0.1c0.7-0.1,1.4-0.3,2-0.4C41.5,40.4,41.5,40.4,41.5,40.4z"/>
BEFORE - 1.75k file
AFTER - 1.18k file
WHAT WORKS
THINGS TO AVOID
* SKETCH IS SMARTER
SVG Filters for blur, shadow, reflection
FILTERS, NOT BITMAPS
exporting
ILLUSTRATOR
NAMED LAYERS >> ID’s
<svg version="1.1" id="help">
<g id="q-circle">
<g>
<circle fill="#E5E5E5" cx="304.4" cy="396.1" r="19.2"/>
</g>
<g>
<circle fill="#FFFFFF" cx="304.4" cy="394.1" r="19.2"/>
</g>
</g>
</svg>
START WITH A NEW AI FILE
ARTBOARDS FOR EACH ICON
Icons from http://smallicons.net/
SAVE A COPY...
WAT
WAT
JUST DO THIS
AVOID BITMAPS ANYWAY
PRE-OUTLINE
“1” IS ENOUGH
PRESENTATION ATTR
UNCHECK ALL �THIS GARBAGE
UNCHECK
UNCHECK �OMITS HEIGHT + WIDTH
SVG 1.1
UTF-8
ALL DONE!
OPTIONAL: REMOVE PREFIXES
READYMADE ICONS - ICOMOON.IO
EASY PEAS
fallbacks
AUTOMATING
BEHOLD, THE GRUMPICON!
TAKER OF SVGs
1x PNG BITMAPS BASED ON EACH SVG
MAKER OF FALLBACKS
GRUMPI
WHAT’S INSIDE?
PREVIEW FILE
SVG SUPPORT, INLINE SVG
PNG FALLBACK, DATA URI CSS
PNG FALLBACK, SEPARATE IMAGES
3 SUPPORT TIERS
IE9+, Chrome 14+, Safari 4+, Firefox 3.6+, Opera 15+, iOS 3+, Android 4.0, Opera Mobile, BB Playbook
IE8, Android 1.x-2.x, Opera Mobile/Mini
IE6-7, Non-JS environments
SVG SUPPORT, INLINE SVG
PNG FALLBACK, DATA URI CSS
PNG FALLBACK, SEPARATE IMAGES
AUTO-GENERATED
IE9+, Chrome 14+, Safari 4+, Firefox 3.6+, Opera 15+, iOS 3+, Android 4.0, Opera Mobile, BB Playbook
IE8, Android 1.x-2.x, Opera Mini
IE6-7, Non-JS environments
SVG SUPPORT, INLINE SVG
PNG FALLBACK, DATA URI CSS
PNG FALLBACK, SEPARATE IMAGES
ICON CSS
SVG SUPPORT, INLINE SVG
PNG FALLBACK, DATA URI CSS
PNG FALLBACK, SEPARATE IMAGES
ICON CSS
We embed the SVGs as plain text with whitespace removed so GZIP can work efficiently.
This CSS file is essentially a “text sprite” = one request for all the SVG data and style rules that can be cached by the browser.
SVGs ARE PLAIN TEXT, NOT BASE 64
.icon-icon_flag {
background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2017.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0D%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20width%3D%2227px%22%20height%3D%2232px%22%20viewBox%3D%220%200%2027%2032%22%20enable-background%3D%22new%200%200%2027%2032%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cg%20id%3D%22flag%22%3E%0D%0A%09%3Cpath%20fill%3D%22%23344E5C%22%20d%3D%22M2%2C0v32H0V0H2z%22/%3E%0D%0A%09%3Cpath%20fill%3D%22%23CC4E44%22%20d%3D%22M14%2C5h13v19H14C14%2C24%2C14%2C5%2C14%2C5z%22/%3E%0D%0A%09%3Cpath%20fill%3D%22%23D8B863%22%20d%3D%22M17%2C5v3h10V5H17z%20M14%2C24h13v-3H14V24z%22/%3E%0D%0A%09%3Cpath%20fill%3D%22%23A28A4B%22%20d%3D%22M14%2C21h3l-3%2C3V21z%22/%3E%0D%0A%09%3Cpath%20fill%3D%22%23E2584C%22%20d%3D%22M2%2C2h15v19H2V2z%22/%3E%0D%0A%09%3Cpath%20fill%3D%22%23F1CD6F%22%20d%3D%22M2%2C2v3h15V2H2z%20M2%2C21h15v-3H2V21z%22/%3E%0D%0A%3C/g%3E%0D%0A%3C/svg%3E%0D%0A');
background-repeat: no-repeat;
}
Y U NO SPRITE?
http://jkphl.is/projects/iconizr/
COLOR VARIATIONS
SVGs PER COLOR
.color-orange { fill: #F38316; }
.color-red { fill: #DC0014; }
.color-blue { fill: #0587C1; }
.color-green { fill: #00A14B; }
Make multiple SVGs for each color to support fallback generation and �let GZIP do its thing.
search-orange.svg
search-red.svg
search-blue.svg
search-green.svg
GRUNTICON COLOR OPTION
search.colors-DC0014-0587C1-00A14B.svg
GRUNTICON COLOR OPTION
search.colors-error-quiet-success.svg
CONTROL VIA ARTBOARD NAMING
SVG FILTERS ARE TRICKY*
* We’re working on it.
use grunt
FORGET GRUMPI
COMMAND LINE FTW
READ THIS
THEN THESE
GRUNT TASK
grunt.registerTask('icons', [
'chmod:writeable',
'clean:grunticon',
'copy:grunticon',
'svgmin',
'grunticon',
'chmod:readonly'
]);
VECTOR WORKFLOW
> grunt icons
<code>
WORKING IN
using grunticons
TWO EASY STEPS
1. ADD CSS LOADER TO <HEAD>
<head>
<!-- Unicode CSS Loader: place this in the head of your page -->
<script>
/* grunticon Stylesheet Loader | https://github.com/filamentgroup/grunticon | (c) 2012 Scott Jehl, Filament Group, Inc. | MIT license. */
window.grunticon=function(e){if(e&&3===e.length){var t=window,n=!!t.document.createElementNS&&!!t.document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect&&!!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1"),A=function(A){var o=t.document.createElement("link"), r=t.document.getElementsByTagName("script")[0];o.rel="stylesheet",o.href=e[A&&n?0:A?1:2],r.parentNode.insertBefore(o,r)},o=new t.Image;o.onerror=function(){A(!1)}, o.onload=function(){A(1===o.width&&1===o.height)},o.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="}};
grunticon( [ "[YOUR PATH HERE]/icons.data.svg.css", "[YOUR PATH HERE]/icons.data.png.css", "[YOUR PATH HERE]/icons.fallback.css" ] );</script>
<noscript><link href="[YOUR PATH HERE]/icons.fallback.css" rel="stylesheet"></noscript>
</head>
2. USE LIKE A TYPICAL BG IMAGE
<button class="btn icon icon-flag">I Love Vectors</button>
content <img>
USING SVG
LOGO IS CONTENT, NOT DECORATION
EXPORT SVG + PNG VERSIONS
IMG + ONERROR
<img src="logo.svg" onerror="this.src=star.png;this.onerror=null;">
DOWNSIDE: The SVG will be requested in all browsers, regardless of support
PICTUREFILL ALTERNATIVE
<picture>
<source type="image/svg+xml" srcset="logo.svg">
<img srcset="logo.png" alt="...">
</picture>
SVG IS THE � FUTURE.
ALL GOOD GIFS COURTESY OF @BEEP
vector
DON’T FEAR THE
toddmparker
filamentgroup.com
THANKS.