As you may already know, IE doesn't support SVG unless you install a plugin like the ASV, that is unfortunately not supported anymore by Adobe.
As a web developer willing to use inline SVG, your best bet is thus to provide fallback mechanisms to display IE visitors at least a degraded version of what you're trying to express/demonstrate, and teach them what they're missing by sticking with evil IE.
Luckily, IE will simply ignore any markup it does'nt know, so you usually don't need to bother masking or removing the SVG markup when serving pages to your IE visitors.
This is however not true if you insert plain text if your SVG ... Let's take an example.
When you insert the following SVG in your page:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" wiewBox="0 0 200 100"> <text x="0" y="0" font-family="Verdana" font-size="55" fill="blue" > Hello, out there </text> </svg>
IE will ignore all SVG markup and formatting, and actually display the plain text with the current style:
Hello, out there
Now, what happens when you insert HTML markup inside your SVG using the
foreignObject tag ?
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" wiewBox="0 0 200 100"> <foreignObject width="200" height="100"> <span style="color:blue;"> Hello, out there </span> </foreignObject> </svg>
Well, IE ignores all SVG and displays only the HTML markup embedded in the
Hello, out there
In a nutshell, the actual SVG and the IE fallback are embedded in an SVG
- SVG aware browsers will recognize the conditional directive, and render the first alternative they understand (the actual SVG), ignoring the other (the IE fallback)
- IE will silently ignore all SVG markup (including the conditional directive), and go straight to the fallback written in HTML.
In the example, below, SVG-aware browsers will display a red circle, and IE a simple text.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" wiewBox="0 0 200 100"> <switch> <circle cx="150px" cy="100px" r="50px" fill="#ff0000" stroke="#000000" stroke-width="5px"/> <foreignObject width="200" height="100"> <span style="color:red;"> This is not a red circle </span> </foreignObject> </switch> </svg>
See the actual rendering below:comments powered by Disqus