Last chapter on text wrapped up the chapters on the most important parts of SVG, which means it might seem a bit unstructured from now on. The rest of this course still contains large and important components of SVG, but these aren’t fundamental concepts. Instead, they use what you’ve already learned and add some variety and dynamics to your graphics.
<switch> element contains groups of text and shapes, and switches between them based on the user’s system language. This means that you could, for example, display a welcome message within your graphic, tailored to the user’s native language. To determine which group belongs to which language, use the
attribute. Languages use standard HTML codes, which means two-letter abbreviations.
<svg> <switch> <g systemLanguage="en"> <text x="10" y="20"> Welcome! </text> </g> <g systemLanguage="du"> <text x="10" y="20"> Wilkommen! </text> </g> <g systemLanguage="nl"> <text x="10" y="20"> Welkom! </text> </g> </switch> </svg>
You know the
<a> element for links from HTML, and SVG is, in this respect, no different. To make something – anything – into a link, place it within this element:
<a xlink:href=”linkToSomething”> any content </a>
Fortunately, it also accepts the
target attribute with the same possible values as in regular HTML.
<svg> <a xlink:href="http://google.com"> <!-- Try clicking the rectangle! --> <rect x="10" y="10" width="50" height="50"/> </a> </svg>
Why would I place an image within an image? Well, there are times when you want a regular, bitmap image in your vector graphic – for example, when you have a picture you can’t (or don’t want to) transform into vector format. You can include it anywhere and at any size you like, but keep in mind that these bitmap images are not infinitely scalable; at a certain point, they will become pixelated. The syntax for placing an image is:
<image x=”xPos” y=”yPos” width=”width” height=”height” xlink:href=”linkToImage” />
<svg> <image x="20" y="20" width="100" height="100" xlink:href="media/SVGBitmapvsVector.png"/> </svg>