svg tag vs g tag?

[EdricChan03]

In the Angular Material example, they are using <svg> tags within the SVG <defs> tag:

https://github.com/angular/material2/blob/7f8fd9fc06bf6e49162cc144d44fc4261e11a4e8/src/demo-app/icon/icon-demo.ts#L48-L67

EDIT: Here's the code as shown above:

const INLINE_ICON_SET = `
  <svg>
    <defs>
    <svg id="account-balance">
      <path d="M4 10v7h3v-7H4zm6 0v7h3v-7h-3zM2 22h19v-3H2v3zm14-12v7h3v-` +
        `7h-3zm-4.5-9L2 6v2h19V6l-9.5-5z"/>
    </svg>
    <svg id="account-balance-wallet">
      <path d="M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-` +
        `2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9` +
        `-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"
      />
    </svg>
    <svg id="account-box">
      <path d="M3 5v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H` +
        `5c-1.11 0-2 .9-2 2zm12 4c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-` +
        `3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z"/>
    </svg>
    </defs>
  </svg>
`;

However, by default, MDI is compiled with the <g> tag:

<svg>
  <defs>
    <g id="...">
      ...
    </g>
  </defs>
</svg>

In your opinion, which feels better? <svg>, or <g>?

[Templarian]

It looks like nesting the SVG is the correct approach. I think I followed their older example most likely.

We can update the library to follow this fairly easily in the next build. We have about 2 weeks until I start to wrap up the next release (v2.6.xx). Will this change break anything (shouldn't right?)

I'll have time this week to look at this as I wrap up some of the newer libraries we're releasing.

[Templarian]

@SuperITMan @Chan4077 When you have time please give feedback on this. Even if it's just "That sounds good to me!". I'm focused on React/Angular/Vue at the moment, so not familiar with this framework's expectations.

[EdricChan03]

@Templarian Actually, the demo that is in the docs for the MDI site has a modified SVG file which is saved on my res subpage. Doesn't seem to break anything on the Stackblitz.

https://chan4077.github.io/res/mdi.svg

You can check out the source code for modifying the g tag to svg:

https://github.com/Chan4077/res/blob/master/tools/gulp/tasks/icons.ts

[Templarian]

This was fixed in the v2.7.94 release.