Highlighted Areas With Links on Responsive Image for Free (SVG, WP)

Share the knowledge...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn


In this tutorial you will learn how to make interactive highlighted areas that you can click on in your image and make this image responsive in WordPress. Easy and for free.

An area gets highlighted when you move your mouse over the area.

Here’s an example of the result (this SVG depicts some popular in-depth articles on my website):

Move your mouse over the areas in the image. These areas are clickable. And the image with clickable areas is scalable.

Another example of the image with interactive highlighted areas is in the title of the article.

In this tutorial I’ll show you how you can easily create such interactivity using your JPG image.

By the way, don’t be afraid that this tutorial may seem long. I just put everything in details. Basically it’s simple. However, a couple of tricks in this tutorial may appear not really obvious to you 🙂

Here’s a table of contents to help you see the structure of this tutorial:


Before we get down to the tutorial (under the hood)

Here’s what’s under the hood of this tutorial and more details why I created it.

Adding interactivity to images like highlighted areas seems like a basic thing. And you may expect some simple and free WordPress plugin could let you do what you want. But there are some technical particularities and restrictions that makes it not so easy.

I could not find a free reliable plugin that could let you add highlighted clickable areas. And using paid plugins seems like an overkill or/and too heavy. Moreover, using a plugin is not a correct way to do this task. This is so because JQuery or SVG-converting approaches used in the plugins is like a patch or a roundabout compared to using SVG format natively.

That’s why I created this tutorial.

The core of this tutorial is using SVG. SVG stands for “scalable vector graphics”. But SVG is not just about images. You can think of SVG as of an single independent web application that you can embed into your WordPress or wherever else.

You can do quite a lot of things with SVG including animation and interactivity. By the way, highlighting clickable areas is a simple example of interactivity. And I show you how you can do it in this tutorial.

The gist of the tutorial consists of the three parts:

  1. Including your existing image (JPG, PNG and any others) into a new SVG file (by the way, no need to convert your image to a vector format).
  2. Adding clickable areas with highlighting fucntionality in the SVG image (using a free SVG editor Inkscape).
  3. Adding the SVG image in your WordPress site so that the image is displayed correctly and can scale if a browser window resizes (installing free SVG Support plugin, and also adding a tiny CSS code via a standard WordPress tool).

The advantages of this method of adding interactivity to your image:

  • SVG is the right way to add interactivity to images, compared to using jQuery plugins (the plugins may be not reliabe and conflict with other pllugins of your WP theme).
  • SVG image is an independent interactive object which can be used not only in WordPress. SVG does not need any additional plugins for interactivity.
  • This method is free, quick and easy (no need to code; no need to re-draw your image to make it in vector format; simple steps).

By the way, my previous tutorial on a similar topic (“How To Make A Responsive Image With Clickable Areas For Free“) described an easy way how to add clickable areas on an image and make it scalable. The secret sauce is using HTML image maps in conjunction with a simple free WP plugin that manages correctly image maps scalability.

But the main drawback of that method is that there’s no easy, free and
reliable way to add highlighted areas on images.

And this tutorial makes a step forward and solves this problem. Now you can take your image and add clickable areas to it which are highlighted when you move your mouse over the areas. Also, you don’t need to deal with HTML code to add clickable areas if you don’t want to.

The secret sauce of this method is in the details of the process:

  • I show you how you can take any image and turn it into an interactive SVG image with highlighted clickable areas that can be used inside WordPress.
  • Making it possible to embed SVG into your WordPress posts and pages (WP does not allow using SVGs by default. That’s why I show you what simple plugin you need to use to enjoy SVGs on your WP site).
  • Making SVG look good in your WordPress site (WP may exclude non-vector graphic data from your SVG, and also it can break correct scaling of your SVG image. That’s why I show you what you need to do to enjoy SVGs without any limitations).

The secret weapons that you will need are Inkscape (a free SVG editor program), SVG Support plugin and a standard tool in WordPress that allows adding custom CSS code.

Although it seems like a complicated method with some steps which may seem technical, in fact this is pretty easy and quick. I’ll show you exactly what you need to do. It’s easy even if you have never dealt with the mentioned tools before.


Video walk-through of the whole process

In addition to reading this tutorial, you may want to watch the video.
Here’s it is:


Tutorial starts: Create SVG from your image or from scratch

I assume you already have an image in any format including JPG, PNG etc. Let’s say it will be a JPG image for clarity in this tutorial. And you want to add highlighted areas on your JPG image that you can click and go to specific URLs. You can do it by putting your image inside a SVG image. I’m going to show you how you can do it.

However, you can draw (or code) a SVG image from scratch if you want using any vector graphics software or online tool. I don’t focus on drawing SVG images in this tutorial. But you can still use this tutorial to add highlighted areas in your existing SVG file if you already have one.

Take your image and put it inside a new SVG

Okay, in my tutorial I start from the following JPG image:

Highlighted areas: Original image in JPG format

Original image in JPG format

I need to put turn it into a vector graphics somehow.

One of the ways to turn a raster image (e.g. JPG) into a SVG file is manually redrawing everything in a vector format. Or you can use some automated tools to convert your pixels into vectors. There is no easy way how to do it. You can try to use automated tools to convert your bitmap image to a vector graphics, but this is often too complicated way or takes a lot of time.

In this tutorial I suggest using the following trick. You just take you bitmap image (e.g. JPG) and add it to a new SVG image. Technically, your JPG image will not turn into a vector graphics, but the new SVG file will simply contain a bitcode of your JPG image. And this is enough to start working with the SVG file.

Here’s how you can do it.

Use a free software Inkscape. You just need to start the program and open your JPG image (top menu File / Open):

Highlighted areas: Opening your JPG image in Inkscape

Opening your JPG image in Inkscape

And when the window with import settings open, make sure that “Image Import Type” setting is set to “Embed” (it’s by default).

Highlighted areas: Embedding your JPG image into a new SVG file

Embedding your JPG image into a new SVG file

This puts your entire JGP image (its bitcode) inside the created SVG file.

Highlighted areas: JPG image opened and ready for adding vector graphics interactivity

JPG image opened and ready for adding vector graphics interactivity


Adding interactivity to your image

In this tutorial I show you how to add the following two types of interactivity to your image in SVG format:

  1. Vector-graphics areas which are initially invisible can be highlighted (i.e. become colored and semi-transparent) when a user moves a mouse over those areas. This is the main part of this tutorial.
  2. Making these areas clickable. I.e. when a user clicks on area, the user goes to a specified URL. Also, adding simple one-line popup tooltips for the image areas (basically, titles for the corresponding URLs). This is a simple and minor part of this tutorial.

The interactivity will be added right inside the SVG image, and not as a part of a website page where you will use this image. That’s the advantageous approach revealed in this tutorial. Your image will stay interactive independently from where you will use your image.

Adding interactive highlighted areas to your SVG image using Incscape

Before we start adding interactive highlighted areas

Basically, the process of adding highlighted areas to your image using Incscape software consists of the following parts:

  1. Adding areas using standard shapes (ciclres, elipses, arcs, rectangles, polygons etc) or draw the areas by lines and curves.
  2. Adding interactive highlighting to these areas using the properies of the drawn areas. Particularly:
    • Setting the initial color and transparency for the area (the default state of the area).
    • Setting the area’s properties for the state when mouse is over the area (‘onmouseover’ event).
    • Setting the area’s properties for the state when mouse is out of the area (‘onmouseout’ event).

Okay, let’s go closer to the practical side.

Here’s the overview of the Inkscape user interface of the tools you may need in most situations:

The tools in Inkscape you are most likely to use

The tools in Inkscape you are most likely to use

Adding standard-shaped areas is very simple. Just select one of the shape tools and draw it on your image. Also you may specify the shape properties before drawing if you want (e.g. specify how many corners you want your polygon to have).

Drawing shapes by hand is also simple. Just select “Draw Bezier curves and straight lines” tool and start drawing your shape corner by corner. The default settings specified for this tool are fine. Put the last corner at the same place as the first corner (combine them) to outline the final shape.

After a shape is drawn, whether it’s a standard shape or drawn by hand, you can edit its form. You can move its corners, round the corners, turn straight lines into curves (using Bezier curves) and much more.

In most cases to create even sophisticated areas you need to know very basic things. It’s enough to know how to draw polygon by hand and how to turn its straight lines (edges) into curves. It’s very easy and I will show it to you in my example below.

Adding an area to the image and edit area’s shape

Let’s get down to practice now. Let’s add, or better to say, draw an area (shape) around a boulder on my image to make then the area interactive and highlighted. The boulder has not standard shape. And that’s why I prefer using “Draw Bezier curves and straight lines” tool in this case. This is an universal tool for drawing not standard shapes.

Select this tool and start clicking on the image around along the the boulder’s edge. And the final corner combine with the first corner to finalize the shape drawing.

Here’s what I’ve got:

Drawing a polygon by hand in Inkscape

Drawing a polygon by hand in Inkscape

No matter what color this polygon is now. We’ll work on it later.

You can draw your shape using as many corners (nodes) as you want. The more nodes you add, the more presice and beautiful you can make your shape. But obviously, too many nodes can be harder to manipulate.

Now we need to edit the shape to make it very similar to the underlying boulder on the image.

Select “Edit path by nodes” tool. Then you can click on the shape’s edge that you want to edit. And drag and drop it to turn it into the curve which combines with the boulder’s outline. Here’s how my result of editing one straight line of the edge looks like:

Turning a straight line into a curve by dragging the edge

Turning a straight line into a curve by dragging the edge

If your highlighted area is going to be complicated, then perhaps you may need to add more nodes during your shape editing process. You can do it simply by double-clicking on the stroke (the edge). Do delete a node just select it and press Delete key. Inkscape allows doing many other things.

Okay, in this tutorial I continued editing other straight lines of the shape’s edge to make the shape combine with the boulder on the image. And here’s the result:

Finishing creating a shape by using Bezier curves

Finishing creating a shape by using Bezier curves

This way you can create as many shapes as you need.

Here’s a little tip if you want to create more areas. Before you start drawing a new shape, select your background image first. This will let you create a shape outside existing link objects.

Before creating a new object

Before creating a new object

For the purpose of this tutorial I will not create other shapes for the rest of the boulders on my image. I will continue working with this one shape I’ve just created to show you how to turn it into a interactive highlighted area.

Setting the initial color and transparency of the area

The areas (the shapes) you and I have drawn are objects in Inkscape. By the way, the imported JPG image is also an object.

To see what objects you have in your SVG image, you can go to the top menu Object / Objects. Or you can select the corresponding panel if you’ve got the panels displayed in your Inkscape working area:

Show the tab with your objects

Show the tab with your objects

Open the Objects panel to see the list of your objects:

List of objects in Inkscape

List of objects in Inkscape

You can rename your objects for your convenience (double click the name in the objects list). I’ll set the name rename the object I’ve drawn as “BoulderShape1”.

Now let’s set the color and transparency of an object.

Select the object you need. I selected the BoulerShape1.

Then open “Fill and Stroke” tab. The color/style propertes will open for the selected object:

Fill and stroke settings for the selected object

Fill and stroke settings for the selected object

You can set color and paint style properties for both fill areas and strokes (edges) if you want. But for this tutorial I’ll show just how to set “fill” color and transparency. It will be enough to make the interactivity we want.

As I mentioned above, I want to have my interactive area totally transparent (invisible) when it’s not active. And when a user moves a mouse over it, it will be activated (highlighted). The simplest way to show that the area is activated is to make it semi-transparent. The color of the area is not supposed to change. Only transparency changes.

So, on this step let’s set the color and transparency of the area which corresponds to the activated (highlighted) state:

  • Set the color of the selected object (area) using RGB channels.
  • Set the transparency using Alpha channel (Not Opacity! Let Opacity stay 100%).

