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

  1. Display less data on smaller screens.
  2. 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

Made with Slides.com

responsive-svg

  • 9,865
Loading comments...

More from Alex Walker