Six Impossible Things with SVG

@dudleystorey

thenewcode.com

1. Responsive imagemaps

2. Adaptive logos & diagrams

6. Animated icons w/ accurate hits

3. Decorated visited links

4. Detailed tiled backgrounds

5. Cross-browser clip-path

Imagemaps were popular in the first years of the web, but quickly fell out of favor:

Needed to be made from scratch every time

SVG can fix that!

Not responsive (hit areas drift out of registration with underlying graphic)

Large file size

Step 1: Link Paths / Polygons

<svg xmlns="http://www.w3.org/2000/svg" 
    viewBox="0 0 525 365" 
    xmlns:xlink="//www.w3.org/1999/xlink"
    preserveAspectRatio="xMinYMin meet">
    <a xlink:href="http://travelalberta.com/">
        <path id="ab" d="M351.371,342.397c-55 …" />
    </a>
…
</svg>

Step 2: Add UI

<style type="text/css">
    path { 
        transition: .6s fill;
        fill: #D3D3D3;
    }
    path:hover {
        fill: #22aa22;
    }
</style>

Result:

http://codepen.io/dudleystorey/pen/doexPL
http://demosthenes.info/blog/696/Using-SVG-as-an-Alternative-To-Imagemaps

Taking this further, we can clip bitmap images within the SVG shapes:

<g id="Canada">
    <a xlink:href="http://travelalberta.com/"
            title="Alberta">
        <clipPath id="alberta-clipper">
            <path id="CA-AB" d="M1932…" />
        </clipPath>
        <image clip-path="url(#alberta-clipper)"
        width="1024" height="768" 
        xlink:href="lake-louise.jpg"
        role="image" title="Crowsnest Pass">
        </image>
     </a>
    …
  </g>
</svg>

And add some CSS:

svg a image { 
  opacity: 0.5;
  transition: 1s opacity;
}
svg a:hover image {
  opacity: 1;
}

The result:

http://codepen.io/dudleystorey/full/ltpmv/

Finally, we can place an image behind the SVG, and simply use the vector info for UI:

<div id="lynskey">
  <svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    viewBox="0 0 1000 586">
    <title>Lynskey 2015 Backroad Bike</title>
    <circle cx="770" cy="401" r="172" />
    <text x="320" y="570">DTSwiss TK540/X.9 wheelset</text>
    <polygon points="256,29 443,29 443,60 357,101 266,65" />
    <text x="0" y="120">Selle Italia X1 Flow Saddle</text>
    …
  </svg>
</div>

http://demosthenes.info/blog/537/Enhancing-Imagemaps-With-CSS3-Popups

http://codepen.io/dudleystorey/pen/mJLWvW

RWD isn’t about fitting content into smaller spaces…

…it's about delivering adaptive content at the appropriate level of detail.

SVG does that!

http://demosthenes.info/blog/675/Create-Adaptive-SVG-Illustrations-With-CSS

http://responsivelogos.co.uk/

SVG is “drawing with data”: every component in a drawing can be identified and manipulated with @media queries, altered or eliminated.

@media screen and (max-width: 900px) {
    path#right { display: none; }
}

For security, browsers limit CSS to just four properties for :visited states.

…but the rules also allow SVG to alter fill and stroke of an element.

Using a tiny inline SVG:

<a href="/link.html">Link
<svg viewBox="0 0 50 50">
<polygon points="4,30 14,40 45,12 41,9 14,34 8,27"/>
</svg>
</a>

We can style it with:

a svg {
    width: 3rem;
    height: 3rem;
}
a svg polygon {
    fill: white;
}

a:visited svg polygon {
    fill: green;
}

More info:

http://demosthenes.info/blog/1046/Styling-Visited-Links-with-SVG
http://codepen.io/dudleystorey/pen/rVdqPj

CSS gradient backgrounds are neat, but limited:

tricky syntax
lots of "thinking outside the box" required for complex results
poor performance
can't do dashes, etc
not supported in IE9

SVG can fix that!

Given this SVG:

<svg viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg">
    <rect width="0.5" height="1" fill="hsla(32, 42%, 50%, .5)" />
</svg>

We can place it in the background of an element using a URL, inline reference, or DataURI to produce simple stripes:

body {
    background-image: url(stripe.svg);
    background-size: 20px 20px;
    background-color: #669;
}

The same technique can be used to create plaids, tartans, etc.

<pattern> is much more powerful :

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <defs>
        <pattern id="pinstripe" 
        patternUnits="userSpaceOnUse"
        patternTransform="rotate(-45)"
        width="50" height="50">
            <line x1="25" y="0" x2="25" y2="50"
            stroke="goldenrod" stroke-width="25" />
        </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#pinstripe)" />
</svg>

References:

http://demosthenes.info/blog/1045/Using-SVG-In-Web-Page-Backgrounds-Stripes

http://demosthenes.info/blog/1048/Using-SVG-in-Web-Page-Backgrounds-Diagonals-and-Patterns

http://codepen.io/dudleystorey/pen/EjRJVE

http://demosthenes.info/blog/1047/Pop-Art-Backgrounds-with-SVG-and-Blend-Modes
http://codepen.io/dudleystorey/pen/PqQmxM

clip-path:

successor to clip, which had serious limitations
clips any element to any shape (polygon, circle, etc)
syntax derived from SVG clip
BUT… -webkit only at this time

Solution: use an SVG fallback…

The secret is dividing the clip-path points by 100 for the SVG:

http://bennettfeely.com/clippy/

img#penetrator {
    clip-path: url(#delta);
    -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);   
}
svg#svgpath { width: 0; height: 0; }

<svg id="svgpath">
    <defs>
        <clipPath id="delta" clipPathUnits="objectBoundingBox">
            <polygon points=".5,0 0,1 1,1" />
        </clipPath>
    </defs>
</svg>

References:

http://demosthenes.info/blog/1007/Combining-CSS-clip-path-and-Shapes-for-New-Layout-Possibilities

http://codepen.io/dudleystorey/pen/XJOOzv

Standard <img> icons:

have rectangular "hot spots", no matter what their shape
can't be internally animated
can't shift colors of components

(outside of the tricksiness of sprite sheets)

SVG can address all of those…

http://demosthenes.info/blog/859/Making-SVG-Animated-Icons

http://codepen.io/dudleystorey/pen/bLpuG

Thank you!

@dudleystorey

demosthenes.info