Pages

19 Jun 2013

Using SVG Images with Modernizr.js

If you need to add an SVG to your HTML page here what you should do:

  • Install Inkscape (it's free to use).
  • Create SVG file
  • Export to PNG. This file will be used as a fallback in older browsers like IE 7 and IE 8
 
  • Create HML page and add .svg Image on it. Problem: IE8 does not support SVG. That's why you need modernizr.js
  • Include modernizr.js to the page. This will add "svg" or "no-svg" classes to the <HTML> tag.
  • Now you can use ".no-svg" and ".svg" classes in you CSS selectors to provide fallback to PNG images. In other words, you need to load .png images only when  no-svg class exists in DOM. 
Final HTML and CSS should be like following:
 
<style>
.svg .star-box{
   height: 48px;
   width: 52px;
   background: url("woman.svg") ;
   background-size: 100% 100%;
}.no-svg .star-box
{   background: url("woman.png") no-repeat;
   height: 68px;
   width: 48px;
   min-width: 1024px;
   background-size: 100% 100%;
}</style>

<div class="star-box"/>

So, when a browser supports SVG - .svg files will be used. If it does not it will fall back to using PNG.

No comments:

Post a Comment