Web development writer, teacher, and speaker. Author of Pro CSS3 Animation (Apress). Contributing editor at Smashing Magazine.
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:
- 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
Step 2: Add UI
Taking this further, we can clip bitmap images within the SVG shapes:
And add some CSS:
Finally, we can place an image behind the SVG, and simply use the vector info for UI:
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.
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:
We can style it with:
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:
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.
<pattern> is much more powerful :
- 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:
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…
Six Impossible Things With SVG
By Dudley Storey