I Love These SVG Patterns

Feb 6, 2014Ryan Burnette

I have a bunch of bookmarks in a folder on my desktop. It's terribly a terribly haphazard mash of links, text files, screen shots, and other sundries that I plan to do something with one of these days. I'm realizing that many of these otherwise useless idea seeds are just waiting to germinate into a blog post. Now that I'm done rambling (and creating botanical analogies) …

I love these SVG patterns. It's like the Subtle Patterns of SVG patterns. I need to find more opportunities to use these. When using SVG you should consider support as it's one of those newer concepts that isn't always supported.

I like to use Modernizr for writing styles targeted to a browser's support of technology. If you add a build of Modernizr to your site that performs the SVG test, then if SVG is supported you'll get an svg class on your HTML element, or a no-svg class if it's not. Then you could write your CSS to support both cases like so.

<%= gist "ryanburnette", "35af1e9ba5571f49c7a6" %>

The second selector will apply to a page loaded on a browser without SVG support. Meanwhile, it's ignored for most other cases where SVG is supported.

Blog Index