HTML SVG grafika
SVG definuje vektorovou grafiku ve formátu XML.
Co je SVG?
- SVG je zkratka pro Scalable Vector Graphics
- SVG se používá k definování grafiky pro web
- SVG je doporučení W3C
Element <svg> HTML
Element HTML <svg>je kontejner pro grafiku SVG.
SVG má několik metod pro kreslení cest, rámečků, kruhů, textu a grafických obrázků.
Podpora prohlížeče
Čísla v tabulce určují první verzi prohlížeče, která
<svg>prvek plně podporuje.
| Element | |||||
|---|---|---|---|---|---|
| <svg> | 4.0 | 9.0 | 3.0 | 3.2 | 10.1 |
Kruh SVG
Příklad
<!DOCTYPE html>
<html>
<body>
<svg
width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green"
stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
Obdélník SVG
Příklad
<svg width="400" height="100">
<rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)"
/>
</svg>
SVG zaoblený obdélník
Příklad
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20"
width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
Hvězda SVG
Příklad
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
Logo SVG
Příklad
<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%"
y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"
/>
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55"
fill="url(#grad1)" />
<text fill="#ffffff" font-size="45"
font-family="Verdana" x="50" y="86">SVG</text>
Sorry, your browser does not
support inline SVG.
</svg>
Rozdíly mezi SVG a plátnem
SVG je jazyk pro popis 2D grafiky v XML.
Canvas kreslí 2D grafiku za běhu (pomocí JavaScriptu).
SVG je založeno na XML, což znamená, že každý prvek je dostupný v rámci SVG DOM. Pro prvek můžete připojit obslužné rutiny událostí JavaScriptu.
V SVG je každý nakreslený tvar zapamatován jako objekt. Pokud se změní atributy objektu SVG, prohlížeč může tvar automaticky znovu vykreslit.
Plátno se vykresluje pixel po pixelu. Na plátně, jakmile je grafika nakreslena, prohlížeč ji zapomene. Pokud by se měla změnit jeho poloha, je třeba překreslit celou scénu, včetně všech objektů, které mohly být zakryty grafikou.
Srovnání Canvasu a SVG
Níže uvedená tabulka ukazuje některé důležité rozdíly mezi Canvas a SVG:
| Canvas | SVG |
|---|---|
|
|
Výukový program SVG
Chcete-li se dozvědět více o SVG, přečtěte si náš SVG Tutoriál .