Highlighted

Illustrator css class for layers (or shapes)

New Here ,
Feb 22, 2020

Copy link to clipboard

Copied

Hey,

 

Just started trying out Illustrator for a small project Im playing around with. First impression is really good and so far I prefer it over Inkscape, but I have a small issue that sadly enough is abit of a "deal breaker".

Hopefully its just a knowledge gap on my side and something that can be fixed by the nice experts here!

 

My Goal:

What I want is to be able to assign css-classes to layers (or shapes/objects) in Illustrator, then Ill use the css-class to toggle it on/off on a website. I cant do much about how the website works, only use the "tools" provided by it.

My goal was to hide the object in "layer1". (spoiler, try number 2 works! But requires manual editing of the svg via texteditors)

 

First try:

Two issues here:

First the automated class name(st0/st1), it makes it troublesome when I have several "groups" that I want to toggle on/off. 

Second, if I use class="st1" the opacity setting stops working, so it hides what ever it overlaps witch sort of defeats the purpose.

First test, didnt work.First test, didnt work.

 

Second try:

Works, but what I have to do is manually enter "class="layerTest"" after id="layer1".

Its ok, but I have alot of these to do... 

It would be sweet to be able to assign a class to layers inside of Illustrator since it seems to be a working solution.

 

Second test, works!Second test, works!

 

Third try:

So close, yet so far!

I tried using a custom Graphic Format, then saving it as SVG with the css-properties under advance set to Format Element (might be translating it wrong, its the option furthest down in the list).

This generates a class that I can pick myself, but once again the opacity stops working...

 

Third test, didnt work.Third test, didnt work.

 

 

Does anyone know if there is a solution for this?

I tried experimenting with "save as SVG" and options, aswell as "export as SVG" but "save as" as mentioned above seems to be the closest I could get.

 

I could probably make a small script that searches the svg for "id="layer*"" and adds "class="layer*""  but I would love to have a complete solution within Illustrator for simplicity.

 

 

 
TOPICS
Import and export

Views

81

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Illustrator css class for layers (or shapes)

New Here ,
Feb 22, 2020

Copy link to clipboard

Copied

Hey,

 

Just started trying out Illustrator for a small project Im playing around with. First impression is really good and so far I prefer it over Inkscape, but I have a small issue that sadly enough is abit of a "deal breaker".

Hopefully its just a knowledge gap on my side and something that can be fixed by the nice experts here!

 

My Goal:

What I want is to be able to assign css-classes to layers (or shapes/objects) in Illustrator, then Ill use the css-class to toggle it on/off on a website. I cant do much about how the website works, only use the "tools" provided by it.

My goal was to hide the object in "layer1". (spoiler, try number 2 works! But requires manual editing of the svg via texteditors)

 

First try:

Two issues here:

First the automated class name(st0/st1), it makes it troublesome when I have several "groups" that I want to toggle on/off. 

Second, if I use class="st1" the opacity setting stops working, so it hides what ever it overlaps witch sort of defeats the purpose.

First test, didnt work.First test, didnt work.

 

Second try:

Works, but what I have to do is manually enter "class="layerTest"" after id="layer1".

Its ok, but I have alot of these to do... 

It would be sweet to be able to assign a class to layers inside of Illustrator since it seems to be a working solution.

 

Second test, works!Second test, works!

 

Third try:

So close, yet so far!

I tried using a custom Graphic Format, then saving it as SVG with the css-properties under advance set to Format Element (might be translating it wrong, its the option furthest down in the list).

This generates a class that I can pick myself, but once again the opacity stops working...

 

Third test, didnt work.Third test, didnt work.

 

 

Does anyone know if there is a solution for this?

I tried experimenting with "save as SVG" and options, aswell as "export as SVG" but "save as" as mentioned above seems to be the closest I could get.

 

I could probably make a small script that searches the svg for "id="layer*"" and adds "class="layer*""  but I would love to have a complete solution within Illustrator for simplicity.

 

 

 
TOPICS
Import and export

Views

82

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Feb 22, 2020 1
Community Beginner ,
Sep 25, 2020

Copy link to clipboard

Copied

I need something similar to this. Where the polygon element class name takes the parent 'g' id name or at the very least added to it.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 25, 2020 0
Adobe Community Professional ,
Sep 25, 2020

Copy link to clipboard

Copied

This article might help you. I know that Illustrator sets the CSS by how you name your layers. This is an article I give to my students. It might help you.

This is an excerpt from this article. It goes into a little more information on the website.

"Illustrator will export layers as groups for an SVG file and will use the name as the ID of the group. These IDs can then be easily selected and manipulated using JavaScript or CSS, just as any other object on a web page."

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 25, 2020 0
New Here ,
Oct 06, 2020

Copy link to clipboard

Copied

Hey, its true that Illustrator names the ID after the layers and this "solves" the problem if you have single objects that you want to manipulate.

but its another situation if you want to handle groups of objects simultanious.

 

 

in my case I have groups of 2-10 Objects that I want to manipulate.

Im working in a third party system that targets classes so IDs doesnt work unfortunatly.


my "work around" is so far to complete the svg in Illustrator then open it with nodepad++ and ads the same Class I want.

it works but is abit tedious.

 

i

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 06, 2020 0