This page gives us basic steps to create a scalable vector graphics (SVG) that could add hyperlinks, popup, tooltips, or some effects (so-called clickable image). We can use the power of SVG to create interactive images.
[box type=”info” align=”alignright” width=”2″ ]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.[/box]
Table of Contents
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.
<a xlink:href="http://www.ebi.ac.uk/biomodels-main/BIOMD0000000001" target="_blank" xlink:title="This is link's tooltip and it informs users what the link is pointing to e.g. 'Access model BIOMD001 in BioModels Database -- link opens in new window'">
<text
transform="matrix(1.0241,0,0,1,451.3281,640.2617)"
font-size="25"
id="text6779"
style="font-size:25px;fill:#e43d3d;font-family:Arial-BoldMT">PROTEIN</text>
<text
transform="matrix(1.0241,0,0,1,412.9302,670.2617)"
font-size="25"
id="text6781"
style="font-size:25px;fill:#e43d3d;font-family:Arial-BoldMT">DEGRADATION</text>
</a>
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.
[box type=”warning” align=”alignright” width=”2″ ]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[/box]
Here is how the HTML markup should look after you’ve pasted the SVG into your web page:
<!DOCTYPE html> <html><head> <title>Example page with embedded SVG</title> </head> <body> <h1>This page needs a relatively-recent browser in order to render the contents below</h1> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink=http://www.w3.org/1999/xlink viewBox="-4.872 578.6 560.972 400.48"> <g id="g9610"> <path id="path4952" style="opacity:0.3;fill:#a8d09c" d="M 630.564,196.978 675.336,105.04 C 684.665,87.498 688.103,88.92 745.056,60.962 763.031,49.379 836.138,-0.132 835.614,-0.132 808.5,-0.132 376.69,-2 368.71,0.136 c -33.152,8.873 -0.836,102.639 0.817,136.919 1.473,30.54 -42.646,49.979 -42.524,65.077 0.372,46.243 1.598,140.885 2,169.747 0.108,7.772 5.247,8.01 13.14,14.369 5.701,4.593 15.148,6.729 32.441,6.59 71.482,-0.573 147.843,-2.065 232.917,-1.989 8.136,0.008 23.608,-8.236 23.218,-22.794 -0.902,-33.555 0.031,-119.051 -0.155,-171.077 z" /> </g> </svg> </body> </html>
Example of showing/hiding a certain object
Try to create an SVG image like the following one:
Brief description: Above has four kinds 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
- 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. - Jump to How to integrate SVG into a webpage.
- Add a bit of CSS and jQuery codes to that webpage.
Hide the rectangles below show$(document).ready(function() { $('#objDemoOval').hide(); $('#objDemoRectangle').hide(); $('#objDemoSquare').hide(); $('#objDemoStar').hide(); });the associated rectangle when clicking on a certain shape
$('#objOval').on('click', function () { $('#objDemoOval').show(); }); $('#objRectangle').on('click', function () { $('#objDemoRectangle').show(); }); $('#objSquare').on('click', function () { $('#objDemoSquare').show(); }); $('#objStar').on('click', function () { $('#objDemoStar').show(); }); - 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 at my product in order to know how it works. You can download the product below.
[box type=”note” align=”alignleft” width=”2″ ]TODO – expand this section to detail how to add animations and styling of links.[/box]