Pri izdelavi spletnih strani in oblikovanju tiskovin se pogosto srečujemo s problemom napačnih formatov logotipov. Naročnik namreč pogosto misli, da je poslal pravilno datoteko, vendar namesto vektorske oblike prejmemo logotip v rastrski obliki. Problemi so še posebej pogosti pri starejših podjetjih, kjer se skozi leta poslovanja in menjavanjem kadrov datoteke kar »izgubijo«. V takšnih primerih je včasih potrebno logotip poustvariti in tako ponovno pridobiti ustrezne vektorske oblike.
Razumevanje vektorskih in rastrskih datotek
Za razumevanje pomembnosti datotek SVG je ključno razločiti med vektorsko in rastrsko grafiko.
Kaj je rastrska grafika?
Rastrska grafika je sestavljena iz slikovnih pik (pikslov), kot so na primer datoteke JPEG in PNG. Ko rastrsko sliko povečamo, postanejo slikovne pike vidne, kar povzroči, da slika postane »kockasta« in izgubi ostrino oziroma kakovost.
Kaj je vektorska grafika?
Vektorska grafika shranjuje slike prek matematičnih formul, ki temeljijo na točkah in črtah na mreži. Ne vsebuje slikovnih pik, temveč nabor podatkov, podoben shemi, ki ustvari dvodimenzionalno sliko. To pomeni, da je slikam v vektorskih datotekah mogoče občutno povečati ali zmanjšati velikost brez izgube kakovosti.
Kako prepoznati vektorsko ali rastrsko obliko?
Najlažji način je, da datoteko odprete v programu za ogled slik ali oblikovanje in jo nato približate oziroma »zumirate«. Če slika postane vse bolj »kockasta«, gre za rastrsko sliko. Če pa ob približevanju slika ostane enako ostra, pomeni, da gre za vektorski element. Drug preprost način je preveriti končnico datoteke: datoteka SVG ima končnico .svg.
Zakaj potrebujemo vektorske oblike (SVG)?
Vektorske oblike, še posebej SVG, so nepogrešljive v sodobnem digitalnem in tiskovnem oblikovanju zaradi svojih edinstvenih lastnosti.
Uporaba v spletnem oblikovanju
V kontekstu oblikovanja spletnih strani uporabljamo vektorsko obliko logotipa v glavi spletne strani. To nam omogoča, da bo logotip enako oster, ne glede na različne resolucije ekranov, ki jih uporabljajo obiskovalci vaše strani. SVG je spletu prijazna vektorska oblika datoteke, ki omogoča prikazovanje dvodimenzionalnih grafik, preglednic in ilustracij na spletnih mestih.
Uporaba pri oblikovanju tiskovin
Pri oblikovanju tiskovin potrebujemo vektorsko obliko logotipa, saj logotip uporabljamo za različne velikosti oziroma formate. Ključna lastnost vektorskega logotipa je, da ga lahko povečujemo brez izgub kakovosti, kar je bistveno za tisk na različne materiale in dimenzije.
Ključne lastnosti vektorskega zapisa
Vektorske datoteke so cenjene, ker ne glede na povečavo ali pomanjšavo vedno obdržijo svojo ločljivost. To omogoča eno sliko za vse dimenzije zaslonov in enostavno uporabo v tisku, kjer so potrebne večje resolucije.
Kaj je SVG (Scalable Vector Graphics)?
Definicija in tehnične osnove
SVG (Scalable Vector Graphics) je spletu prijazna vektorska oblika datoteke, ki definira vektorsko grafiko z uporabo označevalnega jezika XML. Za razliko od rastrskih datotek, ki temeljijo na slikovnih pikah, vektorske datoteke slike shranjujejo prek matematičnih formul, ki temeljijo na točkah in črtah na mreži. SVG datoteke so neodvisne od ločljivosti, kar pomeni, da jih lahko povečate ali zmanjšate in ohranile bodo ostrino in jasnost.
Zgodovina datoteke SVG
Zgodovina datoteke SVG sega v konec prejšnjega stoletja, ko je Konzorcij World Wide Web (W3C) razvijalce pozval k posredovanju predlogov za novo vrsto vektorske oblike zapisa. Podpora za to obliko datotek je bila sprva skromna, vendar je do leta 2017 SVG postal priljubljen, ko so ljudje začeli spoznavati prednosti uporabe SVG-jev v sodobnih spletnih brskalnikih.
Glavne značilnosti in prednosti datotek SVG
- Prilagodljivost velikosti in kakovost: Slikam v vektorskih datotekah, kot je SVG, je mogoče občutno povečati ali zmanjšati velikost brez izgube kakovosti.
- Zapis v kodi XML in berljivost besedila: SVG-ji so zapisani v obliki kode XML, kar pomeni, da morebitno besedilo shranjujejo kot dejansko besedilo in ne kot obliko. Ker datoteke SVG besedilo shranjujejo kot besedilo (in ne kot obliko), lahko bralniki zaslona preberejo morebitne besede, vsebovane v tako shranjenih slikah. To je zelo koristno za ljudi, ki potrebujejo pomoč pri branju spletnih strani.
- Optimizacija za iskalnike (SEO): Ker je besedilo v datotekah SVG zapisano v obliki XML-ja, lahko iskalniki, kot je Google, preberejo preglednice in grafikone, kar pomaga pri optimizaciji vsebine za spletne iskalnike. Google v SVG-jih zazna ključne besede, kar omogoča višjo uvrstitev spletnega mesta na seznamu zadetkov iskanja.
- Animacija in interaktivnost: Oblika datoteke SVG ni namenjena samo statičnim slikam. Z orodji in SVG XML elementi je mogoče spletnim grafikam dodati gibanje, kar vključuje osnovne elemente, kot je funkcija drsnika za premikanje med dvema diapozitivoma na infografiki. Časovno pogojene spremembe izrisane grafike so lahko opisane z jezikom SMIL ali sprogramirane s poljubnim podprtim skriptnim jezikom, kot npr. JavaScript ali ECMASCript.
- Podpora za CSS: SVG nudi tudi podporo za CSS, ki omogoča večji nadzor nad urejanjem stilov.
- Kompaktna velikost datoteke: Datoteke SVG so običajno precej manjše od drugih vrst slik, saj njihova velikost ni odvisna od slikovnih podatkov, temveč od kompleksnosti grafike (števila poti in sidrišč). To pomeni, da vaše spletne strani ne bo obremenjevala grafika.
Omejitve datotek SVG
Čeprav so datoteke SVG odlične za spletne grafike, kot so logotipi, ilustracije in preglednice, zaradi odsotnosti slikovnih pik težko prikazujejo visoko kakovostne digitalne fotografije, ki so sestavljene iz zapletenih barvnih prehodov in podrobnosti.
Prepoznavanje in delo z datotekami SVG
Prepoznavanje končnice datoteke
Najenostavnejši način, kako prepoznati datoteko SVG, je, da preverite njeno končnico. Datoteka SVG ima končnico .svg.
Odpiranje datotek SVG
Najlažji način za ogled datoteke SVG je v spletnem brskalniku. Ker SVG uporablja XML, lahko vsak sodoben spletni brskalnik (Chrome, Edge, Safari in Firefox) prikaže datoteko SVG. Preprosto povlecite datoteko SVG v brskalnik in slika se bo prikazala na novem zavihku. Datoteko SVG lahko odprete tudi v številnih grafičnih programih.
Urejanje datotek SVG
Če želite imeti možnost urejanja slike v izvorni vektorski obliki, boste morali uporabiti program, kot sta Adobe Illustrator ali InkScape. Ko v programu Illustrator sestavite umetniško delo, je priporočljivo izbrati besedilo, da ustvarite obrise. S tem se boste lažje izognili težavam z zamenjavo pisav ob ogledu svojega umetniškega dela v drugih računalnikih.
Datoteko SVG lahko shranite tako, da izberete Datoteka > Shrani kot. Prav tako lahko izvozite urejeno datoteko SVG tako, da izberete Datoteka > Izvoz > Izvozi kot in nato kot obliko zapisa izberete SVG.
Datoteke formata SVG je mogoče, tako kot XML datoteke, ustvariti in urejati s poljubnim tekstovnim urejevalnikom.
Pretvorba datotek SVG
Ker je SVG specializirana oblika datoteke, jo boste morda želeli pretvoriti v datoteko bitne slike, kot sta JPG ali PNG, da jo boste lažje uporabljali v drugih aplikacijah. Eden od načinov za to je Adobe Photoshop - ko odprete SVG v Photoshopu, se slika samodejno pretvori v bitno sliko v velikosti, ki jo določite.
Če nimate dostopa do programa, kot je Photoshop, ali želite le hiter in enostaven način za pretvorbo datoteke SVG, lahko uporabite spletno orodje, kot je Convertio. Postopek je preprost:
- Kliknite Izberi datoteke in izberite datoteko SVG.
- V spustnem meniju desno od "do" izberite obliko datoteke, v katero jo želite pretvoriti (na primer JPG).
- Kliknite Pretvori.
- Po kratkem čakanju bo datoteka dokončana.
Implementacija SVG v WordPressu
Zakaj WordPress ne podpira SVG privzeto?
WordPress zaradi varnostnih razlogov morda ne dovoli nalaganja datotek SVG, saj lahko datoteke SVG vsebujejo zlonamerno kodo, ki bi lahko škodovala vašemu spletnemu mestu.
Omogočanje podpore za SVG z vtičnikom
Ker WordPress ne vključuje podpore za SVG takoj po namestitvi, se boste morali potruditi, da jih vključite na svoje spletno mesto. Vtičniki poenostavijo omogočanje podpore za SVG.
- Prenesite in namestite vtičnik: Najprej boste morali prenesti in namestiti vtičnik za SVG (npr. "SVG Support").
- Konfiguracija: Ko namestite in aktivirate vtičnik, boste imeli na nadzorni plošči WordPress v razdelku Nastavitve > SVG Support novo menijsko možnost. Tam boste prejeli navodila za oblikovanje datotek SVG za vaše spletno mesto in lahko konfigurirali pomembne skrbniške nastavitve. Priporočamo, da potrdite polje zraven možnosti »Restrict to Administrators?« za dodatno varnost.
- Nalaganje datotek: Po tem boste lahko naložili datoteke SVG neposredno v svojo medijsko knjižnico. Preprosto dodajte slikovni blok v urejevalnik objav in nato naložite datoteko SVG.
Ročno omogočanje podpore SVG (urejanje functions.php)
Druga metoda je urejanje datoteke functions.php vašega spletnega mesta. Pred kakršnim koli večjim delom na spletnem mestu je vedno najbolje ustvariti podrejeno temo ali preklopiti na razvojno okolje. Dostopajte do datoteke functions.php tako, da jo kliknete z desno miškino tipko in izberete možnost Pogled/Uredi. To ga bo odprlo s privzetim urejevalnikom besedila. Po dodajanju potrebne kode shranite spremembe v datoteko in jo zaprite.
Primerjava SVG in PNG
Kdaj izbrati SVG in kdaj PNG?
Izbira med SVG in PNG je odvisna od vaše specifične uporabe:
- SVG so boljši za razširljive slike, manjše velikosti datotek in animirane grafike. Ne vsebujejo slikovnih pik, zato nikoli ne izgubijo ločljivosti, tudi če jih povečate ali pomanjšate.
- PNG so boljši za slike z veliko podrobnostmi in preglednostjo (npr. fotografije z zapletenimi barvnimi prehodi). Če PNG preveč raztegnete ali pomanjšate, bo postal zamegljen in videle se bodo slikovne pike.
Uporaba logotipa SVG na vašem spletnem mestu WordPress lahko izboljša razširljivost, zmanjša velikost datoteke, omogoči prilagajanje in zagotovi združljivost z vsemi sodobnimi napravami in brskalniki.
Podrobnejši pogled na strukturo SVG
Tipi grafičnih objektov v SVG
Format SVG omogoča tri tipe grafičnih objektov:
- Vektorski objekti: sestavljeni iz ravnih linij in krivulj.
- Bitne sličice: rastrske slike, ki so lahko vdelane v SVG.
- Besedilo: shranjeno kot dejansko besedilo.
Grafični objekti so lahko grupirani (značka <g>), olepšani z različnimi stili (atribut "style" za širino poteze, barvo polnila, obrobe), transformirani (vektorsko preoblikovanje) ter združeni v kompozite (različni objekti postanejo en objekt). Grafike in njihovo vedenje je definirano v XML tekstovnih datotekah, kar omogoča berljivost za spletne iskalnike, indeksiranje, skriptiranje in kompresijo.
Urejanje in struktura SVG kode
SVG grafiko pretvorimo v interaktivno in/ali animacijo s pomočjo SVG XML elementov ali preko skripte, ki dostopa do DOM (strukture SVG datoteke). SVG kodo pišemo podobno kot XML datoteke, z uporabo definiranih pravil za označevanje besedila, ki se nato pretvori v grafiko. Grafiko lahko ustvarimo s tekstovnim urejevalnikom ali specializiranimi programi.
Okvir SVG grafike tekstovno definiramo z značko <svg> in zapremo z značko </svg>. Z atributi določimo podrobnejše lastnosti okvirja, na primer:
- width: določi širino okvirja.
- height: določi višino okvirja oziroma območja za izris grafike.
Med znački <svg> in </svg> lahko pričnemo dodajati različne grafične elemente. Pri pisanju markup besedila uporabljamo različne značke, kot sta npr. <rect> (za pravokotnik) in <circle> (za krog). Vsaka značka sprejme še določene atribute, s katerimi definiramo podrobnejše lastnosti likov. Na primer, pri pravokotniku:
- x: določi odmik pravokotnika od levega zgornjega kota po osi X.
- y: določi odmik pravokotnika od levega zgornjega kota po osi Y. (Če sta x ali y negativna, se lik pomakne gor/levo.)
- rx, ry: določita radij zaokrožitev robov po x in y osi. Pri uporabi zaokrožitev morata biti oba atributa večja od 0.
Različice SVG in mobilne naprave
Prva uradna različica SVG 1.0 je izšla septembra 2001. Prva uradna posodobitev, imenovana SVG 1.1, je izšla januarja 2003, z njo pa tudi SVG Tiny in SVG Basic - profila, prilagojena za mobilne naprave. Leta 2008 je izšla SVG Tiny 1.2. Uradna različica SVG 2.0 je izšla septembra 2016, kjer so bile odstranjene mnoge funkcije različice 1.x, dodane pa nove funkcije, prevzete iz HTML5 ter WOFF.
Zaradi porasta novega mobilnega tržišča je prišlo leta 2003 do razvejitve v polno različico SVG 1.1 ter zmanjšani različici SVG Tiny in SVG Basic. Slednji dve sta prilagojeni predvsem za uporabniške posrednike, kot so spletni brskalniki. Različica Tiny je najbolj okrnjena in ne podpira urejanja stilov ter skriptiranja, razvita pa je bila za manj zmogljive mobilne telefone. Glavne funkcije, ki jih mobilni različici ne podpirata, so polna funkcionalnost DOM strukturiranja, medtem ko SVG Basic omogoča omejeno skriptiranje.