Four More Impossible Things with SVG

@dudleystorey

thenewcode.com

1. Better backgrounds

2. Adaptive logos & diagrams

3. Blend modes & interactivity

4. Responsive Hero Text

Bitmaps are often used for backgrounds, but SVG offers a number of advantages:

For illustrations, this is perfectly fine…

Small file size

Scalable without loss in quality

Easily adaptable

Automatically transparent

750 × 492 px, 25% quality JPEG, 10K

(photograph by Tarik Browne, licensed under Creative Commons)

3.4K SVG, minified with SVGOMG

(https://jakearchibald.github.io/svgomg/)

Note that you can combine SVG images in multiple layers to create “infinite” backgrounds:

body {
  background-image: url(birds-on-wire.svg),
    url(wire.svg);
  background-size: contain;
  background-repeat: no-repeat, repeat-y;
}

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

This will become really interesting with mesh gradients in SVG 2:

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.

But <pattern> is much more powerful :

<svg xmlns="http://www.w3.org/2000/svg" 
    width="100%" height="100%">
    <defs>
        <pattern id="pinstripe" 
        patternUnits="userSpaceOnUse"
        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>

Creates:

Think of <pattern> as being a “swatch” of SVG; elements drawn within the pattern space are tiled across the area of the elements that reference them.

Modification of the pattern is easy:

- add patternTransform to rotate, scale or skew the pattern

- add a background to the SVG (or to the HTML page) to provide a background color

codepen.io/dudleystorey/pen/EjRJVE

Adding the background to a page:

1. Reference the SVG as a file:

     background: url(stripe.svg);

2. Add it directly in the CSS with urlencoding or base64:

    background-image: url('data:image/svg+xml;utf8,<svg… >')

Many, many more possibilities:

thenewcode.com/361/SVG-Background s

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://thenewcode.com/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; }
}

SVG paths can be linked:

<g id="Canada">
    <a xlink:href="http://travelalberta.com/"
            title="Alberta">
            <path id="CA-AB" d="M1932…" />
     </a>
  </g>
</svg>

Linked shapes are exact, not to containing box. They can also be styled:

path {
    fill: hsl(120, 55%, 20%)
    transition: .3s fill;
}
path:hover {
    fill: hsl(120, 55%, 40%);
}

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

SVG can also integrate bitmaps. Linked paths drawn over those images become hotspots:

<svg xmlns:xlink="http://www.w3.org/1999/xlink" 
    viewBox="0 0 2074 1382">
    <image width="2074" height="1382" 
        xlink:href="team-photo.jpg">
    </image>
    <a id="konni" xlink:href="#">
	<title>Konni</title>
        <path id="konni-mask-path" d="M427.7,450.3c26 …"/>
    </a>

… making them responsive successors to traditional imagemaps.

Note that paths must be filled in order to register as click areas, meaning that the fill must be transparent (or opacity set to 0) in order for it to be an “invisible hotspot”. Alternatively, set pointer-events: all for the path.

CSS Blend modes are a wonderful recent innovation:

http://thenewcode.com/14/CSS-Blend-Modes-Reading-List

…but still have limitations (no support in IE / Edge yet, only partial support in Safari)

But SVG has supported its own version of blend modes via <filter> almost since its inception, meaning you can have blend modes in all modern browsers:

codepen.io/dudleystorey/pen/yePWzN

Many more examples:

smashingmagazine.com/2015/05/why-the-svg-filter-is-awesome/

Responsive text can be made with vw units:

codepen.io/dudleystorey/pen/orbAy

…but a lack of max-font-size & min-font-size properties means that they require at least two “text clamps” written as @media queries

But! RWD text is easy to create with inline SVG:

<header>
    <svg xmlns="http://www.w3.org/2000/svg" 
       viewBox="0 0 285 80">
        <text x="0" y="66">Hawaii</text>
    </svg>
</header>

And this CSS:

header { 
  width: 80%;
  margin: 0 auto;
}
svg text { 
  font-size: 90px;
  fill: blue;
}

Note that SVG font-size is relative to the viewBox, making it scale on resize. Also note that the color of the <text> element is set using fill, not color

codepen.io/dudleystorey/pen/rxJwZY

This takes us all the way back to the start, as we can also use <pattern> to fill text:

codepen.io/dudleystorey/pen/mVXYjp