Slide 1
Slide 1 text
No content
Slide 2
Slide 2 text
CHRIS COYIER
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
mycockpit.club
Slide 7
Slide 7 text
2014
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
SLIDE TO SEEM TIMELY AND RELEVANT
Slide 13
Slide 13 text
13.9K
Slide 14
Slide 14 text
13.9K
13.9K
13.9K
13.9K
Slide 15
Slide 15 text
Sharp at any size or resolution
Small in file size
SVG is
Slide 16
Slide 16 text
Styleable & Responsive - you can apply CSS
Scriptable - shapes can be in the DOM
Systematic - easy to build an icon system
Animateable - in many comfortable ways
Interactive - links! hovers! games!
Accessible - in all the right ways
SVG is
Slide 17
Slide 17 text
Big Promises / Can’t Use
Slide 18
Slide 18 text
Nope. You can use SVG now
and it’s pretty dang easy.
Slide 19
Slide 19 text
Well-supported
Slide 20
Slide 20 text
Even if you need to go deeper, it’s not
that bad. We’ll get into that in a bit.
Slide 21
Slide 21 text
HEY
that looks like
HTML
(It’s XML)
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
SVG syntax can be learned!
Unlike any other image format.
(You don’t “learn” JPG, unless you’re like Rain Man.)
Slide 24
Slide 24 text
SVG can be made from
essentially anything “vector”.
.eps / .pdf / .ai / .whatever
open in Illustrator, Save As .svg
Slide 25
Slide 25 text
“Scaleable Vector Graphics”
SVG can be made from
essentially anything “vector”.
Slide 26
Slide 26 text
SVG will never replace
raster graphics.
Slide 27
Slide 27 text
Rasterfarian GET IT?!
(This image would be very bad at being vector.)
Slide 28
Slide 28 text
wpapcommunity.com/site/index.php/gallery/musisi-jazz/bob-marley-rastaman-2048
(This image would be very good at being vector.)
Slide 29
Slide 29 text
Todd Parker’s Chart
https://docs.google.com/presentation/d/1CNQLbqC0krocy_fZrM5fZ-YmQ2JgEADRh3qR6RbOOGk/edit#slide=id.p
Slide 30
Slide 30 text
94K
Slide 31
Slide 31 text
1.3MB
129K
Slide 32
Slide 32 text
How do you get
SVG to use?
Slide 33
Slide 33 text
1
Learn the SVG syntax and
hand-craft them.
Slide 34
Slide 34 text
Slide 35
Slide 35 text
Basic Shapes
Slide 36
Slide 36 text
2
Make your own images in a
vector editing program
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
(p.s. you can copy and paste SVG out of Illustrator CC)
Slide 39
Slide 39 text
Illustrator
$19.99 / month
Extremely robust
Lots of training/tutorials available
Slide 40
Slide 40 text
Sketch
$99
Modern take on design software
Great for web
Great exporting
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
WebCode
$39.99
Slide 43
Slide 43 text
iDraw
$24.99
Slide 44
Slide 44 text
Inkscape
Free
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
3
Go snag some vector stuff
off the internet.
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
• Adjust colors
• Change artboard size
• Remove cruft
• Save it
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
http://creativedroplets.com/export-svg-for-the-web-with-illustrator-cc/
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
How to Use SVG
LIKE, ON WEBPAGES YA TEAMSTERS
Slide 55
Slide 55 text
SVG-as-img
HTML
Slide 56
Slide 56 text
SVG-as-img
HTML
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
.clover {
background: url(clover.svg);
}
Great way to support gradients in IE 9.
Compass can automatically do that for you.
www.sitepoint.com/getting-started-svg-gradients/
SVG as background-image
CSS
Slide 59
Slide 59 text
html5hub.com/#i.5cx78814yheb6u
Slide 60
Slide 60 text
No content
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
AddType image/svg+xml .svg .svgz
.htaccess
css-tricks.com/snippets/htaccess/serve-svg-correct-content-type/
content-type fix
Slide 63
Slide 63 text
Because SVG can be resized worry-free, you
probably will resize them most of the time.
http://blog.froont.com/9-basic-principles-of-responsive-web-design/
Slide 64
Slide 64 text
img {
max-width: 100%;
height: auto;
}
CSS
img[src$=".svg"] {
max-width: auto;
width: 100%;
height: auto;
}
Don’t get bigger than the
container element.
Also, don’t scale up.
Don’t get bigger than the
container element.
Scale up if you need to.
Slide 65
Slide 65 text
.horse {
background: url(horse.svg);
background-size: cover;
}
CSS
Firefox used to have an issue with blurring SVG when resizing, but not anymore since v24.
Fill the entire background of
this element no matter what.
Scale up if you have to.
Slide 66
Slide 66 text
You can put right up in
your , homegirl.
Inline SVG
Slide 67
Slide 67 text
No content
Slide 68
Slide 68 text
Three Big Advantages to
Using Inline SVG:
1) Shapes are in the DOM: CSS Styling! JavaScript stuff!
2) No additional HTTP Request (it’s like a data URI, but better)
3) You can use define once and use in multiple places
Slide 69
Slide 69 text
SVG Templating
Using inline as an icon system
Slide 70
Slide 70 text
Sites need a system for icons.
Slide 71
Slide 71 text
Slide 72
Slide 72 text
Slide 73
Slide 73 text
Slide 74
Slide 74 text
Slide 75
Slide 75 text
Slide 76
Slide 76 text
Slide 77
Slide 77 text
Slide 78
Slide 78 text
Slide 80
Slide 80 text
No content
Slide 81
Slide 81 text
No content
Slide 82
Slide 82 text
2014.cssconf.com
codepen.io/elrumordelaluz/pen/dhwLi
Slide 83
Slide 83 text
Even better, let’s get that block of SVG
out of the HTML entirely.
Slide 84
Slide 84 text
defs.svg
Slide 85
Slide 85 text
Slide 86
Slide 86 text
browser caching!
Slide 87
Slide 87 text
IE (any version) won’t allow with an external source.
Jonathan Neal has a fixer-upper script.
(XHRs in the guts so it’s like straight up inline SVG.)
Slide 88
Slide 88 text
Using instead of
is even better!
Slide 89
Slide 89 text
Icon of a clamdigger.
Slide 90
Slide 90 text
Icon of a clamdigger.
Or, do add viewBox if
you want/need
width: auto;
behavior.
Slide 91
Slide 91 text
.specific-icon {
background: url('svg.svg#svgView(viewBox(0,0,48,41))');
}
Fragment Identifiers
Fragment Identifiers
Slide 92
Slide 92 text
This is the idea of
SVG Sprites
Slide 93
Slide 93 text
No content
Slide 94
Slide 94 text
1) Vector (awesome)
2) No background-position craziness
3) More CSS control (i.e. SVG-specific, @media, etc)
4) All the other advantages of inline SVG (accessible, multiple links, scriptable)
5) Fallbacks are possible
It’s the same idea,
only way better because:
Slide 95
Slide 95 text
No content
Slide 96
Slide 96 text
codepen.io/chriscoyier/pen/mhaFy
Slide 97
Slide 97 text
No content
Slide 98
Slide 98 text
No content
Slide 99
Slide 99 text
No content
Slide 100
Slide 100 text
No content
Slide 101
Slide 101 text
No content
Slide 102
Slide 102 text
No content
Slide 103
Slide 103 text
No content
Slide 104
Slide 104 text
Media Queries in CSS + SVG
Slide 105
Slide 105 text
All this stuff is possible on inline SVG.
You get some advantages of SVG with ![]()
or
background-image, but not as many.
Slide 106
Slide 106 text
SVG vs. Icon Fonts
Cagematch!
Slide 107
Slide 107 text
THE ANCIENT PAST
Slide 108
Slide 108 text
Icon Font SVG
Vector yup (but anti-aliasing…) yup
CSS Control some (single color) better
Positioning die XXX murder good
Weird Failures* yup less
Semantics none / ::before better
Accessibility be very careful better,
Ease of use meh better
Browser Support IE 6+ IE 9+
Weird Failures: CORS/Fx + more?, CDN/network fail, Chrome non-active tab, no @font-face support (Opera
Mini, Nokia XPress, Blackberry 4&5, Android 2.1, Windows Phone 7, 7.8, 8?, more?)
Slide 109
Slide 109 text
Guess which one I like?
Tip: it’s the one that isn’t icon fonts.
Slide 110
Slide 110 text
If you’re going to use
icon fonts, read this.
It goes into how it can
be done perfectly* in
regards to accessibility,
browser support, and
failures.
*95%
Slide 111
Slide 111 text
No content
Slide 112
Slide 112 text
Build Tools
Don’t freak out.
Slide 113
Slide 113 text
No content
Slide 114
Slide 114 text
No content
Slide 115
Slide 115 text
No content
Slide 116
Slide 116 text
No content
Slide 117
Slide 117 text
Optimizing SVG
1. Removing meta junk
2. Simplifying shapes
3. Reducing crazy precision
4. Removing hidden elements
5. Removing whitespace
youtube.com/watch?v=iVzW3XuOm7E&feature=youtu.be
youtube.com/watch?v=1AdX8odLC8M&feature=youtu.be
Kyle Foster has great videos
detailing SVG optimization
Slide 118
Slide 118 text
No content
Slide 119
Slide 119 text
Raster images
are a grid of
pixels so it’s
easy to
understand
they have an
intrinsic width
and height.
Slide 120
Slide 120 text
No content
Slide 121
Slide 121 text
No content
Slide 122
Slide 122 text
SVG has a
Viewport and viewBox
Viewport is the size of the element. Think how the browser
window is the viewport for the whole site but an iframe has it’s
own smaller viewport. Likewise, SVG has it’s own viewport.
viewBox is an attribute on . It is the “canvas” on which
SVG instructions are carried out. It is essentially a nexus with
an aspect ratio (don’t think of them as pixels).
Slide 123
Slide 123 text
No content
Slide 124
Slide 124 text
.buddy {
width: 400px;
height: 200px;
}
Slide 125
Slide 125 text
.buddy {
width: 200px;
height: 200px;
}
Slide 126
Slide 126 text
.buddy {
width: 200px;
height: 200px;
}
Slide 127
Slide 127 text
Dealing with
Fallbacks
e.g. dealing with IE 8 and Android 2.3
Slide 128
Slide 128 text
Remember, one kind of fallback
is nothing.
Like if you’re using an icon to enhance a word.
Slide 129
Slide 129 text
No content
Slide 130
Slide 130 text
svgeezy.init(false, "png");
Slide 131
Slide 131 text
No content
Slide 132
Slide 132 text
svgeezy.init(false, 'png');
Slide 133
Slide 133 text
codepen.io/chriscoyier/pen/jnsIr
Slide 134
Slide 134 text
codepen.io/chriscoyier/pen/jnsIr
Slide 135
Slide 135 text
It works, but it requests two images in
non-supporting browsers.
Slide 136
Slide 136 text
… but, SVG is more well supported than the responsive images stuff is.
Slide 137
Slide 137 text
No content
Slide 138
Slide 138 text
Slide 139
Slide 139 text
.my-element {
background-image: url(fallback.png);
background-image:
linear-gradient(transparent, transparent),
url(image.svg);
}
Fallback for CSS background-image
This works because it combines multiple backgrounds and old-syntax gradients,
thus it works for Android 2.x where multiple backgrounds alone did not.
You could use Modernizr too, but if you just need it for this, it would be overkill.
pauginer.tumblr.com/post/36614680636/invisible-gradient-technique
Slide 140
Slide 140 text
Also, background is generally
decorative and non-vital to content, so no
fallback is often acceptable.
Slide 141
Slide 141 text
Supporting (most) browsers
Just leaves alone
IE 9-11
Ajax’s in
IE 6-8
Slide 142
Slide 142 text
Animating SVG
Let us count the ways.
Slide 143
Slide 143 text
1. SVG Syntax (“SMIL”)
2. With CSS @keyframes / transitions
3. With JavaScript
Slide 144
Slide 144 text
No content
Slide 145
Slide 145 text
Save
Slide 146
Slide 146 text
No content
Slide 147
Slide 147 text
No content
Slide 148
Slide 148 text
No content
Slide 149
Slide 149 text
No content
Slide 150
Slide 150 text
No content
Slide 151
Slide 151 text
SVG Filters
& Blend Modes
The OG of cool web effects.
Slide 152
Slide 152 text
.an-event-apart {
-webkit-filter: url(#blur);
filter: url(#blur);
}
Slide 153
Slide 153 text
No content
Slide 154
Slide 154 text
SVG Filters
You can use CSS filters on SVG, but SVG has its own special filters too.
Slide 155
Slide 155 text
Accessible SVG
Thankfully it ain’t that hard.
Slide 156
Slide 156 text
No content
Slide 157
Slide 157 text
1. Use SVG
2. Use Inline SVG
3. Provide a and aria-labeledby
4. Provide a and aria-labeledby
5. Use
6. Make links focusable (if parts)
7. Use ARIA roles
8. Create alternatives
Slide 158
Slide 158 text
Green rectangle
A light green rectangle with
rounded corners and a dark green border.
Website
Slide 159
Slide 159 text
http://css-tricks.com/svg-text-typographic-designs/
Slide 160
Slide 160 text
No content
Slide 161
Slide 161 text
@chriscoyier