Presented here is an SVG with the following specifications
https://i.sstatic.net/vn8K8.jpg
<svg width="589" height="911" xmlns="http://www.w3.org/2000/svg">
<path class="move-line" d="m459,........... />
<path d="m277,239c0 ......./>
</svg>
In this SVG, note that class="move-line" has been added to a specific path
I proceeded by copying and pasting the entire tags above into my HTML file
Subsequently adding CSS styling
.move-line {
stroke-dasharray: 10 10; }
The desired output was achieved as displayed below
https://i.sstatic.net/GhiyI.jpg
However, an issue arose due to the size of the complete SVG tags (resulting from the path),
Including it directly in my HTML file led to excessively long code.
Is there a workaround for this?
<img src="xxx.svg" >
To mimic inserting the entire svg tag within html??
I attempted
<object data='xxx.svg'></object>
and
<svg width=".." height=".." xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image xlink:href="method-draw-image (1).svg">
</svg>
Both displayed the original svg image
however, my CSS styles were ineffective
Your assistance in resolving this matter would be highly appreciated, thank you!