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.
Recommended Reading: Scalable Vector Graphics series of posts
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
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.
.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
Include the Modernzr.js in the HTML document, like so:
And for the other two files,
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:
Now we only need to add the HTML markups, as follows;
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="280px" 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.
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.
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