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:
.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.
