html - How to make SVG modifiable without using in-line svg

Question

I would like to use SVG icons in my websites, and I know using <image> will limit my ability to change the SVG properties (for example, I can't change the fill color on hover).

So I found the method of in-line SVG, which seems to allows better manipulation. But gut feeling tells me that putting SVG drawing data into HTML file will create maintainability problem in the future.

I am trying to find a method where I can...

1. Save my svg in another external file
2. Call that svg from that file to my html file
3. The html file will still be able to change the fill color.

Is this possible? And if yes, what is the keyword I should be looking for?

question from:https://stackoverflow.com/questions/65950723/how-to-make-svg-modifiable-without-using-in-line-svg

Answer 1

It depends on the programming language you use.

• If you include an HTML file with (iframe), you cannot do what you want.

• If you include a PHP file with (include) it will work the way you want.

For example:

index.php include to a svgs.php file.

---

However, you may want to consider creating an icon file with SVG Sprites. [See]

So you can load and recolor multiple icons from a single ".svg" file using short commands like below.

Remember: This technology does not support some SVG features such as Gradient. [1] [2]

<svg viewBox="0 0 24 24" class="icon">
  <use href="#foo"></use>
</svg>

<svg viewBox="0 0 24 24" class="icon">
  <use href="#bar"></use>
</svg>

Automatic SVG sprite generator tool: https://svgsprit.es/

---

Finally, you can use 3rd part scripts such as SVG injectors.

• https://github.com/iconfu/svg-inject
• https://github.com/tanem/svg-injector