Vector graphics are slowly supplementing bitmap images and have become a cornerstone in modern web design for an amazingly simple reason: because they are composed of mathematically defined coordinated rather that a fixed number of pixels, they scale up and down with no loss in quality. This fact makes them great for responsive web design (a single site whose layout scales and reflows according to screen size, mostly removing the need for a separate site for mobile devices). Slowly but surely, vector graphics are being used in place of bitmapped buttons, small simple images, and layout elements (such as a navigation bar) in websites. Already it makes more sense in the corporate world to design a logo in vector instead of bitmap so as to scale it for any advertisement size and layout, the same with many mobile applications too, so website designers are now adopting this trend fueled by the explosion of smart phones, touchscreens, and tablets of varying sizes.
Thankfully, web browsers and website frameworks have noticed this trend and have done their best to support vector graphics, mainly in the form of SVG files, which are either saved as an external file and loading using an
<img> tag or through inlining the file (much like using a Base64 encoded bitmap image) using the
<svg> tag. Today, any web designer can create a SVG vector image using any vector graphic creator, such as Adobe Illustrator or Inkscape, add it to a website, and have it rendered and ready for scaling in every modern web browser.
That is, except for Internet Explorer.
For as long as website design has been seriously considered, Internet Explorer has been a major force to be reckoned with, either for good or bad. As the browser with the most market share, developers are often placed in an all-or-nothing support situation, with some degree of support being performed most of the time. Further complicating the matter is the various versions of IE in use, mainly ranging from IE 8 to the newest IE 11. While IE 10 and 11 are drastically improved compared to the last few versions, there are still plenty of standards compliance issues designers and developers alike must workaround without crippling more compliant browsers. One such IE issue that must be dealt with even in the newest version is (surprise!) SVG support. However, the issue is not as simple as it sounds. Although Internet Explorer supports SVG graphics, it has a beef with SVGs exported from Inkscape (but not from other Vector graphic editors), even when using the “Plain SVG” Save As option.
In this post, we are going to be exploring this strange scenario, why it happens, and how we can avoid having Internet Explorer choke on our beloved vector graphics. A live demo of the issue at hand is available at http://le717.github.io/demo/ie-inkscape.html. You will need to use Internet Explorer to view this. However, I have provided screenshots of the issue, though, as it makes everything much easier to comprehend when you can see what is happening (and making up for the Impossible, unless you know how cross-browser support). ;).