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 foreignObject tag:

Hello, out there

Based on this behavior, the guys at Sheperd interactive have imagined a very elegant inline SVG fallback mechanism that uses SVG conditional processing.

In a nutshell, the actual SVG and the IE fallback are embedded in an SVG switch:

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