SVG elements not displaying in Safari

Question

I have some inline svg in an html5 doc, like so:

<div>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="96px" height="183px" viewBox="0 0 96 183" enable-background="new 0 0 96 183" xml:space="preserve">

<g>
    <defs>
        <path id="SVGID_4_" d="M48,5.684c-23.084,0-41.801,11.266-41.801,25.168v121.301c0,13.902,18.717,25.168,41.801,25.168
            c23.084,0,41.797-11.266,41.797-25.168V30.852C89.797,16.949,71.084,5.684,48,5.684z"/>
    </defs>
    <clipPath id="SVGID_5_">
        <use xlink:href="#SVGID_4_"  overflow="visible"/>
    </clipPath>
    <image id="energy" clip-path="url(#SVGID_5)" xlink:href="_images/energy.png" width="82" height="189" x="7" y="178"/>
</g>
</svg>
</div>

This displays perfectly in Chrome and Firefox, but not Safari (6.0.4). Any idea why this could be?

It would be a lot easier to help if you posted the actual full svg code — WebChemist, Jun 28 '13 at 00:09

score 3 · Accepted Answer · answered Jun 28 '13 at 02:31

Turns out Safari 6.0 doesn't like the closing slash inside the <use> tag. When I removed it, everything worked perfectly.

    <div>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="96px" height="183px" viewBox="0 0 96 183" enable-background="new 0 0 96 183" xml:space="preserve">

<g>
    <defs>
        <path id="SVGID_4_" d="M48,5.684c-23.084,0-41.801,11.266-41.801,25.168v121.301c0,13.902,18.717,25.168,41.801,25.168
            c23.084,0,41.797-11.266,41.797-25.168V30.852C89.797,16.949,71.084,5.684,48,5.684z"/>
    </defs>
    <clipPath id="SVGID_5_">
        <use xlink:href="#SVGID_4_"  overflow="visible">
    </clipPath>
    <image id="energy" clip-path="url(#SVGID_5)" xlink:href="_images/energy.png" width="82" height="189" x="7" y="178"/>
</g>
</svg>
</div>

Wow. Thanks for this. Safari wasn't displaying some inline SVG (i.e. inside an HTML page) but only when I opened the SVG on its own. — fregante, Oct 21 '13 at 17:33
Keep in mind that SVG is XML, so `` has to be closed. Safari may not support `` but you can use `` to keep the document valid and working everywhere. — fregante, Oct 21 '13 at 17:35

SVG elements not displaying in Safari

1 Answers1

Linked