For my selected area I set a pure blue color. And I made it a bit transparent. Note the Alpha (transparency) channel value which I set to 100:

Setting the transparency for the object for the activated (highlighted) state

Setting the transparency for the object for the activated (highlighted) state

The above image is how the area (the boulder shape) will be highlighted when a user moves a mouse over it.

The trick is that Opacity will be used later when we deal with interactivity (mouse-over and mouse-out events). So, setting Opacity to zero will make the area totally transparent (invisible).

By the way, there are plenty of options how you design your interactive highlighted area. You can design complex and multi-shape areas, remove or tune borders, create glowing effects, gradients etc. In this tutorial I demonstrate just the most basic steps which can be done with minimum efforts.

Now, as you are satisfied with how your area will look like when a mouse is over this area, .
you can set its Opacity to zero.

Here’s a demonstration of making the object totally transparent (by setting the Opacity to zero):

Making the object totally transparent as the default (not highlighted) state

Making the object totally transparent as the default (not highlighted) state

This will the default state of the image when user’s mouse is not over the area.

And as you will see, the transparency of the area at interactivity (when mouse is over or out of the area) will be regulated by Opacity property.

Now let’s see how you can add interactivity to the area (mouse-over and mouse-out events).

So, you want the invisible (totally) transparent area to be highlight when a user moves a moues over it. And when the uses moves mouse off the area, the area turns to its default (totally transparent) state again.

To make this you will need the following commands:

  1. this.style.opacity=1
    This command sets Opacity to 100%, i.e. it makes an object visible. You need it when user moves mouse over the object. Put this command in the onmouseover field (see screenshot below).
  2. this.style.opacity=0
    This command sets Opacity to 0%, i.e. it makes an object invisible (totally transparent). You need it when user moves mouse out the object. Put this command in the onmouseout field (see screenshot below).

The events onmouseover and onmouseout are located in Inkscape at Object Properties tab / Interactivity section. Simply enter these commands in the corresponding fields as shown on the screenshot:

Adding interactivity to the object

Adding interactivity to the object

Now you can open your SVG file in a browser to see the interactivity of your area. Here’s what I’ve got on this step:

Move your mouse over and out of the boulder “Fast Hosting” to see the effect.

Please note that on this step you can’t add your SVG file to WordPress. You need a plugin for that (more on that further).

Making the areas clickable

You’ve added interactive areas to you image.

Now let’s see how to make your area clickable so that an URL would open on clicking. It’s easy:

  1. Select the object (the area, the shape) you want to create a link for (in my case it’s “BoulderShape1”).
  2. Make sure that the object is visible. If you followed this tutorial, you have set the Opacity for your object to zero. You need to temporarily set the Opacity to some different value than zero. It’s needed for correct link creation.
  3. Right-click on your object on the image to call the menu, and select “Create Link”.
Adding link to the object

Adding link to the object

Right after that a panel with link properties will open. Do the following:

  • Specify URL in Href field.
  • If you want your URL to open in a new browser window/tab, then input “_blank” in the Target field. Otherwise leave it empty.
  • If you want to your object (interactive highlighted area) to show a tooltip when a mouse is over it, then specify the text in the Title field.

Here’s what I’ve got:

Adding link to the object

Adding link to the object

Now it makes sense to check if your link object was created as a parent item for your area object:

  1. Go to the Objects panel.
  2. And make sure the link object (in my case its name is “a4502”) is a parent for your area object (in my case its name is “BoulderShape1”).
Making sure the link object was created properly

Making sure the link object was created properly

And now, as the link object is created properly, you can set the opacity of your area object back to zero to make it invisible (totally transparent) in the default state:

To do it, select your area object (in my case it’s “BoulderShape1”) in the Objects panel and set the Opacity value to zero:

Making the area object totally transparent

Making the area object totally transparent

It’s important that you select your shape object in the Objects panel, because you can’t select your shape object from withing the image after a link object was created.

By the way, you can set Opacity value on the “Fill and Stroke” panel (like I explained above). But You can do it on the Objects panel as well.

Now you can open your SVG file in a browser to test it again including how your link works. Here’s what I’ve got on this step:

