Responsive SVG
(or putting the 'S' into Scalable Vector Graphics)
Alex Walker
sitepoint.com
learnable.com
@alexmwalker

1

Firstly.. Let's take a trip
waaaay back...
2
... to 1998..


3
Will Smith..
.. is Gettin' Jiggy Wit 'It'
And when we arrive we find...

4
Google..
.. is two guys in a room...

.. with ONE chair.
(Larry is 'chairman' )
We find..
5
Chris Lilley..

Chris Lilley -1998
@SVGeesus
... beginning work on 'SVG 1.0'.
We find a guy called..
(Web Graphics superhero)
6
..and HTML looks like this..
<h1>
<font size="5" face="Verdana, Arial, Helvetica, sans-serif">
...Baby One More Time
</font>
</h1>
<p align="left">
<font color="#000077" size="3" face="Verdana, Arial,
Helvetica, sans-serif">
<i>
My loneliness is killing me <br />
I must confess, I still believe <br />
</i>
</font>
</p>
<p align="right">
<font color="red" size="4">Britney Spears</font>
</p>

(Children, avert your eyes!)
Eww..
7
Why was it like that?
- Microsoft Frontpage
- Adobe Pagemill
- Claris Webpage
- WYSIWYG (Angelfire - Geocities - Lycos)
In 1998 MOST HTML is generated by ..
HTML is hidden!
*obligatory cat photo
*

8
Even broken, poorly-supported CSS was a revelation!
FUN FACT: In 1998 the most popular browser (Netscape 4) only supported 40% of the CSS spec.
So, once we started working directly the HTML..
9
Back to the Future (now)

Ok, so let's go..
10
Where does our SVG come from today?
"Save As.." SVG

Inkscape
Sketch
Illustrator
Webcode



'Save as' SVG has problems
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
viewBox="0 0 740 1100" version="1.1" xmlns:dc="http://purl.org/dc/elements/1.1/"
id="svg2"
version="1.1"
inkscape:version="0.48.4 r9939"
sodipodi:docname="New document 1">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.78686696"
inkscape:cx="512.49342"
inkscape:cy="589.39724"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1255"
inkscape:window-height="841"
inkscape:window-x="215"
inkscape:window-y="95"
inkscape:window-maximized="0" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<path
style="fill:#d40000"
d="m 122.84375,226.65625 0,41.0625 0,10.34375 0,22.59375 c 0,9.20305 7.42195,16.59375 16.625,16.59375 9.20305,0 16.625,-7.3907 16.625,-16.59375 l 0,-22.59375 178.1875,0 0,480 -31.4375,10 0,24.3125 31.4375,0 60,0 32.5625,0 0,-24.3125 -32.5625,-10 0,-480 183.875,0 0,22.59375 c 0,9.20305 7.3907,16.59375 16.59375,16.59375 9.20305,0 16.625,-7.3907 16.625,-16.59375 l 0,-22.59375 0.0625,0 0,-51.40625 z"
id="rect3109"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccsssccccccccccccssscccc" />
</g>
</svg>
The markup is full of.....
stuff! (i.e MS Word HTML)
Editors mostly ignore the coolest features of SVG
-
PATTERNs
-
SYMBOLs
-
CSS
Using CSS in SVG
<svg>
<rect x="10" y="10" height="50"
width="50" fill="red" stroke="white"
stroke-width="4px"/>
</svg>
<svg>
<style>
.rectangles{
fill:red;
stroke: white;
stroke-width: 4px;
}
</style>
<rect class="rectangles" x="10"
y="10" height="50" width="50" />
</svg>
Remind you of that 1998-era HTML?
Why CSS-ify SVG?
- Files size
- Managability
- MEDIA queries. YAY!
Demos
What we can do with
Responsive SVG?
Improving Data
- Display less data on smaller screens.
- Scale up what remains.

#tweet-total-range text:nth-child(odd) {
opacity: 0;
}
CSS ':nth:child(odd)' lets us automatically target every second number on our axis.
Key Idea:
http://bit.ly/simple-graph
SVG Cooperation
Groups of Responsive SVGs can work like self-organising teams.
http://bit.ly/svg-teams

Scaling SVGs to 100%
- SVG 'thinks' in pixels (unless you set it otherwise).
- Most editors set a width & height (in pixels) on the SVG element.
- Setting the width and height to 100% alone won't work.
- We need to add the 'viewbox' attribute.
<html>
<svg
... >
<path d="M128.2 41.3 L114.5 54.6Q 110
32.3 ... />
</svg>
width="100%" height="100
viewbox="0,0,150,150"
The Scaling Trick
<svg ... >
<path d="M128.2 41.3 L114.5 54.6 Q110
32.3 ... />
</svg>
width="150" height="150"
<svg ... >
<path d="M128.2 41.3 L114.5 54.6Q 110
32.3 ... />
</svg>
width="100%" height="100%"
Changing layouts
Refitting layouts to suit different screens.

http://bit.ly/reformatting-svg
Responsive Maps
- Drawn in Inkscape
- Hand-hacked in Sublime
- Tuned in CodePen.io

http://bit.ly/responsive-svg-maps
File sizes: SVG vs. PNG
Play by Play
Most CSS3 properties
are supported within SVG.
The Exception?
3D Transforms.
Boo.. :-(

http://bit.ly/play-by-play
Issues &
G tchas
CSS Pre-processors
Say goodbye to Sass, Less, Stylus, etc ...
Say hello to CSS prefixes again
Upload Support can be... patchy
Image hosting services: Flickr, Imgur, etc
CMSs like Wordpress block SVG upload
Github is a free, reliable hosting option
Tools &
Helpers
Use Code Playgrounds
- Codepen.io
- CSSDeck.com
- Dabblet.com
.. all render SVG as you write/paste it
(WARNING: Never re-open your hand-edited SVG in your Illustrator/Inkscape!)
- petercollingridge.appspot.com/svg-editor
SVG Optimizers

Useful SVG
Resources
WikiMedia Commons
World/country maps: http://commons.wikimedia.org/

Open Street Maps
http://www.openstreetmap.org/

Plot.ly
SVG graphs https://plot.ly/

Thanks for listening!
Photo credits
Alex Walker
@alexmwalker
Slides: https://slides.com/alexwalker/responsive-svg/
Demos: http://codepen.io/alexmwalker/public/

responsive-svg
By Alex Walker