CODEWITHSUNDEEP
htmlsvgreference
Justin
Justin

Reputation: 77

Reference an svg embedded in html in html document in same folder

I would like to reference an svg embedded in one html document in another html document in the same folder. I don't need a fallback, but I would prefer one. I have seen: HTML - pick images of Root Folder from Sub-Folder, and How to link html pages in same or different folders?, and Do I use <img>, <object>, or <embed> for SVG files?.

I have one html document with the svg that I would like to reference here: (this document is called "pd_unit_red_fighter_v.0.0" and is located in the same folder)

<!doctype html>
<html>

<head>
    <title>Title</title>
</head>

<body>

    <svg id="red_fighter" width="480" height="480" viewBox="0 0 24 24">
        <g stroke-width=".25" stroke="#000" fill="#ccc" >
            <circle cx="12" cy="12" r="11.5" fill="#800" />
        </g>
    </svg>

</body>

</html>

I have another html document and I would like this document to reference the svg in the other one:

<!doctype html>
<html>

<head>
    <title>test</title>

</head>

<body>

<object data="red_fighter.svg" type="image/svg+xml">
  <img src="./pd_unit_red_fighter_v.0.0.html" />

<a href="#./pd_unit_red_fighter_v.0.0.html" >
	<img class="logo" src="red_fighter.svg" width="240" height="240"/>
</a>

</object>

</body>

</html>

I have tried both the object tag and but I cannot get it to work. Is there another tag I should use or am I using the wrong information? I am new to this so I apologize for my lack of knowledge.

Upvotes: 2

Views: 2723

Answers (1)

Robert Longson
Robert Longson

Reputation: 124016

When you reference an SVG file using an object or image tag it must actually be an SVG file and not svg data embedded in an html file so you want red_fighter.svg to be

<svg xmlns="http://www.w3.org/2000/svg" id="red_fighter" width="480" height="480" viewBox="0 0 24 24">
    <g stroke-width=".25" stroke="#000" fill="#ccc" >
        <circle cx="12" cy="12" r="11.5" fill="#800" />
    </g>
</svg>

Note the namespace attribute which is mandatory for standalone SVG files.

Then you can reference it using an object or img tag.

Take care that the svg file is served with the correct mime-type (try viewing it directly to check it works first).

Upvotes: 2

Related Questions