How to reference svg file in html?

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.

1 Like

You can use an <img> tag.

1 Like

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.

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.

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

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

3 Likes

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.

3 Likes
<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?

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.

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.

1 Like

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 @gandalf458 ! :smiley:

3 Likes