Illustrator SVG Layer 1 id issue take 2

Further to my post Illustrator SVG Id Issue and thanks to @aexmo I discovered that Illustrator adds in the id="Layer_1" as it's linked to the layer name. I'm not sure this is a great approach and have some thoughts.

First off thanks to @aexmo for the reply:

@s10wen yup thats intentional. the id is linked to layer name. so if you have multiple svgs on an artboard, just set layer name for each
— Alex Morris (@aexmo) July 11, 2014

Illustrator Layer 1

Since finding this out, I wondered how many people optimised their SVGs, or might have encountered the same issue, so I did a quick search on GitHub.

https://github.com/search?q=<svg+version%3D"1.1"+id%3D"Layer_1"+xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"+xmlns%3Axlink%3D"http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink"&type=Code&ref=searchresults

I actually ended up getting some mixed results doing this hitting search a few times (possibly related to https://developer.github.com/changes/2014-04-07-understanding-search-results-and-potential-timeouts/), but there's no denying that I'm not alone.

It's also currently in WordPress https://github.com/WordPress/WordPress/search?q=Layer_1&ref=cmdform.

<svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve"><style>.style0{fill:    #0074A2;}</style><g><g><path d="M4.548 31.999c0 10.9 6.3 20.3 15.5 24.706L6.925 20.827C5.402 24.2 4.5 28 4.5 31.999z M50.531 30.614c0-3.394-1.219-5.742-2.264-7.57c-1.391-2.263-2.695-4.177-2.695-6.439c0-2.523 1.912-4.872 4.609-4.872 c0.121 0 0.2 0 0.4 0.022C45.653 7.3 39.1 4.5 32 4.548c-9.591 0-18.027 4.921-22.936 12.4 c0.645 0 1.3 0 1.8 0.033c2.871 0 7.316-0.349 7.316-0.349c1.479-0.086 1.7 2.1 0.2 2.3 c0 0-1.487 0.174-3.142 0.261l9.997 29.735l6.008-18.017l-4.276-11.718c-1.479-0.087-2.879-0.261-2.879-0.261 c-1.48-0.087-1.306-2.349 0.174-2.262c0 0 4.5 0.3 7.2 0.349c2.87 0 7.317-0.349 7.317-0.349 c1.479-0.086 1.7 2.1 0.2 2.262c0 0-1.489 0.174-3.142 0.261l9.92 29.508l2.739-9.148 C49.628 35.7 50.5 33 50.5 30.614z M32.481 34.4l-8.237 23.934c2.46 0.7 5.1 1.1 7.8 1.1 c3.197 0 6.262-0.552 9.116-1.556c-0.072-0.118-0.141-0.243-0.196-0.379L32.481 34.4z M56.088 18.8 c0.119 0.9 0.2 1.8 0.2 2.823c0 2.785-0.521 5.916-2.088 9.832l-8.385 24.242c8.161-4.758 13.65-13.6 13.65-23.728 C59.451 27.2 58.2 22.7 56.1 18.83z M32 0c-17.645 0-32 14.355-32 32C0 49.6 14.4 64 32 64s32-14.355 32-32.001 C64 14.4 49.6 0 32 0z M32 62.533c-16.835 0-30.533-13.698-30.533-30.534C1.467 15.2 15.2 1.5 32 1.5 s30.534 13.7 30.5 30.532C62.533 48.8 48.8 62.5 32 62.533z" class="style0"/></g></g></svg>

I've played about with various settings in Illustrator, but it seems that all variations will add id="Layer_1" even if it's not being used.

Illustrator SVG Options

A drawback of Illustrator doing this, means that if you save out multiple SVGs and they then all contain id="Layer_1" now you're dealing with multiple ids, which isn't good and it's possible that other SVGs will inherit the wrong styles.

I can understand that in some scenarios a unique id might be required, but I think it would be helpful if Illustrator gave you a heads up. Perhaps if saving out an SVG and the layer name is the default id="Layer_1" there should be an include in the SVG options to disable it if it's not in use? maybe I'm missing something? interested to know your thoughts, please comment below.

Browse by category: