Look into the <foreignObject> tag

lukewhitehouse / svg-icon-workflow

An SVG icon workflow utilising Gulp as a build tool and providing fallbacks for older browsers

https://assortment.io/posts/creating-an-svg-icon-workflow

88 stars 3 forks source link

Look into the <foreignObject> tag #1

Open lukewhitehouse opened 9 years ago

lukewhitehouse commented 9 years ago

Based on @daviddarnes comment over on Designer News

daviddarnes commented 9 years ago

Case example:

<svg class="icon" viewBox="0 0 50 50">
    <switch>
        <use xlink:href="#twitter-icon"></use>
        <foreignObject>
            <img class="icon" src="img/twitter-icon.png" alt="twitter">
        </foreignObject>
    </switch>
</svg>

The SVG sprite works in the same way, however the <use> is wrapped in a <switch> element and a <foreignObject> is added in. The switch acts as a conditional statement. If the browser doesn't support the XML code within it, it'll use whatever is inside the foreignObject instead.