Výhody použitia škálovateľnej vektorovej grafiky
Škálovateľná vektorová grafika alebo SVG hrajú dôležitú úlohu v dizajne webových stránok. Ak momentálne nepoužívate SVG vo vašom dizajne webových stránok, je tu niekoľko dôvodov, prečo by ste to mali začať, rovnako ako záložné stránky, ktoré môžete použiť pre staršie prehliadače, ktoré tieto súbory nepodporujú.
rezolúcia
Najväčšou výhodou SVG je nezávislosť riešenia. Keďže sú súbory SVG vektorovou grafikou namiesto rastrových obrázkov založených na pixeloch, môžu byť zmenené, bez straty akejkoľvek kvality obrazu. To je obzvlášť užitočné, keď vytvárate citlivé webové stránky, ktoré musia vyzerať dobre a fungovať dobre v širokej škále veľkostí obrazoviek a zariadení .
Súbory SVG môžete zväčšiť alebo zmenšiť, aby ste sa prispôsobili meniacim sa potrebám rozmerov a usporiadania svojich citlivých webových stránok, a nemusíte sa obávať toho, že tieto grafiky budú ohrozovať kvalitu akéhokoľvek kroku.
Veľkosť súboru
Jednou z problémov s použitím rastrových obrázkov (JPG, PNG, GIF) na citlivých webových stránkach je veľkosť súboru týchto obrázkov. Pretože rastrové obrázky nemajú rovnaký rozmer ako vektorové, musíte dodať svoje obrazové obrázky na najväčšej veľkosti, v ktorej sa budú zobrazovať. Je to preto, že môžete vždy zmenšiť obrázok a zachovať jeho kvalitu, ale to isté sa nevzťahuje na väčšie obrázky. Konečným výsledkom je, že často máte obrázky, ktoré sú oveľa väčšie, ako sú zobrazené na obrazovke osoby, čo znamená, že zbytočne nútia stiahnuť veľmi veľký súbor.
SVG rieši túto výzvu. Vzhľadom k tomu, vektorová grafika je škálovateľná, môžete mať veľmi malé veľkosti súborov bez ohľadu na to, ako veľké môžu byť tieto obrázky potrebné zobraziť. V konečnom dôsledku to bude mať pozitívny vplyv na celkový výkon a rýchlosť sťahovania.
CSS Styling
Kód SVG je možné pridať aj priamo do HTML stránky. Toto je známe ako "inline SVG". Jednou z výhod použitia inline SVG je to, že keďže grafika je skutočne nakreslená prehliadačom na základe vášho kódu, nie je potrebné robiť žiadosť HTTP na načítanie obrazového súboru. Ďalšou výhodou je, že inline SVG môže byť štylizované s CSS.
Potrebujete zmeniť farbu ikony SVG? Namiesto toho, aby ste potrebovali otvoriť obrázok v nejakom editovacom softvéri a znovu exportovať a načítať súbor, môžete jednoducho zmeniť súbor SVG pomocou niekoľkých riadkov CSS.
Môžete tiež použiť iné štýly CSS na grafiku SVG, aby ste ich zmenili na stavy vznášania alebo na určité konštrukčné potreby. Môžete dokonca animovať tie grafiky, aby ste do stránky pridali určitý pohyb a interaktivitu.
animácie
Pretože vkladané súbory SVG môžu byť štylizované pomocou CSS, môžete použiť aj animácie CSS. CSS transformácie a prechody sú dva jednoduché spôsoby, ako pridať nejaký život do súborov SVG. Na stránke môžete získať bohaté zážitky podobné flashovému formátu bez toho, aby ste dnes podľahli nedostatkom, ktoré prináša Flash na webových stránkach.
Použitie SVG
Ako silné ako SVG, tieto grafiky nemôžu nahradiť každý iný formát obrázkov, ktorý používate na vašich webových stránkach. Fotografie, ktoré vyžadujú hlbokú farebnú hĺbku, budú musieť byť aj vo formáte JPG alebo PNG, ale jednoduché obrázky ako ikony sa dokonale hodia na vykonanie ako SVG.
SVG môže byť vhodný aj pre zložitejšie ilustrácie, ako sú firemné logá alebo grafy a grafy. Všetky grafiky budú mať úžitok z toho, že budú škálovateľné, budú môcť byť v štýle CSS a ostatné výhody uvedené v tomto článku.
Podpora pre staršie prehliadače
Aktuálna podpora SVG je v moderných webových prehliadačoch veľmi dobrá. Jediné prehliadače, ktoré skutočne nepodporujú tieto grafiky, sú staršie verzie programu Internet Explorer (verzia 8 a nižšie) a niekoľko starších verzií systému Android. Vo všeobecnosti veľmi malé percento populácie prehliadania stále používa tieto prehliadače a toto číslo sa naďalej znižuje. Znamená to, že SVG je dnes na webových stránkach bezpečne používaný.
Ak chcete vytvoriť záložnú verziu pre SVG, môžete použiť nástroj ako Grumpicon z Filament Group. Tento zdroj bude mať vaše súbory obrázkov SVG a vytvorí záložné PNG pre staršie prehliadače.
Upravený Jeremy Girard dňa 27.1.17