Home / Tips-Tricks / How to create clickable SVG

How to create clickable SVG

Print Friendly, PDF & Email

This page gives us basic steps to create a scalable vector graphics (SVG) that could add hyper links, popup, tool tips, or some effects (so called clickable image). We can use the power of SVG to create interactive images.

You can view an SVG file directly by opening it into a web browser or by copy-pasting its contents into a web page. You can edit your SVG file in a graphics editor, such as Inkscape, or a plain text editor. If you want to customise the way in which links are displayed, or add fancy effects such as popups, then paste the SVG code into your web page’s markup.

Adding links to SVG shapes

Links in SVG are written in the same way in HTML, with the addition of an xlink prefix to href attribute: simply wrap an anchor tag (<a>) around the elements that you wish to turn into a link. For instance, the sample code below inserts a link to two shapes of the text PROTEIN DEGRADATION.

Please don’t forget to close the anchor, by writing </a> after the element that you wish to be linked.

Integrating SVG into a web page

If you want to use CSS to create powerful transition effects, SVG should be embedded into a web page. There are several ways to do this: as an object, an iframe, or with the code added directly into the page. We will use the latter.
Copy and paste the SVG code into the body tag of the page.

If your SVG file starts with the line

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

then please ensure that you do NOT copy it into your web page, otherwise browsers will not be able to render your web page properly

Here is how the HTML markup should look after you’ve pasted the SVG into your web page:

Example of showing/hiding a certain object

Try to create a SVG image like the following one:

example

Brief description: Above has four kind of shapes: rectangle, star, square and oval. Below are four rectangles. At loading/opening the webpage embedded this SVG image, the four rectangles below are hidden. When you click on one of four above shapes, you show the expected rectangle below.

Steps to do this exercise

  1. Remember the ids of objects in your image. To be easily programmable, I rename all the autonomous generated ids as follow:
    objOval, objRectangle, objSquare and objStar are the ids for four shapes above.
    objDemoOval, objDemoRectangle, objDemoSquare and objDemoStar are the ids for the rest shapes.
  2. Jump to How to integrate SVG into a webpage.
  3. Add a bit of CSS and jQuery codes into that webpage.
    Hide the rectangles below
    Show the associated rectangle when clicking on a certain shape
  4. Save your work and try open the webpage in your interest web browser.

The final could not be similar with mine but you could have a look my product in order to know how it works. You can download the product below.

hideshow-html-tar

TODO – expand this section to detail how to add animations and styling of links.

References

  1. https://www.w3.org/wiki/SVG_Links
  2. https://parall.ax/blog/view/2985/tutorial-creating-an-interactive-svg-map
  3. http://www.creativebloq.com/netmag/create-responsive-svg-image-maps-51411831
  4. https://www.jonathan-petitcolas.com/2013/07/18/create-clickable-svg-france-regions-map.html
comments

About Nguyen Vu Ngoc Tung

I love making new professional acquaintances. Don't hesitate to contact me via nguyenvungoctung@gmail.com if you want to talk about information technology, education, and research on complex networks analysis (i.e., metabolic networks analysis), data analysis, and applications of graph theory. Specialties: researching and proposing innovative business approaches to organizations, evaluating and consulting about usability engineering, training and employee development, web technologies, software architecture.