Removing SVG prefixes may break functionality

[David-Klemenc]

Namespacing

SVG Elements
Usually when you use an SVG element in an Angular template, you will need to prefix its name with the svg: namespace prefix, as is done here:

example:

<svg viewBox="0 0 250 250">
  <svg:polygon points="125,30 125,30 125,30 31.9,63.2 46.1,186.3 125,230 125,230 125,230 203.9,186.3 218.1,63.2" />
  <svg:polygon points="125,30 125,52.2 125,52.1 125,153.4 125,153.4 125,230 125,230 203.9,186.3 218.1,63.2 125,30" />
  <svg:path d="M125,52.1L66.8,182.6h0h21.7h0l11.7-29.2h49.4l11.7,29.2h0h21.7h0L125,52.1L125,52.1L125,52.1L125,52.1
      L125,52.1z M142,135.4H108l17-40.9L142,135.4z"/>
</svg>

This will let Angular know that it's supposed to create SVG elements instead of HTML ones.

You may not always need this prefix. In particular, when the root tag is in the same component as all of the SVG content, Angular is able to infer the correct namespace automatically. But as soon as you break that content up into multiple components, this inference will no longer be possible.

For this reason, I recommend always using the namespace prefix even in cases where it's not strictly necessary. Plus, it communicates to anyone reading the template code that SVG is being used.

link to original article

Originally posted by @David-Klemenc in #13 (comment)