CODEWITHSUNDEEP
google-chromesvg
BobW
BobW

Reputation: 253

SVG <use> elements in Chrome not displayed

Chrome seems not to display <use> elements in inline svg. Here is an example (code below or view it at http://www.bobwyttenbach.com/chromeuse.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chrome use-tag bug?</title>
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200">
    <defs>
        <g id="test1">
            <circle cx="100" cy="100" r="50" fill="red"/>
        </g>
    </defs>
    <g>
        <rect x="0.5" y="0.5" width="199" height="199" stroke="black" fill="none"/>
        <use xlink:href="#test1" x="0" y="0"/>
    </g>
</svg>
<p>Above is inline svg with a use tag; below is the same svg linked through an object tag. Below is correct.</p>
<object data="chromeuse.svg" width="200" height="200"></object>
</body>
</html>

The red circle does not appear in the inline svg but does appear when the same svg is linked through an object tag. Safari, Firefox, Opera, and Internet Explorer 9 all display the inline svg correctly.

Am I doing something wrong? Is this a known Chrome bug (I haven't found it listed)? Any workarounds?

Upvotes: 9

Views: 11445

Answers (3)

Alex Naidovich
Alex Naidovich

Reputation: 332

Don't know if this question is still relevant, but I've met such a case recently and I pretty sure that somebody else will meet the case (especially those who tries to make use of SVG sprites for the first time).

In my case I've joined 16 SVG icons in one sprite manually into sprite.svg, and in this file I've omitted important meta information:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

I had no first line at all, and all I had on the second line was an opening <svg> tag with no meta attributes (xmlns and xmlns:xlink). As soon as I brought back all this omitted meta information, my graphics from sprite.svg started to display properly.

Hope it helps someone.

Upvotes: 3

Tom
Tom

Reputation: 424

I spent a long time debugging inline svg use elements not showing up. The chrome bug discussed by BobW seems fixed at this time. To eliminate the same issue caused by something else entirely, try commenting out the <base href="somethingsomethingsomething" /> tag from your HTML.

Of course, this will likely break every relative link on your site, but the <use> elements now show up. One step forward, half a step back :)

Related info here: Using base tag on a page that contains SVG marker elements fails to render marker

Upvotes: 0

RestingRobot
RestingRobot

Reputation: 2978

Ok so I deleted my last post as I incorrectly tried to figure out why the use element was working for me and not for you. What I can say is that I am using a modified version of this source, https://code.google.com/p/svg-edit/ , so in short, my answer is to walk through and see how they do it. I believe its demonstrated when you insert an image from their library.

Upvotes: 0

Related Questions