1

I'm using Illustrator CC.

I select a layer, which is 16x44 pixels:

enter image description here

Than I right click, Export, and I save it on SVG. That't the result:

<svg xmlns="http://www.w3.org/2000/svg" width="5.64444mm" height="15.52222mm" viewBox="0 0 16 44">
  <title>Slider</title>
  <g id="Livello_2" data-name="Livello 2">
    <g id="Slider">
      <g id="Background">
        <rect x="0.5" y="0.5" width="15" height="43" fill="#a09f9f"/>
        <path d="M15,1V43H1V1H15m1-1H0V44H16V0Z" fill="#231f20"/>
      </g>
    </g>
  </g>
</svg>

Some weirdness:

  1. what are <title>Slider</title> and <g id="Livello_2" data-name="Livello 2">? They aren't on layers. Can I remove it?
  2. It places width="5.64444mm" height="15.52222mm" viewBox="0 0 16 44", which mess the dimensions. Can I remove that "scaling"? I don't want it.

Thanks

Improve this question

1 Answer 1

Reset to default
1

"Livello" is Italian for layer. In my UK English version of AI, it appears as <g id="Layer_2" data-name="Layer 2">

However the tag <g id> is only a group id, not a layer as such. So, you can just remove the tag if you want. Obviously you mustn't forget to also remove the relevant </g> tag

Here's an example showing two rectangles, deleting the <g id="Layer_2" data name="Layer 2", and renaming the other group IDs. I'm using Notepad++ for editing the XML.

enter image description here

Edit: After comments from the OP, and a little more research it would seem there is a better way to export an SVG rather than using Export Selection. Using Export As seems to give less quirky results, with no manual editing required.

Anyway, here's what I did

  • Click Object > Artboards > Fit to Artwork Bounds. This will rescale the artboard to fit the artwork.
  • Click File > Export > Export As, choose SVG as the file format, then hit Export
  • The SVG export dialog will appear. Click OK

enter image description here

Here's the XML output without any manual editing. It's pretty clean, with no Illustrator weirdness.

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 136 325">
    <defs>
        <style>.cls-1{fill:#bcbec0;stroke:#231f20;stroke-miterlimit:10;stroke-width:6px;}</style>
    </defs>
    <title>Untitled-1</title>
    <rect class="cls-1" x="3" y="3" width="130" height="319"/>
</svg>

The difference between the viewbox and object dimensions is simply due to the size of the stroke. If there were no stroke, the viewbox and object dimensions would be identical. Also note that in the SVG export dialog you could set the Object IDs to "minimal" - which will get rid of the <SVG id="Layer> nonsense, which is unnecessary.

Improve this answer
6
  • But on Illustrator I don't have any "layer" above "Slider". Why it adds it? And no, I don't want to manually edit every export, obviously.
    – markzzz
    Jul 19, 2019 at 12:15
  • @markzzz I don't know why Illustrator uses "Layer_2" in the group id, or why it even adds that group at all, since it's not necessary. But it's not actually a layer anyway, just Illustrator's weird way of doing things.
    – Billy Kerr
    Jul 19, 2019 at 12:17
  • ok. What about that "scaling". It doesn't export the same size. I have AI CC 2019
    – markzzz
    Jul 19, 2019 at 12:25
  • I think that's useful graphicdesign.stackexchange.com/questions/39505/…
    – markzzz
    Jul 19, 2019 at 12:52
  • @markzzz - see my edit now.
    – Billy Kerr
    Jul 19, 2019 at 12:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.