Web development writer, teacher, and speaker. Author of Pro CSS3 Animation (Apress). Contributing editor at Smashing Magazine.
Four More Impossible Things with SVG
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
750 × 492 px, 25% quality JPEG, 10K
(photograph by Tarik Browne, licensed under Creative Commons)
3.4K SVG, minified with SVGOMG
Note that you can combine SVG images in multiple layers to create “infinite” backgrounds:
This will become really interesting with mesh gradients in SVG 2:
Given this SVG:
We can place it in the background of an element using a URL, inline reference, or DataURI to produce simple stripes:
The same technique can be used to create plaids, tartans, etc.
But <pattern> is much more powerful :
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
Adding the background to a page:
1. Reference the SVG as a file:
2. Add it directly in the CSS with urlencoding or base64:
background-image: url('data:image/svg+xml;utf8,<svg… >')
Many, many more possibilities:
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.
SVG paths can be linked:
Linked shapes are exact, not to containing box. They can also be styled:
SVG can also integrate bitmaps. Linked paths drawn over those images become hotspots:
… 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:
…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:
Many more examples:
Responsive text can be made with vw units:
…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:
And this CSS:
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
This takes us all the way back to the start, as we can also use <pattern> to fill text:
Four More Impossible Things With SVG
By Dudley Storey