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

Question

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?

Answer 1

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.