svg-icon-workflow icon indicating copy to clipboard operation
svg-icon-workflow copied to clipboard

Published 20 hours ago • verified publisher icon lukewhitehouse

Look into the <foreignObject> tag

Open lukewhitehouse opened this issue 9 years ago • 1 comments

Based on @daviddarnes comment over on Designer News

lukewhitehouse avatar Jun 08 '15 09:06 lukewhitehouse

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.

daviddarnes avatar Jun 08 '15 10:06 daviddarnes