SVG: vektorový formát, který na webu chyběl

Nezdá se to, ale SVG (Scalable Vector Graphics) je prastarý vektorový formát, jehož první standard pochází z roku 2001.

Jeho širšímu uplatnění dlouho bránil Microsoft, který pomocí Internet Exploreru až do verze 8 razil vlastní formát VML. To už jsou ale loňské sněhy a dávno to neplatí. SVG má dnes vynikající podporu a slibuje dříve nevídané možnosti pro rozhraní webových aplikací.

SVG je prostě XML

Jedno z kouzel SVG je v možnosti ručně ho zapsat. Je to jednoduše XML texťák:

<svg width="300" height="200"
  xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="#EDE29F" />
  <circle cx="150" cy="100" r="90" fill="#48440E" />
  <text x="75" y="130" font-size="77" fill="white">SVG</text>
</svg>

Ukázka naživo: cdpn.io/e/VaeqOo

Proč ho používat?

SVG je výborný formát, který nám pro tvorbu uživatelských rozhraní opravdu chyběl. Jeho výhody oproti bitmapám jsou nezpochybnitelné:

Malá nevýhoda je nutnost řešit fallbacky ve starších prohlížečích. Složitější a třeba interaktivní SVG budou také na méně výkonných zařízeních pomaleji vykreslované.

Využití? Od ikonek až po interaktivní schémata

Formát má velmi širokou škálu nasazení. Výborně se samozřejmě hodí na vkládání logotypů nebo ikonek. U těch jde samozřejmě o principiálně správnější řešení než vkládání pomocí ikonfontů, které je potřeba považovat za dočasný hack.

Další možnosti ovšem začínají být zajímavé:

  • stylování vzhledu jednotlivých částí ikonek pomocí CSS
  • složitější filtry
  • efekty textu
  • interakční efekty
  • složitější animace

Podívejte se na kompletní přehled v mém článku SVG inspirace. Příchod SVG asi dost obohatí vizuální jazyk webů.

Na jednom konci škály užití, kde leží ikony, tedy vektory logicky nahrazují bitmapy a hlavně PNG. Na druhém konci jsou složité interaktivní infografiky, které se dříve dělaly hlavně pomocí Flashe. SVG je takový malý Flash.

Možnost přímého vložení jako <svg>

Kromě běžného vložení do stylů přes background-image a do HTML přes <img> je tu zcela nová možnost vložení přímo přes značku <svg>. Tím se vykolíkovalo hřiště pro úpravu vektorů pomocí CSS nebo JS.

Objekt v příkladu uvedeném výše můžeme po najetí myši obarvit:

.svg-circle:hover {
  fill: #5FA316;
}

Naživo: cdpn.io/e/LNGqZw.

Jak SVG získat

Grafik webu vám nepřipravuje podklady ve vektorech? Hned za ním utíkejte a citlivě mu oznamte, že od příštího projektu to jinak nepůjde.

Pokud si připravujete podklady sami, na internetech se povaluje spousta kvalitních ikonek. Já velmi často chodím na Iconfinder. V aplikacích správu ikonek jako je Icomoon nebo Fontastic je možné vybrat si SVG export rovnou s PNG alternativami.

SVG si můžete samozřejmě editovat sami. Kromě obligátního Illustratoru je populární Inkscape a řada dalších nástrojů. Hezky prý s SVG pracuje Affinity Designer. Já třeba na Macu používám Graphic (dříve iDraw):

SVG v Graphic (dříve iDraw)

Podpora v prohlížečích? 95-98 % jich SVG umí

S klesajícími podíly starších IE mizí i důvody proč webaři SVG zatím moc nevyužívali. Formát nezvládá jen IE8 a Android 2.3 a starší. To je na začátku roku 2016 něco mezi dvěma a čtyřmi procenty podílu.

Řešení pro starší prohlížeče najdete v článku SVG fallbacky.

Komentáře

comments powered by Disqus

Podobné články

zařazené v kategorii SVG.

Responzivní SVG

26. 6. 2017 v příručce

Další ukázka z e-booku „Vzhůru do (responzivního) webdesignu“. Jak bez hacků zařídit pružné zobrazování SVG ve všech prohlížečích? A jak na plně responzivní SVG s přizpůsobivým obsahem?

SVG řešení: hvězdičkové hodnocení

15. 3. 2017 v příručce

Hvězdičkové hodnocení se na webu používá děsně často. Před časem jsem kápl na moc pěkné řešení postavené na SVG vloženém do HTML.

Veřejná školení

Dnešní webová kodéřina

Dnešní webová kodéřina

Kurz, který aktualizuje vaše znalosti webové kodéřiny. Citlivě mixuje novinky jako CSS3, Flexbox nebo SVG a osvědčené postupy. Ty nejdůležitější části si sami vyzkoušíte. Příští termín: 27. září.

14. září Mistrovský vývoj webů na WordPressu
5. října Optimalizace rychlosti načítání
19. října SVG
16. listopadu Principy Javascriptu

Cena kurzů je 4 490 Kč bez DPH. Dřívější zákazníci mají 10 % slevu.
Všechny se konají v KC Greenpoint Praha.
Můžete si je také objednat do firmy.

Vydal jsem novou knihu: „Vzhůru do (responzivního) webdesignu“

„Vzhůru do (responzivního) webdesignu“

Kniha „Vzhůru do (responzivního) webdesignu“
Jak navrhovat a implementovat responzivní UI?

Více informací