Six Impossible Things with SVG




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:

  1. Needed to be made from scratch every time

SVG can fix that!

  1. Not responsive (hit areas drift out of registration with underlying graphic)
  1. Large file size

Step 1: Link Paths / Polygons

<svg xmlns="" 
    viewBox="0 0 525 365" 
    preserveAspectRatio="xMinYMin meet">
    <a xlink:href="">
        <path id="ab" d="M351.371,342.397c-55 …" />

Step 2: Add UI

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



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

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

And add some CSS:

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

The result:


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

<div id="lynskey">
  <svg xmlns=""
    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>

RWD isn’t about fitting content into smaller spaces…


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


SVG does that!


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"/>

We can style it with:

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

a:visited svg polygon {
    fill: green;

More info:


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="">
    <rect width="0.5" height="1" fill="hsla(32, 42%, 50%, .5)" />

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="" width="100%" height="100%">
        <pattern id="pinstripe" 
        width="50" height="50">
            <line x1="25" y="0" x2="25" y2="50"
            stroke="goldenrod" stroke-width="25" />
    <rect width="100%" height="100%" fill="url(#pinstripe)" />



  • 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:

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">
        <clipPath id="delta" clipPathUnits="objectBoundingBox">
            <polygon points=".5,0 0,1 1,1" />


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…

Thank you!




Six Impossible Things With SVG

By Dudley Storey

Six Impossible Things With SVG

Presented at the San Francisco SVG Meetup July 15, 2015.

  • 1,947