SVG alebo vektorové obrázky na webových stránkach
Online kurzy tvorby webových stránok
Vyskúšajte náš program na vytváranie webových stránok a získajte prístup k bezplatnému online kurzu. Po registrácii vám pošleme e-mail s kliknutím na registráciu pre online kurz. V tomto kurze sa naučíte, ako vytvoriť web zadarmo, samostatne a bez znalosti programovania.
Responzívne obrázky alebo úprava webových stránok podľa veľkosti a rozlíšenia obrazovky poskytujú používateľom optimálny zážitok.
Ľudia očakávajú, že sa budú na našej stránke ľahko orientovať pomocou smartfónu alebo počítača, a preto im budeme musieť poskytnúť tie najkvalitnejšie prvky a grafiku.
Fotografia, ktorú som vybral, môže zo začiatku vyzerať dobre, ale keď sa ju používatelia pokúsia zväčšiť, môžu naraziť na problém s prehľadnosťou.
V tomto prípade nám pomáha grafický formát SVG a napriek špecifikáciám W3C z roku 2001 sa netešil zaslúženej publicite.
Keď vyberáme fotografie pre našu stránku, máme na výber dva typy obrázkov: vektorová grafika a raster (zvyčajne fotografia, ktorá má pevné rozlíšenie a pozostáva z pixelov).
Po zväčšení obrazu stráca svoju kvalitu a stáva sa „pixelovaným“. Vektorový obrázok sa na druhej strane vytvára pomocou bodiek, tvarov a čiar a jeho zväčšenie nespôsobuje stratu kvality.
Vektorové obrázky majú tiež obmedzený počet podrobností, ktoré môžu obsahovať, a preto fungujú najlepšie ako písma, logá, ikony alebo ilustrácie. Týmto spôsobom začína formát SVG hrať čoraz dôležitejšiu úlohu pri navrhovaní webových stránok.
SVG (škálovateľná vektorová grafika)
Súbor SVG je jednoduchý grafický formát založený na XML, ktorý na popis grafiky používa tri typy objektov: obrázky, text a vektory (čiary, cesty, rámy, kruhy alebo mnohouholníky).
Akýkoľvek program, ktorý rozpoznáva formát XML, napríklad webový prehľadávač, môže zobraziť obrázok pomocou informácií obsiahnutých v súbore SVG. Formát popísaný v jazyku textovej grafiky sa vzťahuje iba na dvojrozmernú grafiku, ale môže tiež podporovať interaktivitu, animáciu a skriptovanie.
Výhody rozšírenia SVG
škálovateľnosť. Prvá a najdôležitejšia vlastnosť je, že nie je obmedzená veľkosťou alebo rozlíšením. Súbory SVG si zachovávajú rovnakú kvalitu a zameranie bez ohľadu na veľkosť obrazovky, na ktorej sú zobrazené, čo znamená, že sa vždy budú javiť číre bez ohľadu na situáciu.
Malá veľkosť grafiky. Rastrové obrázky nie sú to isté ako vektory. Graf môžeme kedykoľvek zmenšiť, čo neovplyvní jeho kvalitu, ale to isté nebude fungovať v prípade rastu. V prípade súborov SVG ich váha zostane vždy nezmenená bez ohľadu na veľkosť grafu, pretože ich veľkosť sa zväčšuje v závislosti od počtu obsiahnutých detailov, ako sú napríklad vrstvy, prechody, animácie alebo efekty. Z tohto dôvodu je súbor SVG ideálny pre logá, písma alebo diagramy.
Pridajte sa k 120 000 používateľom, ktorí vytvárajú webové stránky zadarmo a bez znalosti programovania.
Program na vytváranie webových stránok WebWave vám umožňuje vytvárať webové stránky úplne slobodne. Proces vytvárania webových stránok môžete začať z čistej stránky alebo môžete použiť šablónu.
Rýchlosť nahrávania. Vzhľadom na malú veľkosť súboru, čo v predvolenom nastavení znamená aj rýchlosť načítania stránky, môže byť SVG mimoriadne efektívny, keď ho pridáme priamo do kódu HTML. Na základe toho prehliadač „nakreslí“ graf bez nutnosti sťahovania. To znamená, že vloženie SVG do kódu HTML, akcia nazývaná aj „vložený SVG“, vylúči požiadavku HTTP na načítanie grafiky.
SEO. Normálne obrázky nemajú žiadny obsah na indexovanie, pokiaľ k nim nepridáme ďalšie atribúty a nadpis. Namiesto toho sú obrázky SVG definované v súboroch XML, takže môžeme ľahko vložiť kľúčové slová a popisy, ktoré rozpoznajú a indexujú pavúky vyhľadávacích nástrojov.
animácie. Súbory SVG je možné štylizovať a animovať, a to aj pomocou CSS alebo JavaScript. Efekty ako transformácia alebo prechod, ktoré používame v prvkoch HTML, je možné použiť aj v súbore SVG. Iste, na to budete potrebovať primerané znalosti kódovania, ale možnosti sú obrovské.
vydavateľstvo. Tieto súbory SVG je možné upravovať v špeciálnych vektorových programoch, ako sú Adobe Illustrator a Xd, Corel Draw alebo Sketch.
V tvorcovi WebWave môžete ľahko použiť vektorovú grafiku SVG a pokyny na použitie. Máme stovky grafík a nájsť tú pravú pre vás by nemal byť problém. Nezabudnite, že výber SVG vám pomôže zachovať jasnosť a kvalitu obrázkov na každej obrazovke, na ktorej sa bude zobrazovať váš web.
Zhrnutie
Kvalita položiek zobrazovaných na obrazovke je čoraz vyhľadávanejším, skutočne nevyhnutným aspektom. Preto by sme mali pre našu stránku starostlivo vyberať grafiku. Pretože súbory SVG sú responzívne, animované a zložité, nemal by existovať dôvod, prečo by sme sa ich nepoužívaniu mali vyhnúť. Hlavnou voľbou pre fotografie pravdepodobne zostane bitmapa, kvôli farebnej hĺbke, ale pre prvky ako logá, ikony, písma je vektorová grafika ideálna. Je tiež potrebné poznamenať, že súbory SVG podporujú všetky moderné prehľadávače, s výnimkou starších verzií programu Internet Explorer (od verzie 8) a Android tento formát nepodporuje. Skutočnosť, že sa dajú extrémne zväčšiť alebo zmenšiť a zachovať si kvalitu, sú obrázky SVG vhodnou voľbou aj pre tie najnáročnejšie zariadenia.
Čo si myslíte o tomto rozšírení? Na svojich stránkach používate súbory SVG?