I am a UI Developer working on a project. Previously, I used to include SVG code inside HTML, so I can use path tags inside it for animations. Like this.
<div class="cross-svg">
<svg xmlns="http://www.w3.org/2000/svg" width="28.284" height="28.284" viewBox="0 0 28.284 28.284">
<g id="cross" transform="translate(-298 -432)">
<rect id="Rectangle_32" data-name="Rectangle 32" width="38" height="2" transform="translate(299.414 432) rotate(45)"/>
<rect id="Rectangle_33" data-name="Rectangle 33" width="38" height="2" transform="translate(326.284 433.414) rotate(135)"/>
</g>
</svg>
</div>
Now, I'm being told that, It's not a good practice to do like that. Writing the SVG code inside HTML helps to increase the code length, which directly effects on build size. Is it true? If yes, how can I use the ID inside SVG tag for animation?
<img src={crossSVG} alt="" />
Importing or pasting, Which one is better?
No actually the complete opposite. The reason we use SVG instead of images is that SVG is generated with the website and therefore has not made the website slower with uploading and instead just being displayed instantly along with the site. I hope this answered your question but if not just reply to this one and I will try to give you a more detailed answer.