1

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?

N SARATH CHAND
  • 139
  • 2
  • 11
  • Does this answer your question? [SVG icons vs. PNG icons in modern web sites](https://stackoverflow.com/questions/24433640/svg-icons-vs-png-icons-in-modern-web-sites) – Sully Nov 30 '21 at 05:21
  • no doubt, it increases the code length, but other way it decreases the loading time of the websites. Use less graphics in website makes it faster. – Aman Sharma Nov 30 '21 at 05:25
  • @Sully, No, It doesn't tell about the effect on bundle size. – N SARATH CHAND Nov 30 '21 at 05:52
  • Count the transferred filesizes, one single file will always be less than multiple svg files due to gzip/brotli compression – Danny '365CSI' Engelman Nov 30 '21 at 07:26
  • Slower than what? What are we comparing this to? Sure, it's slower than not having a UI at all. It's just as fast as using SVG in some other way though. – Robert Longson Nov 30 '21 at 07:37
  • I want it to compare with importing SVG using **img** tag – N SARATH CHAND Nov 30 '21 at 14:51
  • There is no significant difference in speed and typically, the inline one is slightly faster. But the main problem is using ``'s pointing to the svg file severely impairs SVG capabilities, negating some of its advantages over regular HTML. It affects its ability to inherit parent properties (e.g: usage of `currentColor`) and it also limits animation capabilities. To the point where there are plugins for replacing any `` pointing to an SVG with the contents of the SVG automatically, as soon as the SVG has loaded. If anything, inline SVG's are considered "best practice". – tao Jan 22 '22 at 20:05

1 Answers1

-1

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.

CharlieW
  • 35
  • 7