Scalable Vector Graphics

Z Multimediaexpo.cz

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 by se měl v budoucnu stát základním otevřeným formátem pro vektorovou grafiku na Internetu. Zatímco pro rastrovou grafiku je na Internetu formátů dostatek (např. GIF, PNG a JPEG), otevřený vektorový formát zatím na Internetu chyběl.

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 (např. Microsoft Internet Explorer) je třeba mít nainstalovaný zásuvný modul, například od firmy Adobe Systems, 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 (březen 2011).

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>

Omezení v MediaWiki

V minulosti byl formát SVG v MediaWiki podporován rozporuplným a místy až amatérským stylem, což způsobovalo vysoké zatížení serveru. ^[1]

Nyní je podpora formátu SVG přece jenom výrazně lepší.

Hlavním problém však zůstává nekonečný vodopád bezpečnostních rizik a problémů. Každá nová hlavní verze redakčního systému MediaWiki vždy řeší minimálně dva bezpečnostní problémy SVG. Seznam problémů je už tak dlouhý, že by se o tom dala napsat menší kniha.^[2]

V polovině června 2015 úložiště Wikimedia Commons přešlo na protokol HTTPS a bez jakéhokoliv varování vypnulo přebírání svého multimediálního obsahu. Tento fatální problém postihl všechny majitele a uživatele MediaWiki na celém světě. S odstupem necelých 2 měsíců sice byla vydána limitovaná oprava pro vybrané starší verze MediaWiki, ale naší situaci to nevyřešilo. Kvůli tomu Multimediaexpo.cz byla nucena zrušit i omezenou podporu pro SVG v rámci přebírání multimediálního obsahu z Wikimedia Commons.

Také mimořádná velikost některých komplexních SVG obrázků (třeba státních znaků desítek zemí světa) určitě nezvyšuje popularitu SVG.

Celkově lze konstatovat, že formát SVG nesplnil své cíle. Nedokázal a zatím ani nedokáže výrazněji vytlačit starší grafické formáty na okraj zájmu.

Jedná se tedy o zajímavý, ale zatím jasně minoritní grafický formát.

Multimediaexpo.cz tento formát aktuálně nepodporuje.

V roce 2017 plánujeme provést novou analýzu zabývající se podporou SVG.

Související články

• Inkscape – open source vektorový grafický editor

Reference

1. ↑ Manual:Image Administration (anglicky)
2. ↑ Webtrh.cz – Jak ovládat SVG v img tagu přes CSS?

Externí odkazy

• Kurz SVG – tvorba SVG prakticky (česky)
• Průvodce SVG – teoretický popis SVG (česky)
• Informace o SVG na W3C (anglicky)
• Seznam software s podporou SVG (anglicky)
• Zásuvný modul pro prohlížení SVG od firmy Adobe
• SVG 1.1 – technická specifikace formátu (anglicky)
• Stránky SVG editoru Inkscape