SVG v HTML
Prvky SVG můžete vložit přímo do svých stránek HTML.
Vložení SVG přímo do HTML stránek
Zde je příklad jednoduché grafiky SVG:
a zde je HTML kód:
Příklad
<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
Vysvětlení kódu SVG:
- Obrázek SVG začíná prvkem <svg>
- Atributy width a height elementu <svg> definují šířku a výšku obrázku SVG
- Prvek <circle> se používá ke kreslení kruhu
- Atributy cx a cy definují souřadnice x a y středu kružnice. Pokud cx a cy nejsou nastaveny, střed kruhu je nastaven na (0, 0)
- Atribut r definuje poloměr kružnice
- Atributy tahu a šířky tahu řídí vzhled obrysu tvaru. Obrys kruhu nastavíme na 4px zelený „okraj“
- Atribut fill odkazuje na barvu uvnitř kruhu. Barvu výplně nastavíme na žlutou
- Závěrečná značka </svg> zavře obrázek SVG
Poznámka: Protože je SVG napsáno v XML, musí být všechny prvky řádně uzavřeny!