If you need to create more interactive clickable areas on your image which are highlighted when a users moves a mouse over them, just repeat the steps from here.


Adding interactive SVG with raster image inside to your WordPress

As your SVG file is totally ready, you can add it to your WordPress post or page. But it can’t be done as you do it with any image.

There are two major reasons for that: SVG files can’t be imported and used in WordPress by default (you need a plugin for that) and your SVG image may lose its design layout (e.g. image width issues). These issues can be overcome easily. See below how.

SVG Support plugin helps to import and use your SVG images

WordPress does not allow importing SVG files by default to help you avoid potentially dangerous SVG files.

But since it was you who created your SVG image, you are sure that you did not include any malicious code in your SVG file. And you need WordPress to allow you import SVG files. For this reason you need one of the plugins that allow you import SVG.

Also, SVG files which contain raster images (JPG, PNG etc) are not fully supported by WordPress by default. The reason is that SVG image containing raster images in it is not a pure SVG content which is supposed to be an XML file. Since your SVG image contains a bitcode of a raster image, you need a special plugin that makes it possible to use imported bitcode inside your WordPress. Without this functionality your background image in SVG file will not be imported to your WordPress.

There’s a simple lightweight plugin called SVG Support. It’s free. And it solves both issues (allows you import SVG files to WP and allows your WP access bitcode of SVG files).

Here’s how you set up the plugin:

  1. Install and activate SVG Support the usual way.
  2. Go to its settings (WordPress dashboard / Settings / SVG Support) and enable Advanced Mode. This helps to enable your SVG interactivity. You can also enable a security option “Restrict to Administrators” (it allows only administrators import SVG files to WordPress). And then save the settings:
    Enabling Advanced Mode in SVG Support plugin

    Enabling Advanced Mode in SVG Support plugin

  3. After the Advanced Mode is enabled, other settings appear. Select “Automatically insert class”. This is needed allows you to enable interactivity for your SVG files.
    SVG Support plugin: Enabling option for the interactivity

    SVG Support plugin: Enabling option for the interactivity

Save the settings. And setting up the plugin is complete.

Now you can import SVG images to your WordPress website, view them in the WordPress media gallery and use them like any other images.

The only one last thing left is to set up layout for SVG images within your WordPress site.

This simple CSS code will make the width of your SVG image correct

After you install and setup the required SVG Support plugin described above, you need to take care additionally of your SVG files layout within WordPress. Otherwise your SVG images will not scale.

To solve this issue you need to add a simple CSS code.

You can add the code to your theme’s style sheet (style.css file). If you are never going to update your theme from your theme’s developer, then you can go ahead and simply add the code to the style.css. For example, you can do it from your WordPress dashboard / Appearance / Editor.

But if you know that you should not modify your style.css, then there’s an option for you below.

There ‘s an easy and safe way how you add additional CSS code without modifying your theme’s CSS. So, you can update your theme in future and the additional CSS code will not be lost.

So, here’s what you need to do:

Go to your WordPress dashboard / Appearance / Customize / Additional CSS.

And simply add this code:

/* For correct SVG scaling */
.style-svg {
       max-width: 100%;
       height: 100%;

Then click “Save And Publish” button and you are done.

Letting SVG images scale correctly in your WordPress site

Letting SVG images scale correctly in your WordPress site

This code works for style-svg class which is defined by default by SVG Support plugin I wrote about in the previous section.

That’s almost it with this tutorial.
Now you can add SVG images to your WordPress site as you usually do it with ordinary images.

However, using SVG images on my WordPress sites I’ve got some experience that you may find helpful. You can see a couple of practical tips for you in the next section).


Some practical tips on using SVG images in your WordPress site

If you follow this tutorial, but you can’t get the expected result, the reason may be caching issues or influence of some plugins you use.

Issue with lazy load plugins

For example, I use Lazy Load plugin that I use within my website optimization approach blocks the interactivity of SVG files. And if you have the same issue, in order to let highlighted areas work in SVG images you need to exclude SVG images from lazy load processing.

