(click anywhere to close)
OPEN MENU

[SVG] Switches, Links & Images

category: Website | course: SVG | difficulty:
IN PRINT
QUICK CONTENTS:Intro
1. Switches
2. Links
3. Images

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.

Switches

The <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 systemLanguage=”lang 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>
Welcome! Wilkommen! Welkom!

Links

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>

Images

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>
CONTINUE WITH THIS COURSE
Do you like my tutorials?
To keep this site running, donate some motivational food!
Crisps
(€2.00)
Chocolate Milk
(€3.50)
Pizza
(€5.00)