I have an HTML file that utilizes inline SVG. This allows me to assign classes to my SVG elements and style them using CSS. The code snippet below demonstrates how it is currently set up:
<div>
<svg class="icon" viewbox="0 0 512 512">
<path d=" ... "/>
</svg>
</div>
However, the <path> tag can become quite lengthy if the SVG image is complex. I am using this SVG in three different locations, which means I need to repeatedly copy and paste the entire path every time. It would be more efficient if I could define the path only once, preferably within a CSS class like so:
<div>
<svg class="icon" viewbox="0 0 512 512">
<path class="compleximage"/>
</svg>
</div>
.compleximage
{
d: ... ;
}
Unfortunately, this method does not seem to work as intended. It's possible that I may be misunderstanding the syntax or that this approach simply isn't feasible. If that is the case, are there any alternative ways to avoid repetitive copying and pasting of the SVG code in my HTML files? I aim to adhere to the "0, 1, or infinite" design principle, and duplicating code three times goes against that concept.