Responsive SVG

(or putting the 'S' into Scalable Vector Graphics)

Alex Walker

sitepoint.com

learnable.com

@alexmwalker

Firstly.. Let's take a trip

waaaay back...

... to 1998..

Will Smith..

.. is Gettin' Jiggy Wit 'It'

And when we arrive we find...

Google..

.. is two guys in a room...

.. with ONE chair.

(Larry is 'chairman' )

We find..

Chris Lilley..

Chris Lilley -1998

@SVGeesus

... beginning work on 'SVG 1.0'.

We find a guy called..

(Web Graphics superhero)

..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..

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

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..

Back to the Future (now)

Ok, so let's go..

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