![]() Also make note of where this is exporting to in your file system. Make sure you have it set to save as an SVG then click export. Go ahead and click file > export > export as: 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. Your file should be saved as an SVG graphic already if you used the same icon I did. Now let’s save the icon in Illustrator so that the new ID tags show up in the code. We also need to change the name of the parent layer ( Capa 1) to something we will remember a little easier. 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 tag associated with it which we want to be more unique. (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 and renamed it “mercury” as that is what I want its ID to be called when I export it. Select the one that corresponds to the part you are hoping to change with CSS in your site. 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. Think of these as Capa 1 being the parent, and and are its children as this is how it appears now in its code structure. 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 and. Make sure you have the layers tab open in illustrator. Imagine a more complex graphic, there would be layers and groups within other layers and groups and eventually the hierarchy would become very unclear. ![]() Here is what the layers would look like if we didn’t ungroup them: This icon is pretty simple but remember the more complex the layering the more complex the parent/child relationship will be in your code. This will make the code a little less complex as far as parent/child elements go. First thing we will need to do with the icon is to open it in Illustrator and then ungroup the layers. Otherwise you can find any icon you want the ideas are the same. If you would like to use the icon I chose you can download it here. 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. 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 went online and found an icon that I felt would be suitable. Then, I will change the layers using CSS to show you where it can be useful. 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. Illustrator also makes it easy to change the parent/child hierarchy if needed by allowing you to rearrange the layers and groupings. 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 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. 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. Each layer can be viewed in a parent/child relationship (Top layers being parents, sub layers being children of those layers and so on).īy renaming the layers, you make the code a little easier to manipulate. 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. 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. How to Use Illustrator and CSS to Customize SVGs
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |