Adding Scalable Vector Graphics (SVG) in Unsupported Browser

In an earlier post in this series, we have mentioned a bit about SVG’s pitfall with old browsers and using Raphael.js to serve the graphic as an alternative solution. In this post we will take a look at this matter further.

The idea is simple, we will still be using SVG elements as the primary way to deliver graphics on our webpage, but at the same time we will also provide a fallback function so that it can be still rendered in unsupported browsers.

Sure, there are many paths we can take, but we will only look into to two solutions that I think is a better generic solution. So, let’s see how we can do it.

Using Object Element

Apart from putting it directly into an HTML document, there are several ways to embed SVG. For instance, if we store the graphic in .svg file, we can use the <object> element.

 <object data='images/apple.svg'></object>
 

For the demonstration purpose, we have added an Apple logo with SVG to our webpage. However, the unsupported browsers will remain empty. To solve the problem, we can serve a Bitmap graphic, as follows;

 <object data='images/apple.svg'>
 <img src='images/apple.png'/>
 </object>
 

This way, supported browsers will still be taking the .svg, while the unsupported browsers will carry the Bitmap graphic. We have added the “png” mark below the Apple logo to track which graphic is being delivered.

However, as we have mentioned in the other post, Bitmap graphics are not as flexible and scalable as SVG. So, let’s take a look at another solution.

Using Modernizr

Another method we can use is by using Modernizr. For those of you who are not familiar with this JavaScript library, don’t worry we will have a dedicated post to cover about it. For now, just keep up with us.

First of all, let’s prepare some required JavaScript libraries, Modernizr.js and Raphael.js. Then, we also need to convert our .svg file into a Raphael-supported format with this tool, ReadySetRaphael.js, and save the output in a separate .js file; let’s name it svg.js.

Include the Modernzr.js in the HTML document, like so:

 <script type="text/javascript" src="scripts/modernizr.js"></script>
 

And for the other two files, raphael.js and svg.js, we will load it conditionally, only when it is viewed in unsupported browsers.

With Modernizr we can detect the browser capability, in this case we will detect whether the browser is capable of rendering SVG, and if it is not we will serve the script:

 if (!Modernizr.inlinesvg) {
 document.write(
 '<script type="text/javascript" src="scripts/raphael.js"><\/script>', 
 '<script type="text/javascript" src="scripts/svg.js"><\/script>'
 );
 }
 

Now we only need to add the HTML markups, as follows;

 <svg version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0" y="0" width="500" height="280" viewBox="0 0 500 280" enable-background="new 0 0 500 280" xml:space="preserve">
 <path fill="#333333" d="M296.908,120.622c-8.77,6.201-13.158,13.676-13.158,22.41c0,10.458,5.425,18.479,16.262,24.076
 c-2.908,8.435-7.122,15.764-12.65,22.009c-5.516,6.243-10.553,9.368-15.11,9.368c-2.147,0-5.075-0.718-8.794-2.133l-1.782-0.687
 c-3.646-1.416-6.854-2.133-9.656-2.133c-2.641,0-5.535,0.555-8.679,1.665l-2.237,0.807l-2.818,1.154
 c-2.218,0.884-4.468,1.326-6.725,1.326c-5.328,0-11.208-4.387-17.642-13.161c-9.273-12.567-13.905-26.264-13.905-41.085
 c0-10.538,2.886-19.02,8.678-25.46c5.78-6.432,13.446-9.658,22.979-9.658c3.566,0,6.897,0.653,10,1.958l2.129,0.865l2.238,0.92
 c1.992,0.84,3.601,1.264,4.825,1.264c1.569,0,3.316-0.364,5.231-1.094l2.929-1.151l2.19-0.804c3.483-1.262,7.34-1.896,11.555-1.896
 C282.777,109.183,290.814,112.996,296.908,120.622z M273.238,82.575c0.108,1.344,0.167,2.378,0.167,3.102
 c0,6.628-2.412,12.442-7.237,17.443c-4.823,5-10.438,7.494-16.837,7.494c-0.189-1.493-0.29-2.563-0.29-3.212
 c0-5.635,2.239-10.924,6.726-15.864c4.482-4.939,9.671-7.838,15.575-8.678C271.754,82.787,272.395,82.696,273.238,82.575z"/>
 </svg>
 
 <div id="applelogo"></div>
 

In the code snippet above, we have added the SVG directly into the HTML document and a div to accommodate the Raphael code. Once again to be able to notice which graphic is being delivered easily, we have also put some text below the logo inside the SVG element.

 <text x="210" y="250">This is SVG</text>
 

So, here is what we will get in the browsers.

To see it more clearly, you can view the demo from the links below and make sure you try it in different browsers; we would suggest IE8/7 and Google Chrome.

• View Demo
• Download Source

Final Thought

Alright, these are just a few examples, in particular cases they might not be that effective. But in general, these should do a favor to solve the problem on serving SVG in unsupported browsers. Lastly, if you have something to add that we’ve missed in this post, feel free to share it in the comment box below.

Thanks for reading this post and we hope you enjoyed it.

More

You may also be interesting in the following posts:

• Scalable Vector Graphics – The Basic
• Scalable Vector Graphics – Styling with CSS
• Scalable Vector Graphics – Working with Text
• Scalable Vector Graphics – Animation