How to Use Illustrator and CSS to Customize SVGs

Author by Kianna DeByle

How to Use Illustrator and CSS to Customize SVGs

Something cool that I learned here as an intern is that you can use Adobe Illustrator to make SVG graphics easier to customize with CSS and JavaScript. What this means is that you can design a graphic in Illustrator (or import one and edit it) and then you can re-arrange and re-name the layers in the graphic in illustrator to make the exported SVG code easier to read and manipulate with CSS and JavaScript.

When you go into Illustrator and look at how the layers are constructed; it provides a visual representation of the hierarchy of the graphic’s code. Each layer can be viewed in a parent/child relationship (Top layers being parents, sub layers being children of those layers and so on). 

By renaming the layers, you make the code a little easier to manipulate. Because the default code for the SVG graphic does not always include object IDs associated with each layer, and then combined with when you have a complex SVG graphic and you want to target a certain layer of the graphic you might have to really investigate and think about the code to figure out how to select the child element you want.

Illustrator makes it easy to see how the code is structured, and to restructure the layers quickly and assign IDs in a graphical interface rather than looking through large amounts of code. This makes it super easy to assign, or re-assign an ID with a memorable name, so that you can select that layer/element quickly, rather than having to investigate your code and play around with it until you find what works. Illustrator also makes it easy to change the parent/child hierarchy if needed by allowing you to rearrange the layers and groupings.

You can choose to do this with a graphic you designed yourself, or a graphic you found online, for time sake I am going to show you how this works by uploading an icon I found online to  Illustrator and show you how to properly layer it so that when exported, the layers will have a unique ID assigned that can then be called by CSS or JavaScript. Then, I will change the layers using CSS to show you where it can be useful.

Let’s try it.

Step 1:

I went online and found an icon that I felt would be suitable. You can target any layer of an SVG graphic you want to change, but the more complex the graphic, the more complex the layers and the code will be. I chose an icon that I could easily investigate to see how the layers and groupings worked in order to target a specific part of it to change color.

Here is the icon I chose:

Annotation-2019-07-12-105240.png

If you would like to use the icon I chose you can download it here. Otherwise you can find any icon you want; the ideas are the same.  First thing we will need to do with the icon is to open it in Illustrator and then ungroup the layers. This will make the code a little less complex as far as parent/child elements go.

2nd-Image.png

This icon is pretty simple but remember the more complex the layering the more complex the parent/child relationship will be in your code. Here is what the layers would look like if we didn’t ungroup them:

3.png

Imagine a more complex graphic, there would be layers and groups within other layers and groups and eventually the hierarchy would become very unclear.

 

Step 2:

Make sure you have the layers tab open in illustrator. Once you have that open, and the elements are ungrouped, you should notice that now there is a top layer named Capa 1 and two sub layers named <compound path> and <path>. Think of these as Capa 1 being the parent, and <compound path> and <path> are its children as this is how it appears now in its code structure.  Capa 1 would be the only layer that has an ID associated with it currently, the other two layers are named with <> and therefore are ignored when the graphic is exported.

4.png

Select the one that corresponds to the part you are hoping to change with CSS in your site. (I recommend selecting them and seeing which corresponds to what name, as sometimes the little preview box can be hard to see.) I double clicked the layer called <path> and renamed it “mercury” as that is what I want its ID to be called when I export it. You can name it what you would like. If we do not rename this layer, there will be no ID to call quickly with CSS or JavaScript, all it will have is a <path> tag associated with it which we want to be more unique.

We also need to change the name of the parent layer (Capa 1) to something we will remember a little easier. I renamed mine to “thermometer”.

Step 3:

Now let’s save the icon in Illustrator so that the new ID tags show up in the code. Your file should be saved as an SVG graphic already if you used the same icon I did. However, let me show you how to export to an SVG graphic as this is where we will tell Illustrator to create IDs using the layer names we created.

Go ahead and click file > export > export as:

5.png

Make sure you have it set to save as an SVG then click export. Also make note of where this is exporting to in your file system.

6.png

Then make sure when the SVG Options window pops up that you have “Layer Names” selected under the dropdown for Object IDs. This is critical or Illustrator will not generate the ID names from the layer names. Once that is done click ok. You have now exported your SVG graphic.

7.png

 

Step 4:

 After that open the file in Visual Studio (you can use your preferred IDE) and inspect it to make sure your changes took place. Notice how the IDs were now generated:

8.png

Without these IDs, your code has a parent element of <svg> and two child elements called <path>. If our graphic were more complex, this could get messy as you are trying to call child elements to the <svg> tag. Giving each layer a memorable ID makes it much easier to call that portion of the graphic and change it. Notice how “thermometer” became the ID for the <svg> tag and everything that we had in Illustrator below that became the child elements of the <svg>.

If we were to call the “thermometer” ID, we could change the entire icon now. And if we call “mercury” we could change just the mercury indicator in the icon. You could add a name to the other layer, if you wanted to change just the outside of the thermometer.

And hey you might be thinking “Well hey, now that I see the code wouldn’t it just be easier to type in some ID tags right in the code rather than opening it in illustrator and messing with it” Depending on the graphic, possibly. With this icon we needed to look at the layering to get a sense of the hierarchy and which layer is what in the graphic, we also needed to rename the layers/ID tags fast. Imagine if your SVG graphic has 100 lines of code and your trying to find what <path> tag is associated with a specific part of your graphic. It would be a lot of work to try and figure that out.  

Step 5:

Now let’s get an HTML file started so we can then add some CSS to our project. This is the part where we can see how our changes made our life easier.  Start a new HTML file and copy the SVG code you opened previously and paste the entire code grouping for the SVG graphic into the <body> section in your HTML.

Like this:

9.png

 

Step 6:

Now lets try changing our icon!

Go ahead and create some CSS code. I chose to call the #thermometer ID in order to change its size and the #mercury ID below that to change the color inside the thermometer.

 

11.png

Open the HTML file and look at the result of your code. Here is the result I got:

12.png

 

By calling the #thermometer ID I was able to resize the whole graphic. And with #mercury I was able to change the indicator to red. Without these IDs you would need to use CSS selectors get locate the element you want to change.

Now if you wanted, you could use JavaScript to dynamically change the graphic. This would work especially well if you need the graphic to change based on a series of if statements and rather than having to redesign a graphic manually for multiple scenarios, you can just dynamically change the graphic using CSS and JavaScript for each outcome. I think a cool and simple project would be to set up a weather API to dynamically change the mercury in the thermometer based on the temperature outside!