6 výhod vektorovej grafiky SVG

Výhoda 1: nekonečné škálovanie bez skreslenia

SVG opisuje tvary matematickými cestami a pri zväčšení ho prehliadač jednoducho prekreslí v novom rozmere. Ikony zostávajú ostré na displejoch Retina a logo zväčšené na veľkosť bilboardu je stále čisté — netreba pripravovať viac rozlíšení ako pri rastri. To je základná výhoda vektorovej grafiky a dôvod, prečo sa logá a ikony musia vektorizovať. Pri responzívnych stránkach jedna SVG ikona pokrýva každý scenár od telefónu po 4K displej, takže netreba vyrábať samostatné obrázky pre každé zariadenie.

Výhoda 2: malé súbory a rýchle načítanie stránky

SVG jednoduchej ikony má často len niekoľko KB — oveľa menej než sada PNG v niekoľkých rozlíšeniach. A keďže SVG je text, stláča sa mimoriadne dobre cez gzip alebo Brotli, čím sa prenosová veľkosť zníži o ďalších šesťdesiat až osemdesiat percent. Na stránke hustej ikonami prepínanie na SVG citeľne šetrí šírku pásma. Zložitejšie ilustrácie si však vyžadujú kontrolu počtu ciest; podrobnosti nájdete v tipoch na optimalizáciu SVG. Keď systém ikon prejde na SVG, celkový počet bajtov požadovaných pre obrázky nad prekladom často klesne o viac než polovicu, čo je obzvlášť cenné na pomalých pripojeniach.

Výhoda 3: programovateľnosť, interaktivita a animácia

SVG je súčasťou DOM: cez CSS zmeníte výplň ikony, cez JavaScript poviete animáciu kreslenia čiary a zareagujete na kliknutie či prechod myšou. Prepínanie farieb ikon v tmavom režime, zvýraznenie úseku grafu pri prechode myšou a animácie načítania sa dajú urobiť priamo v SVG — bez výmeny obrázka a bez snímkových animovaných zdrojov. Rastrové formáty to proste nedokážu. Najviac profitujú vizualizácie dát: každý stĺpec a každý úsek čiary v grafe je samostatná cesta, takže sa zvýraznenie pri prechode myšou aj udalosti prehĺbania pripájajú priamo.

Výhoda 4: upraviteľný text, priateľské SEO a prístupnosť

Text vnútri SVG je skutočný text — dá sa vybrať, vyhľadať a preložiť. Ak ku grafike pridáte popisy <title> a <desc>, čítačky obrazovky ho môžu ohlásiť a vyhľadávače pochopia význam kresby. Text v rastri sú iba body, neviditeľné pre vyhľadávače aj pre používateľov čítačiek obrazovky. Viacjazyčné stránky dokážu preložiť text vnútri SVG priamo, bez opätovného exportu obrázka.

Výhoda 5: jeden zdrojový súbor použitý všade

Ten istý SVG funguje na webovej stránke, dá sa exportovať ako PNG vo vysokom rozlíšení do dokumentu a odovzdať tlačovým a laserovým gravírovacím zariadeniam. Keď sa zmení značka farba, upravíte jeden zdrojový súbor a všetky použitia sa naraz aktualizujú, namiesto toho, aby ste každú veľkosť zostavovali znova. Pre tím to znamená oveľa nižšie náklady na údržbu grafiky. Najviac benefitujú e-commerce a brandingové tímy: jediná vektorizácia umožní každej stránke produktu, obalu či eventovému materiálu použiť tú istú kresbu a zmena farby znamená údržbu jediného zdrojového súboru.

Výhoda 6: otvorený štandard so zrelým ekosystémom

SVG je otvorený štandard W3C, ktorý natívne podporuje každý moderný prehliadač a ktorý čítajú aj zapisujú grafické programy ako Illustrator, Figma a Inkscape, bez viazania na dodávateľa. Objektívne má SVG aj svoje limity: nie je vhodné na fotografické obrázky, výkon vykresľovania klesá, keď sa cesty stanú príliš zložitými, a fotografie majú zostať v JPG alebo WEBP. Open source komunita si okolo SVG vytvorila aj zrelú sadu nástrojov — SVGO na kompresiu, knižnice ikon a animácií — všetko pripravené na použitie.

Začínate so SVG? Pomocou nástroja Obrázok na SVG premeníte svoje rastrové obrázky na vektory alebo si prehliadnete a stiahnete bezplatné vektorové prvky v galérii PolySVG. Na začiatok si prečítajte Čo je SVG a Rozdiel medzi PNG a SVG.