How to reference svg file in html?

[Chronzam]

Is there way in html to do exactly what require/include does in php? I want to refence the svg file instead of putting it inside the html file.

[Gandalf]

You can use an <img> tag.

[SamA74]

There are a few ways of putting SVG in your page.
I think the question is: Why? To decide on which method will best suit your needs.

[Chronzam]

I have a few amounts of svg icons that I want to include and animate but I think it would be messy if I include them directly in a html file.

[Erik_J]

@Chronzam

I have a few amounts of svg icons that I want to include

@Gandalf has already suggested a way to “include” the SVG by reference in an <img> tag.

I think that way would suit what you want to do.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Image_and_multimedia

More info:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Supported_image_formats

[SamA74]

@Chronzam

I want to include and animate

One of the issues with using the img tag is applying dynamic CSS to the image, such as hover effects, CSS appled to the page will only affect code within the page, not code referenced by it.
For this reason, when I use SVG icons and want hover effects, I include the SVG in the HTML, but I do it via PHP includes.
Firstly, it keeps all that clutter out of the source code (it’s still there in the resulting HTML).
Secondly, you still retain the image as a separate SVG file, that may be reused elsewhere, but still only edited at a single place.
Another method to reduce code clutter is to define your shapes somewhere out of the way within <defs> tags, then use them in place in the HTML using just a <use> tag with an xlink:href attribute.

[Chronzam]

<svg width="100" height="100">
   <style>/*Styles*/</style>
   /*svg*/
</svg>

I made it like this, then referencing them with image. Animation works fine, but are there any drawbacks?

[SamA74]

If it works, I guess it’s OK. I wasn’t sure if the animation was in some way interative with the user on the page, then you may have needed to in-line the SVG.

@Chronzam

but are there any drawbacks?

I can’t think of much other than it’s dividing your SVG styling from the main CSS, which may or may not be a problem for you.
When I use includes for icons, eveything is styled in the main CSS, so I can for example, apply colours to icons with CSS variables, to fit in with the global colour scheme of the site, without the need to hunt down and make edits in several files. So in such cases it can help to keep all the CSS together.

[Chronzam]

@SamA74

I wasn’t sure if the animation was in some way interative with the user on the page, then you may have needed to in-line the SVG.

It will just animate by itself, no interaction needed.

Yes, I’ll separate the styles from the svgs after.

Thanks for helping @Erik_J @SamA74 @Gandalf !