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 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 https://github.com/stringham/angular-template-formatter/pull/13#issuecomment-445184473