posted on
categories svg

Illustrator SVG Hidden Layers

I was recently saving out an SVG in Illustrator and noticed that the hidden layers were output in the SVG code.

Here's a litte screencast demo of a use case scenario for this: http://recordit.co/FCazrVAJGw (sorry export should have been Save As).

I can see why this might be useful, but I wonder how many people have done this and now have code that won't be used.

If you can I'd recommend using https://github.com/davidderaedt/SVG-NOW this adds an Export Optimised SVG option that will strip out any hidden content:

1
<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 595.3 841.9" enable-background="new 0 0 595.3 841.9"><circle fill="#3FB0E5" stroke="#000" stroke-width="8" stroke-miterlimit="10" cx="243" cy="190.9" r="28.1"/><circle fill="#3FB0E5" stroke="#000" stroke-width="8" stroke-miterlimit="10" cx="371.8" cy="186.5" r="29.2"/><path d="M140.7 419.5c0 1.4.9 2 2 2 .8 0 1.2-.1 1.6-.3l.2.8c-.4.2-1 .4-1.9.4-1.8 0-2.9-1.2-2.9-2.9s1-3.1 2.7-3.1c1.9 0 2.4 1.7 2.4 2.7v.5h-4.1zm3.1-.7c0-.7-.3-1.7-1.5-1.7-1.1 0-1.5 1-1.6 1.7h3.1zM146.6 416.4l.8 1.2.6.9c.2-.3.4-.6.6-1l.8-1.2h1.1l-2 2.8 2 3h-1.2l-.9-1.3c-.2-.3-.4-.7-.6-1-.2.3-.4.7-.6 1l-.8 1.3h-1.2l2.1-3-2-2.8h1.3zM151.7 418.3v-1.9h.9v1c.4-.7 1.1-1.1 2.1-1.1 1.4 0 2.5 1.2 2.5 3 0 2.1-1.3 3.1-2.6 3.1-.8 0-1.4-.3-1.8-.9v3.2h-1v-6.4zm1 1.6v.4c.2.7.8 1.2 1.6 1.2 1.1 0 1.8-.9 1.8-2.2 0-1.2-.6-2.2-1.7-2.2-.7 0-1.4.5-1.6 1.3 0 .1-.1.3-.1.4v1.1zM163.7 419.3c0 2.1-1.5 3.1-2.9 3.1-1.6 0-2.8-1.2-2.8-3 0-1.9 1.3-3.1 2.9-3.1 1.7 0 2.8 1.2 2.8 3zm-4.6.1c0 1.3.7 2.2 1.8 2.2 1 0 1.8-.9 1.8-2.3 0-1-.5-2.2-1.7-2.2-1.3 0-1.9 1.2-1.9 2.3zM165.1 418.3v-1.8h.9v1.1c.3-.8.9-1.3 1.6-1.3h.3v1h-.4c-.7 0-1.3.6-1.4 1.4v3.6h-1v-4zM170.6 414.8v1.7h1.5v.8h-1.5v3.1c0 .7.2 1.1.8 1.1.3 0 .5 0 .6-.1v.8c-.2.1-.5.1-.9.1-.5 0-.9-.2-1.1-.4-.3-.3-.4-.8-.4-1.5v-3.2h-.9v-.8h.9V415l1-.2zM179 422.2l-.1-.7c-.3.5-.9.9-1.8.9-1.2 0-1.8-.8-1.8-1.7 0-1.4 1.2-2.2 3.5-2.2v-.1c0-.5-.1-1.3-1.3-1.3-.5 0-1.1.2-1.5.4l-.2-.7c.5-.3 1.2-.5 1.9-.5 1.8 0 2.2 1.2 2.2 2.4v2.2c0 .5 0 1 .1 1.4h-1zm-.1-2.9c-1.2 0-2.5.2-2.5 1.3 0 .7.5 1 1 1 .8 0 1.2-.5 1.4-1 0-.1.1-.2.1-.3v-1zM181.4 421.2c.3.2.9.4 1.4.4.8 0 1.1-.4 1.1-.9s-.3-.8-1.1-1.1c-1-.4-1.5-.9-1.5-1.6 0-.9.8-1.7 2-1.7.6 0 1.1.2 1.4.4l-.3.8c-.2-.1-.6-.3-1.2-.3s-1 .4-1 .8c0 .5.3.7 1.1 1 1 .4 1.5.9 1.5 1.8 0 1-.8 1.7-2.2 1.7-.6 0-1.2-.2-1.6-.4l.4-.9zM188.7 421.2c.3.2.9.4 1.4.4.8 0 1.1-.4 1.1-.9s-.3-.8-1.1-1.1c-1-.4-1.5-.9-1.5-1.6 0-.9.8-1.7 2-1.7.6 0 1.1.2 1.4.4l-.3.8c-.2-.1-.6-.3-1.2-.3s-1 .4-1 .8c0 .5.3.7 1.1 1 1 .4 1.5.9 1.5 1.8 0 1-.8 1.7-2.2 1.7-.6 0-1.2-.2-1.6-.4l.4-.9zM194 416.4l1.1 3.3c.2.5.3 1 .5 1.5.1-.5.3-1 .5-1.5l1.1-3.3h1.1l-2.3 5.8h-1l-2.2-5.8h1.2zM204.3 416.4v5c0 1.3-.3 2.1-.8 2.6-.6.5-1.4.7-2.1.7-.7 0-1.5-.2-1.9-.5l.3-.8c.4.2 1 .5 1.7.5 1.1 0 1.9-.6 1.9-2v-.6c-.3.5-.9 1-1.8 1-1.4 0-2.5-1.2-2.5-2.8 0-2 1.3-3.1 2.6-3.1 1 0 1.6.5 1.8 1v-.9h.8zm-1.1 2.3c0-.2 0-.3-.1-.5-.2-.6-.7-1.1-1.5-1.1-1 0-1.7.9-1.7 2.2 0 1.1.6 2.1 1.7 2.1.6 0 1.2-.4 1.5-1.1.1-.2.1-.4.1-.6v-1z"/></svg>

Or checkout:

#perfmatters

Browse by category: