What is the purpose of trailing <g> tags at end of an SVG?

user_7300297 0
Viewed 136

I often download icons from a site with tons of SVG files, and it always has a trail of SVGs at the end:

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
<g>
    <g>
        <path d="M503.839,395.379l-195.7-338.962C297.257,37.569,277.766,26.315,256,26.315c-21.765,0-41.257,11.254-52.139,30.102
            L8.162,395.378c-10.883,18.85-10.883,41.356,0,60.205c10.883,18.849,30.373,30.102,52.139,30.102h391.398
            c21.765,0,41.256-11.254,52.14-30.101C514.722,436.734,514.722,414.228,503.839,395.379z M477.861,440.586
            c-5.461,9.458-15.241,15.104-26.162,15.104H60.301c-10.922,0-20.702-5.646-26.162-15.104c-5.46-9.458-5.46-20.75,0-30.208
            L229.84,71.416c5.46-9.458,15.24-15.104,26.161-15.104c10.92,0,20.701,5.646,26.161,15.104l195.7,338.962
            C483.321,419.836,483.321,431.128,477.861,440.586z"/>
    </g>
</g>
<g>
    <g>
        <rect x="241.001" y="176.01" width="29.996" height="149.982"/>
    </g>
</g>
<g>
    <g>
        <path d="M256,355.99c-11.027,0-19.998,8.971-19.998,19.998s8.971,19.998,19.998,19.998c11.026,0,19.998-8.971,19.998-19.998
            S267.027,355.99,256,355.99z"/>
    </g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

It seems to be benign, but it can be difficult when I need to copy and paste and modify and know where the ending tags are for my tags. I know what tags are for, but I'm not sure why there's so many. What's the purpose of all those tags?

svg
1 Answers

The key thing to note is that SVG Generators are not perfect.

You can see this, not only from the trailing <g> elements but also from observing that some elements are double-nested inside <g> elements, like this:

<g>
  <g>
    <path />
  </g>
</g>

to no obvious advantage.

As a quality-control practice I like to clean up my SVGs - not least for ease of future legibility and editing.

Consequently, faced with the SVG above, I'd edit it down to the following:

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     lang="en-US"
     viewBox="0 0 512.001 512.001">

<title>My SVG</title>

<path d="M503.839,395.379l 195.7-338.962C297.257,37.569,277.766,26.315,256,26.315c-21.765,0-41.257,11.254-52.139,30.102 L8.162,395.378c-10.883,18.85-10.883,41.356,0,60.205c10.883,18.849,30.373,30.102,52.139,30.102h391.398 c21.765,0,41.256-11.254,52.14-30.101C514.722,436.734,514.722,414.228,503.839,395.379z M477.861,440.586 c-5.461,9.458-15.241,15.104-26.162,15.104H60.301c-10.922,0-20.702-5.646-26.162-15.104c-5.46-9.458-5.46-20.75,0-30.208 L229.84,71.416c5.46-9.458,15.24-15.104,26.161-15.104c10.92,0,20.701,5.646,26.161,15.104l195.7,338.962 C483.321,419.836,483.321,431.128,477.861,440.586z" />
<rect x="241.001" y="176.01" width="29.996" height="149.982" />
<path d="M256,355.99c 11.027,0-19.998,8.971-19.998,19.998s8.971,19.998,19.998,19.998c11.026,0,19.998-8.971,19.998-19.998 S267.027,355.99,256,355.99z" />

</svg>
user_38977750
Related