In this recipe, we need to use Inkscape once more. We have become quite familiar with said software. This time, we will create hyperlinks on the SVG graphics. When students click on the image, they will open a website.
Shapes are to be displayed in this activity, as we have done with the previous recipes. Therefore, an interesting idea would be to display a website related to the definition of them or some geometrical information about them.
We need to start Inkscape software in order to design the image and add the hyperlinks. Therefore, follow these steps:
- Draw some geometrical shapes.
- Choose one of them and click on it.
- Right-click on the said shape.
- There appears a pop-up window. Choose Create /Link, as shown circled in the following screenshot:
- Right-click again on the same shape. Click on Link properties.
- Another pop-up window appears. Complete the Href with the website that you want to link to, that is to give additional information about the SVG (you may choose any graphic or website related to your subject).
- Close the pop-up window.
- Repeat steps 2-7 to add hyperlinks to other shapes as required.
- Save the file. Click on File | Save as | write a name for the file.
We have just enhanced SVG with hyperlinks using Inkscape software. Therefore, it is time to see how it works. We can upload the graphic to our Moodle course, as we have done in the previous recipes. Another option is to open the file in your web browser. Remember that it is advisable to open SVG files in Mozilla Firefox where these files work properly. When hovering the mouse on the SVG graphic and you click on the graphic, another window will open showing the website of the hyperlink, as shown in the following screenshot:
