CODEWITHSUNDEEP
htmlsvg
GibboK
GibboK

Reputation: 73988

Not able to embed a SVG file using xlink:href

I need to embed a SVG file in a HTML document. File Example.svg is in the same directory of the HTMl file.

Using the following code, no SVG is inserted and nothing shown, but looking at network debut panel in Chrome DEV tools i can see the SVG is loaded.

What could be wrong and how to fix it?

<!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
    </head>
    <body>
        <svg width="250" height="250">
            <use xlink:href="Example.svg"></use>
        </svg>
    </body>
</html>

Content of my SVG file https://jsfiddle.net/900xLbor/

Same problem here: https://jsfiddle.net/900xLbor/2/

Upvotes: 0

Views: 1006

Answers (1)

Kaiido
Kaiido

Reputation: 137131

MDN article about xlink:href attribute on the <use> element :

An <IRI> reference to an element/fragment within an SVG document.

In other words, you need to set the id of the element to use into the href :
<use xlink:href="Example.svg#svg2"/>

Here is a plunker demonstration

Upvotes: 2

Related Questions