Illustrator Layers and SVG Object ID’s

For every layer, Illustrator will create a new <g> tag where the ID = the layer name:

  • spaces will be converted to underscores
  • dashes remain unchanged
  • other characters are converted to HTML entities

So, a layer named id menu-float will produce <g id=”id_menu-float”>

This ID can then be used for animation or CSS.

If there is an Illustrator layer beginning with “id “, (like “id menu-float”, Svija will give the overall SVG the specified ID. This can then be used to manipulate the SVG with javascript or CSS.

Ask a Question...

Your email address will not be published. Required fields are marked *