By default, Lazy Load plugin skips the images marked with class “no-lazy”. So just specify this class for your SVG images. You can do it editing the HTML code of your page in the code of your SVG image placement:

Here’s an example of HML code of the SVG image added to a WordPress post:

If you use a3 Lazy Load plugin: Add 'no-lazy' to let SVG's interactivity work

If you use a3 Lazy Load plugin: Add ‘no-lazy’ to let SVG’s interactivity work

Possible issues with caching plugins

This issue is not specific to the compatibility of SVG and caching plugins, but just practical thoughts about using caching plugins.

As you add a new plugin, or add a new CSS code, you might need (but not necessary) refresh you caching plugin’s caches to make everything work correctly.

So, if you experience some issues, you might want to clear the caches. Or, if it does not help, you may want to disable caching plugins temporarily to see if everything works fine without caching plugin interference.

You also may want to use a testing copy of your website for your experiments in case something does not work.

Once again, this is not specific to using SVG images, this is about using caching plugins.

Image optimization

You can optimize your images before including them into SVG images. It’s free. No noticeable quality loss but good size benefit.



I’ve seen a lot of people have been interested in my simple tutorial devoted to creating clickable image areas (using image maps) which can scale correctly (e.g. when a browser window resizes). But that approach does not allow creating interactive (highlighted) areas.

So I made a new research to cover this question. And the short answer is SVG (scalable vector graphics). And this tutorial is the easiest free way I could find so far how to add interactive highlighted areas to your image which can also be clicked.

You don’t need heavy-weight plugins. You don’t need to code. You just need to know a couple of tricks creating and using SVG images I’ve described in this s tutorial.

I wrote this article focusing on WordPress users. But anyone can benefit from it because SVG images can be used in any website.

