Scalable Vector Graphics

Scalable Vector Graphics

Přípona souboru	.svg, .svgz
Typ internetového média	image/svg+xml
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?	ano
Website	www.w3.org/Graphics/SVG

Statický obrázek generovaný pomocí SVG jako ukázka. Pro zobrazení originálního obrázku SVG soubor je třeba prohlížeč s přímou podporou SVG a nebo se zásuvným modulem který podporuje prohlížení SVG.

Stejný zmenšený obrázek který demonstruje jak může být u SVG snadno změněna velikost.

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.

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, diagramy, finálové „pavouky“ apod. Mezi výhody patří:

• nezávislost na výsledném rozlišení (s výjimkou SVG, jehož součástí je rastrový obrázek)
• 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
• elementy SVG lze seskupovat do vrstev (element <g>) a ty definovaným způsobem transformovat
• možnost mít více vrstev pod sebou
• transformace vrstev, změna jejich pořadí, nebo editace prvků, které (nebo jejichž části) aktuálně zasahují mimo rozměry vektorového obrázku, je nedestruktivní; na druhou stranu u vícevrstevnatých SVG musejí prohlížeče „počítat“ výslednou podobu každé překrývané části obrazu a nemohou, jako u rastrových obrázků pouze zobrazit obrazové body na dané pozici.
• „content-awareness“ – má vědomí o svém obsahu
• výhody XML, např. možnost…
  • použít nástroje pracující s XML pro čtení a zpracování SVG
  • vkládat do elementů další atributy
  • možnost stylovat prvky SVG pomocí kaskádových stylů
  • oproti rastrovému obrázku např. změna barvy nebo velikosti nutně neznamená použití nového obrázku
  • spolu s JavaScriptem rozšiřitelnost na interaktivitu a animace (ty však nepodporuje nativně – musí se naprogramovat).
• SVG, jako soubor nebo součást HTML, může ve svých prvcích obsahovat odkazy, na něž uživatel může kliknout, nebo události (například přejetí kurzoru myši nad prvkem) – do nich může být vložen škodlivý kód

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 je vhodné pro „přibližné“, více či méně schématické zobrazení postav, předmětů, atd., bez fotorealistických podrobností. Dobře se hodí na velkoformátový tisk, kde by rastrové podklady zabíraly mnoho MiB nebo GiB dat a pro každou velikost by bylo doporučeno upravovat rozměry obrázku. Přestože SVG může obsahovat prvky s bitmapovou grafikou, její použití znamená defacto porušení škálovatelnosti, což jde proti filosofii toho, proč byl tento formát vytvořen. Množství obsažených prvků v SVG má svoji praktickou hranici (třeba animace v SVG s např. milionem objektů by na běžných počítačích nebyla možná).

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. (Soubory SVG ukazuje jako obrázky rovněž tato encyklopedie, nezávisle na tom, jakou verzi prohlížeče máte.)

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.

Příklad obrázku v SVG

<?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>

Příklad obrázku v SVG

Související články

• Počítačová grafika
• Seznam editorů vektorové grafiky
• CGM

Externí odkazy

• Obrázky, zvuky či videa k tématu Scalable Vector Graphics ve 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

Autoritní data: GND: 4658480-8 | LCCN: sh2002004644 | WorldcatID: lccn-sh2002004644