Adding a web link INSIDE an SVG file (and applying CSS to an SVG)!

How to Add Interactive Links to Scalable Vector Graphics (SVGs) Using Adobe Illustrator

Creating interactive content for websites can be a game-changer when it comes to user engagement. One powerful way to do this is by embedding links into Scalable Vector Graphics (SVGs). With the right tools, you can make your SVGs clickable, adding a dynamic layer to your web-based designs. In this blog post, we’ll walk through how to turn an SVG graphic into a clickable, interactive piece of your website using Adobe Illustrator and a little bit of code.

Step 1: Exporting Your Artwork from Adobe Illustrator

The first step in this process is to get your artwork ready for use. We begin by removing the topic heading and adjusting the artboard to focus on the area you wish to include in your design. This can be done easily in Adobe Illustrator.

  1. Edit Your Artboard: Focus on the area that will be interactive by adjusting your artboard size.
  2. Export the File: Once you’re happy with the design, export it as an SVG file. This is done by selecting File → Export → Export As, and choosing SVG as your format.
  3. View the Code: After exporting, open the SVG file in your browser and view the code. You can copy this code to use in your web project.

Step 2: Adding Interactivity with JavaScript and CSS

Once you have the SVG code, it’s time to add interactivity. For this, we’ll use JavaScript and CSS to enable hover effects and clickable links.

  1. Create the Hover Effect: Start by making sure that when a user hovers over the SVG element, the cursor changes to a pointer. This tells the user that the object is clickable. javascriptCopyEdit<polygon style="cursor: pointer;" />
  2. Add CSS for Hover Effects: To enhance the user experience, we can add a subtle opacity change when hovering over the SVG elements. This can be done using the hover pseudo-class in CSS. cssCopyEdit.polygon-overlay:hover { opacity: 0.7; } This will make the SVG elements slightly transparent when hovered over, giving users a visual cue.

Step 3: Grouping Elements for Easier Interaction

One issue when dealing with SVGs in Illustrator is that if you hover over the text, it can behave as if you want to edit it. To resolve this, we can wrap each SVG element and its text in a group (using the <g> tag in SVG).

  1. Wrap Elements in a Group: To prevent text from being selected independently, wrap both the polygon and the text elements in a <g> (group) tag. htmlCopyEdit<g> <polygon class="polygon-overlay" /> <text>Your Text Here</text> </g> This will allow the entire group to be selected, including the text and polygon, making the interaction smoother.

Step 4: Adding Links with HTML

Now, we need to make our SVG elements clickable. This can be done by wrapping the SVG content in anchor tags (<a>), which will point to an external webpage or another part of your site.

  1. Wrap the Group in an Anchor Tag: To make the entire group clickable, wrap it in an <a> tag and provide the link (for example, to a webpage like https://ricochet.com.au). htmlCopyEdit<a href="https://ricochet.com.au" target="_blank"> <g> <polygon class="polygon-overlay" /> <text>Your Text Here</text> </g> </a>
  2. Open the Link in a New Tab: Use the target="_blank" attribute to ensure that the link opens in a new tab when clicked.

Step 5: Testing and Final Touches

Once the code is set up, you can paste it into a tool like JSFiddle or directly into your webpage’s HTML to test it. When you hover over the SVG elements, you should see the cursor change to a pointer, and the opacity of the elements will adjust on hover. Clicking any part of the graphic will now open the specified webpage.

Conclusion

By combining Adobe Illustrator’s powerful design tools with HTML, CSS, and JavaScript, you can create interactive SVGs that enhance your website’s user experience. Whether you’re embedding maps, diagrams, or simply adding interactive features to your design, SVGs offer endless possibilities. Experiment with different hover effects, animations, and links to make your SVGs not only visually appealing but also functionally rich. Happy designing!