title: Does SVG Code Inclusion makes Project Slow?
body: <p>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.</p>
  <pre><code>&lt;div class=&quot;cross-svg&quot;&gt;
   &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;28.284&quot; height=&quot;28.284&quot; viewBox=&quot;0 0 28.284 28.284&quot;&gt;
    &lt;g id=&quot;cross&quot; transform=&quot;translate(-298 -432)&quot;&gt;
      &lt;rect id=&quot;Rectangle_32&quot; data-name=&quot;Rectangle 32&quot; width=&quot;38&quot; height=&quot;2&quot; transform=&quot;translate(299.414 432) rotate(45)&quot;/&gt;
      &lt;rect id=&quot;Rectangle_33&quot; data-name=&quot;Rectangle 33&quot; width=&quot;38&quot; height=&quot;2&quot; transform=&quot;translate(326.284 433.414) rotate(135)&quot;/&gt;
    &lt;/g&gt;
   &lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>
  <p>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?</p>
  <p><code>&lt;img src={crossSVG} alt=&quot;&quot; /&gt;</code></p>
  <p>Importing or pasting, Which one is better?</p>