Practical use of SVG element in HTML5

Advertisemen

SVG stands for Scalable Vector Graphics. It has its own viewport and coordinate system. It can be embedded in HTML document. Like this -

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <svg width="200" height="200">
            <circle cx="50" cy="50" r="40" stroke="red"            
    stroke-width="2" fill="blue" /> 
           </svg>
</body>
</html>

These lines of code above will generate the circle like this -

Browser Support


4.0+	3.2+	9.0+	3.0+	10.1+

SVG Elements -

<a> :

<svg width="140" height="30">
        <a href="http://aarlangdi.com"
           target="_blank">
            <rect height="30" width="120" y="0" x="0" rx="10"
     fill="blue"/> 
           <text fill="white" text-anchor="middle"
                  y="21" x="60">Aarlangdi</text>
        </a>
    </svg>

Result :

<svg width="120" height="120">
        <defs>
            <pattern id="Triangle" width="10" height="10"
                     patternUnits="userSpaceOnUse">
                <polygon points="5,0 10,10 0,10"/>
            </pattern>
        </defs>
        <circle cx="60" cy="60" r="50" fill="url(#Triangle)"/>
    </svg>

Result :

<switch> :
This switches between different languages based on the language setting on the browser.

<svg width="100%" viewBox="0 -20 100 50">
        <switch>
            <text systemLanguage="ar">مرحبا</text>
            <text systemLanguage="de,nl">Hallo!</text>
            <text systemLanguage="en">Hello!</text>
            <text systemLanguage="en-us">Howdy!</text>
            <text systemLanguage="en-gb">Wotcha!</text>
            <text systemLanguage="en-au">G'day!</text>
            <text systemLanguage="es">Hola!</text>
            <text systemLanguage="fr">Bonjour!</text>
            <text systemLanguage="ja">こんにちは</text>
            <text>☺</text>
        </switch>
    </svg>

<Symbol>:

<svg width="120" height="140">
        <symbol id="sym01" viewBox="0 0 150 110">
            <circle cx="50" cy="50" r="40" stroke-width="8"
                    stroke="red" fill="red"/>
            <circle cx="90" cy="60" r="40" stroke-width="8"
                    stroke="green" fill="white"/>
        </symbol>
        <use href="#sym01"
             x="0" y="0" width="100" height="50"/>
    </svg>

Result :

Advertisemen

Practical use of SVG element in HTML5

Result :

<Symbol>:

Result :

Tidak ada komentar:

Posting Komentar