CODEWITHSUNDEEP
htmlsvghyperlink
Max
Max

Reputation: 367

How do I link an .svg file in my HTML?

I've got an .svg file with some code in it.
If I just put that code in my HTML with the <svg> tag it works fine.
The problem is is that I've got quite a lot of code in my .svg and I don't want to put all that code in my HTML. So I've made an .svg file and tried to link it, but it didn't seem to link.
Does anyone know how I'm supposed to link an .svg file to a HTML file?

Upvotes: 20

Views: 57636

Answers (3)

Bazinga777
Bazinga777

Reputation: 5281

I would usually use it inside an using <img src="link to svg file" />

<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGc+PGNpcmNsZSBpZD0iY2lyY2xlIiBmaWxsPSJub25lIiBzdHJva2U9IiMzMzMiIHI9IjE0IiBjeD0iMTUiIGN5PSIxNSIvPjxjaXJjbGUgaWQ9ImRvdCIgZmlsbD0iIzMzMyIgc3Ryb2tlLXdpZHRoPSIwIiByPSIxIiBjeD0iMTUiIGN5PSI3LjUiLz48cGF0aCBpZD0iaSIgZmlsbD0iIzMzMyIgc3Ryb2tlLXdpZHRoPSIwIiBkPSJtMTIuNSwxMS41bDMuNSwwbDAsMTFxMCwwLjUgMC41LDAuNWwxLDBsMCwxbC01LDBsMCwtMWwxLDBxMC41LDAgMC41LC0wLjVsMCwtOS41cTAsLTAuNSAtMC41LC0wLjVsLTEsMGwwLC0xeiIvPjwvZz48L3N2Zz4=" />

Upvotes: 5

Jay
Jay

Reputation: 747

How to Add Scalable Vector Graphics to Your Web Page

for example you can use :

<object type="image/svg+xml" data="image.svg">Your browser does not support SVG</object>

Upvotes: 2

fstanis
fstanis

Reputation: 5534

The easiest (and probably most correct) way of doing this is to simply put your SVG file as src in an <img> tag as if it were any other format.

Keep in mind that this might not work in some older browsers (this is the problem is general with SVG, not just with using it in an img tag).

Another option is using it inside an <object> tag, as seen in this article (which also breaks down the two options and the drawbacks of both):

<object type="image/svg+xml" data="kiwi.svg" class="logo">
  Kiwi Logo <!-- fallback image in CSS -->
</object>

In this case, your retain the ability to affect the parts of your SVG with CSS - which may or may not be what you want.

Upvotes: 11

Related Questions