Scalable Vector Graphics
[[Soubor: |100px|Logo]] | |
| Přípona souboru | .svg, .svgz |
|---|---|
| Typ internetového média | image/svg+xml[1] |
| Type code | "svg ", "svgz" |
| Uniform Type Identifier | public.svg-image |
| Tvůrce | W3C |
| První verze | 4. září 2001 |
| Poslední verze | 1.1 (Second Edition) (16. srpen 2011) |
| Typ formátu | vektorový grafický formát |
| Rozšiřuje formát | XML |
| Standard(y) | W3C SVG |
| Otevřený formát | ne |
| Web | www.w3.org/Graphics/SVG |
SVG (z anglického Scalable Vector Graphics škálovatelná vektorová grafika) je značkovací jazyk a formát souboru, který popisuje dvojrozměrnou vektorovou grafiku pomocí XML. Formát SVG je základním otevřeným formátem pro vektorovou grafiku na webových stránkách. HTML5 umožňuje vložit kód SVG obrázku přímo do kódu HTML webové stránky.[2]
Výhody a nevýhody
Grafika SVG neobsahuje obrazová data pixel po pixelu, ale seznam svých součástí – grafických objektů, pomocí kterých lze obrázek vykreslit. SVG je ideální pro jednoduchou grafiku, například grafy, binární stromy, chronologie, rodokmeny, finálové „pavouky“ apod. Mezi výhody patří
- velikost výsledného souboru
- nezávislost na platformě
- snadná přenositelnost
- je čitelný pro počítač i pro člověka
- obsahuje-li text, je možné jej vyhledávat
- „content-aware“ – má vědomí o svém obsahu
- + výhody XML, např. možnost použít nástroje pracujících s XML pro čtení a zpracování SVG
Pokročilejší implementace SVG zavádějí do grafických objektů jednoduché funkce a interaktivitu. Zejména při použití v HTML se zavedením SVG tak prohlížečům přibyla zodpovědnost sestavovat SVG a reagovat na každou změnu jejich obsahu správným překreslením. SVG není vhodný pro bitmapovou grafiku. Množství obsažených prvků má svoji praktickou hranici (třeba animace v SVG s např. milionem objektů by na běžných počítačích nebyla možná).
- soubor .svg může obsahovat virus (samozřejmě jen tehdy, pokud ho tam někdo vloží)
Prvky SVG
SVG definuje tři základní typy grafických objektů:
- vektorové tvary (vector graphic shapes – obdélník, kružnice, elipsa, úsečka, lomená čára, mnohoúhelník a křivka)
- rastrové obrazy (raster images)
- textové objekty
Tyto objekty mohou být různě seskupeny, formátovány pomocí atributů nebo stylů CSS a polohovány pomocí obecných prostorových transformací. SVG též podporuje ořezávání objektů, alpha masking, interaktivitu, filtrování obrazu (konvoluce, displacement mapping, atd…) a animaci. Ne všechny SVG prohlížeče však umí všechny tyto vlastnosti.
Jak zobrazit SVG
Pro zobrazení vektorové grafiky na některých webových prohlížečích je třeba mít nainstalovaný zásuvný modul, například od firmy Adobe, který je zdarma. Prohlížeče jako Firefox (od verze 1.5 (listopad 2005)) a Opera (od verze 8.0 (duben 2005)) umí bez dodatečných modulů interpretovat SVG grafiku. Microsoft Internet Explorer částečně podporuje SVG formát od verze 9 a plně od verze 10.
Příklady SVG
Příklad obrázku v SVG. Jazyk SVG je aplikací XML, kód je napsán jako normální textový soubor a může být snadno editován.
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
width="467" height="462">
<rect x="80" y="60" width="250" height="250" rx="20"
style="fill:#ff0000; stroke:#000000;stroke-width:2px;" />
<rect x="140" y="120" width="250" height="250" rx="40"
style="fill:#0000ff; stroke:#000000; stroke-width:2px;
fill-opacity:0.7;" />
</svg>
Reference
- ↑ Media Type Registration for image/svg+xml
- ↑ HTML5 Inline SVG na w3schools.com
Související články
Externí odkazy
Obrázky, zvuky či videa k tématu Scalable Vector Graphics na Wikimedia Commons 
Výukový kurs SVG ve Wikiverzitě- Kurz SVG na stránkách Interval.cz
- (anglicky) Informace o SVG na W3C
- (anglicky) Zásuvný modul pro prohlížení SVG od firmy Adobe
- (anglicky) SVG 1.1 Specifikace – technická specifikace formátu
- (anglicky) Téma SVG na w3schools.com
- (anglicky) On-line SVG editor