Share the knowledge...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn


  1. Thanks Michael, this is absolutely BRILLIANT!!

    Thank you so much for taking the time to make this tutorial! I had wanted to check it out sooner, but haven’t been well.

    I really like how you make things so easy to understand!

    There is one thing I would like to ask (not sure if it’s possible, but I’m curious)…

    I’m thinking of using an SVG for my front page navigation (along with a nav bar), and I’m wondering if it’s possible to use two SVG’s: one that’s horizontal for desktops, and another design that’s vertical for tablets and mobiles?

    So if using a desktop, a horizontal SVG image would appear, and if using a tablet or mobile device a vertically designed SVG image would appear?

    I’m not sure if this is possible or not, but thought I would ask.

    It’s pretty late now, so I’ve not had chance to try this out yet, but I’m looking forward to having a go!

    I like learning new things 🙂

    Kindest Regards,


    • Hi Zoe,

      I appreciate your feedback.

      As regards your question, yes it’s possible. But you need either to manipulate (code) your style sheet (CSS) file. Alternatively, some themes may offer this option.

      • Thanks for your reply Michael,

        I was tired yesterday when I looked through the tutorial. I do have another question…

        You say that WP doesn’t allow SVG, for security reasons, so a plugin is necessary. With the plugin does this make using an SVG safe? Or would this still pose security issues?

        Also, you say that: ‘WP may exclude non-vector graphic data from your SVG, and also it can break correct scaling of your SVG image’…

        Does this mean that the SVG might not work on all devices, and with all images? If so, how would I know if this is the case?


        Kind Regards,


        • Hi Zoe,

          Thanks for your questions.

          > With the plugin does this make using an SVG safe? Or would this still pose security issues?

          It’s safe to use your own SVGs or the SVGs from the sources you trust. I explained it further in the article. In fact, using SOMEONE ELSE’s SVG files may be dangerous if those SVGs were created specifically for malicious purposes. That’s why WordPress just forbids using SVGs by default just in case. If you use your own SVGs, it’s safe and there’s no risk for you.

          > Does this mean that the SVG might not work on all devices, and with all images?

          Quite the opposite. SVGs are fine on all devices. Moreover, using SVGs is the most reliable approach in the web compared to other methods like using jQuery etc. That’s why SVGs are so sweet!

          P.S.: I’ve re-read that part of my article that confused you. And I see that I need to re-write it a bit for more clarity. I’ll do it right away.
          Feel free to let me know if you have any other questions!

          • Hi Michael,

            I’ve just stumble across this article about SVG’s, and it seems to say that even if a web designer creates a malware-free (safe) SVG, it still poses a threat, because the coding for SVG’s are easy to hack into.


            I just wondered what your thoughts are on this article?


            Kind Regards,


          • P.S, apologies, I replied to your above message via email, it doesn’t seem to have posted for some reason.

          • Hi Michael,

            I’ve just realised I’ve copy/pasted the wrong URL above (having one of those days!)

            The URL is: https://software.intel.com/en-us/blogs/2016/11/29/svg-images-are-a-new-ransomware-threat


            Kind Regards,


            • Hi Zoe,

              The article you linked to actually confirms what I’ve said.

              But I think the following sentence from that article confused you:
              If they can hack a website and replace the current SVG with one containing malware, then visitors to that site may become infected.”
              I’ve highlighted the key phrase. In fact, if a hacker can hack your website, he/she can replace not only your SVG file, but also any piece of your website. SVGs have nothing to do with this threat.

              Also, it could be equally said as well that any PHP, JavaScript and plugins are potentially dangerous. And that they should be disabled. In fact, the danger coming from plugins is thousands times more severe, than the danger coming from your own SVGs.

              Once again, SVGs that you create are safe to use. And if a hacker can get into your website, it does not matter if you use SVGs or not – you’ll be in trouble.

              The author of that article, however, makes a valid point that using someone’s SVGs (e.g. in social media) is not a good idea as it’s potentially dangerous. The same as using WordPress plugins or themes from the untrusted sources.

              After all, I’ve got two articles on website security: here and here (in case you have not read them yet). It can help you avoid hacking threats regardless of whether you use SVGs or not.

              Thanks for your questions and feel free to let me know if you have any other ones!

              • Thanks for your reply Michael.

                This does make a lot of sense. And I have often wondered about the security threat that using plugins could pose. Or, if hackers want to take down thousands, or millions, of websites, the easiest way to do so would be to target a well used plugin (or create one.)

                I’ll give your articles about security a read, thanks for the links, much appreciated 🙂

                Kind Regards,


                • Thanks Zoe. If a plugin does not have vulnerabilities, it’s actually safe. But if a plugin has an old vulnerability or a new vulnerability is discovered, then it’s possible that a number of sites using this plugin will be affected. However, decent developers watch for new vulnerabilities and fix their plugins as soon as the issues are discovered. So, it’s better to keep the latest versions of the plugins in your website. The same is with WordPress. It’s recommended to update WP version as soon as a new version is ready.

  2. Hi Michael,

    Thank you so much for this! I’m building a website for a client who’s asked for a multi-clickable image and so I googled (a little bit frantically I must admit!) and found your site – worked perfectly! Thank you so much again!


    • Thank you, Laura, for your kind feedback.
      I had been looking for an easy and free solution like this for a while. But highlighting areas of an image appeared to be a more challenging task than I had expected. But I’ve found out the way that anyone can do. Now, hopefully, more and more people will find my tutorial and benefit from it.
      Please enjoy!

  3. Hey Michael

    I never heard of Inkscape before but it looks like a very good program. I also really liked your tutorial it makes it a lot easier to understand. I still have some questions, maybe you can help me out.

    So now you use a mouseover at one particular part of the image, but is it also possible to click on one particular part of the image and that the opacity is at 1 and when you click somewhere else that the opacity changes? Just like an if statement, if you click in that particular area you get that color, when you click out of that area that color is gone?

    Thanks a lot!


    • Hey K.,

      Thanks for your comment.

      If I understood your question correctly, I think what you need is to use not mouseover event, but onclick event or onfocusin event and onfocusout event instead.

      Onclick (onfocusin) event will allow you to set the opacity (or any other properties) for the element you click on. (Use it for “if you click in that particular area you get that color…”)

      And onfocusout event will allow you to set the opacity (or any other properties) for the element which had been clicked before. (Use it for “when you click out of that area that color is gone”).

      Hope it helps.

  4. Hello Michael,
    I wanted to thank you for this article, it really made my day! well written, explained when paired with the video its a real deal!

    I just have one question. When I upload the svg on wordpress, the image kind of need a double click. The first one opens the svg in a separed window and then it work with the highlighted areas and stuff. What am I doing wrong?

    Thanks in advance


    • Hi Vee,
      Thank you for your feedback.
      As regards your problem, perhaps, you insert your image on your page with option to open the image in a new window (target=”_blank”)? If so, insert the image without this option (select link to “None” in the Attachment display settings when you insert the image on your page).

      • Michael thank you for getting back to me!
        I uploaded the image with “link to Media” and did what I wrote you. Now instead it is simply doing nothing. I even installed the lazy load and added the no-lazy code.

        • Vee,

          1. You don’t need Lazy load plugin to use SVG on your site. Deactivate it, at least until you fix your problem.

          2. Your problem looks like as if you forgot to make the required settings in SVG Support plugin as I show in the section above.
          If the settings of SVG Support plugin are fine, then perhaps something interferes with this plugin. I suggest deactivating all plugins if it’s possible except SVG Support plugin and see if it works. This will let you know if there is a conflict among your plugins.

          • Michael thank you again for helping me.
            I tried what you suggested and I noticed that the svg work with all the other browsers (i.e. safari and firefox) except for chrome. But your svg in this post is showing when I use chrome. I’m guessing there is something wrong with my svg for being interactive with other browsers except chrome.
            thank you

            • Hi Vee,
              I think Chrome is not the case because you mentioned that when you opened the SVG image in a separate window, it worked fine. So your SVG image worked fine in Chrome then.
              You can send me a private message and give me a link to your SVG image so I could have a quick look at it if you want.

          • Michael, I dont really know how to thank you!
            By looking into my issue you solved the problem and gave me the chance to expand the creativity on my website.
            Thank you very much, your articles are so helpful and clear that they can make difficult task so easily realizable.
            Thank you again!

  5. Your tutorial was greatly appreciated. It has helped me fill a niche that would have otherwise been done in Flash. ugh. Thank you

  6. Dear Michael,

    Thanks for taking the time to write such excellent tutorial “Highlighted Areas With Links on Responsive Image for Free (SVG, WP)”.

    I’ve followed it thoroughly, however I’ve been unable to make it work in my case.

    I managed to make a native-SVG file with two square interactive areas, that worked great in several browsers.

    I installed and configured SVG support, loaded the svg file to the media library …. But was unable to make it work!

    I have The7 with bundled WPBakery Page Builder.

    I’ve created a Standard WP page, and Single Image, WP Text and Text Block elements within WPBakery

    In all of them I’ve included the class style-svg

    In the Image, it does not even show

    In WP Text and Text Block image shows but no interactivity. I edited the html to add the class=”style-svg no-lazy”, that does not persist after updating. I guess this is specific to lazy load plugin.

    Can you figure out a potential solution?

    Many thanks in advance.

    • Hi Angel,

      Sorry to hear that in your specific case you did not manage to make the SVG image work on your site for now.

      Since the SVG image works perfectly in the browsers, then the SVG file itself must be fine.
      Something interferes when you add it to your website.

      Generally, I’d suggest deactivating all the plugins on your site except SVG Support plugin and see if it works. If it works, then you can activaate plugins one by one to see what plugin conflicts with SVG functionality. If it does not work, then the website’s theme itself interferes with the SVG functionality.
      By the way, you can create a copy of your site as a staging copy or a on a separate domain or subdomain if you can’t experiment on your live site.

      The general point is to narrow down the cause and locate what specific thing that interferes with SVG functionality. And then it will be more clear how to deal with it.

      Also, in case your website uses HTTPS, make sure you add SVG image as HTTPS too. Otherwise the SVG image will not work.

      Hope it helps.

It's important for me to know what you think