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.
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'">
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.
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:
<title>Example page with embedded SVG</title>
<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">
<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 a SVG image like the following one:
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
- 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 into that webpage.
Hide the rectangles below
- 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.