Kako dodati slikovne datoteke SVG v WordPress

Ali želite dodati datoteke SVG na svoje spletno mesto WordPress?

WordPress privzeto omogoča nalaganje vseh priljubljenih formatov slikovnih, avdio in video datotek, vendar SVG ni med njimi. Obstajajo možni varnostni pomisleki, vendar obstajajo načini za njihovo varno uporabo.

Kaj je SVG?

Datoteka SVG je vrsta vektorske slike. Vektorske datoteke so sestavljene drugače kot pogostejše vrste slikovnih datotek. Na primer, JPG je sestavljen iz več tisoč slikovnih pik. Pri datoteki SVG pa na drugi strani ni tako.

Vektorske slike so bolj kot niz pisnih navodil. Ne vsebujejo slikovnih pik, ki tvorijo večjo sliko. Namesto tega vključujejo nabor podatkov, podoben shemi, ki ustvari dvodimenzionalno sliko. To pomeni, da ima uporaba datotek SVG nekaj edinstvenih prednosti.

SVG ali Scalable Vector Graphics je oblika datoteke, ki definira vektorsko grafiko z uporabo označevalnega jezika XML. Glavna prednost SVG je, da vam omogoča povečavo slik brez izgube kakovosti ali pikseliranja.

Zakaj uporabiti SVG?

SVG datoteke imajo številne prednosti. Ker so zelo razširljivi, lahko po potrebi spreminjate velikost, ne da bi to vplivalo na kakovost slike. Kot morda dobro veste, če poskušate povečati velikost datoteke JPG, se kakovost zelo hitro zmanjša na neuporabno raven.

Tu so SVG lahko koristni. Čeprav niso namenjeni prikazovanju tradicionalnih fotografij, so odlična izbira za poslovne logotipe, ikone in drugo preprosto grafiko na vašem spletnem mestu.

Poleg tega so datoteke SVG običajno precej manjše od drugih vrst slik. To pomeni, da vaše spletne strani ne bo obremenjevala grafika. Še več, datoteke SVG indeksira Google, in to že kar nekaj časa. To je lahko prava prednost za optimizacijo iskalnikov (SEO) vašega spletnega mesta.

Podpora brskalnik za datoteke SVG

Datoteke SVG trenutno podpirajo vsi večji brskalniki, vključno z mobilnimi brskalniki.

Seznam podprtih brskalnikov:

• Internet Explorer 9, 10, 11+ and Edge
• Firefox 2+
• Chrome 4+
• Safari 3.1+
• Opera 10+
• iOS Safari 3.2+
• Android Browser 3+
• Firefox for Android 86+
• Opera Mini (all)
• Opera Mobile 12+
• Chrome for Android 89+
• UC Browser for Android 12.12+
• Samsung Internet 4+
• QQ Browser 10.4
• Baidu Browser 7.12
• KaiOS Browser 2.5

Ali WordPress podpira SVG?

V WordPressu privzeto ni podpore za SVG zaradi varnostnih tveganj, ki jih prinaša.

Sporočilo o napaki, ki se prikaže pri nalaganju grafike SVG na spletno mesto WordPress:

Varnostna vprašanja v zvezi s SVG v WordPressu

Datoteke SVG vsebujejo kodo v označevalnem jeziku XML, ki je podoben HTML-ju. Vaš brskalnik ali programska oprema za urejanje SVG razčleni označevalni jezik XML za prikaz izpisa na zaslonu.

Vendar to odpre vaše spletno mesto za morebitne ranljivosti XML. Uporablja se lahko za pridobitev nepooblaščenega dostopa do uporabniških podatkov, sprožitev napadov s surovo silo ali napadov s skriptiranjem med spletnimi mesti.

Iz tega razloga morate biti previdni pri ravnanju z datotekami SVG in njihovem dodajanju v WordPress.

Če želite zmanjšati varnostna tveganja, poskrbite, da boste očistili datoteke SVG, preden jih naložite v medijsko knjižnico WordPress. Ta postopek odstrani sumljivo kodo in napake, zaradi česar so slike varne za vaše spletno mesto.

Naložene datoteke SVG lahko očistite z namenskim vtičnikom za SVG. Priporoča se da datoteko predhodno razkužite s testom SVG Sanitizer Test ‒ to je spletno orodje Darrylla Doyla, razvijalca WordPressa.

Drug način za zaščito vašega spletnega mesta WordPress je omejitev nalaganja SVG samo na zaupanja vredne uporabnike, ki se morajo zavedati varnostnih pomislekov v zvezi s formatom SVG.

Ker torej WordPress ne vključuje podpore za SVG takoj po namestitvi, se boste morali nekoliko bolj potruditi, da jih vključite na svoje spletno mesto. Poglejmo, kako na dva najbolj pogosta načina omogočimo dodajanje datoteke SVG na spletno mesto.

Kako naložiti datoteke SVG v WordPress z 2 varnima metodama

Metoda 1: Uporaba vtičnika

Tako kot pri številnih nalogah WordPress lahko vtičniki poenostavijo omogočanje podpore za SVG. Vse kar morate storiti je, da izberete pravo orodje in konfigurirate nekaj nastavitev.

1. korak: Prenesite vtičnik
   Najprej boste morali prenesti in namestiti vtičnik SVG. Priporočam vtičnik SVG Support:

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.

Poleg tega boste lahko konfigurirali nekaj pomembnih skrbniških nastavitev. To vključuje omejevanje privilegijev za nalaganje SVG samo na skrbnike:

Po tem boste lahko naložili datoteke SVG neposredno v svojo medijsko knjižnico. Vendar je treba najprej poskrbeti za nekaj drugih pomembnih stvari.

Na strani z nastavitvami morate potrditi polje zraven možnosti »Restrict to Administrators?«. To bo samo skrbniku mesta omogočilo nalaganje datotek SVG v WordPress.

Naslednja možnost je vklop naprednega načina. To možnost morate označiti le, če želite uporabljati napredne funkcije, kot so animacije CSS in vgrajeno upodabljanje SVG.

Ne pozabite klikniti gumba za shranjevanje sprememb, da shranite svoje nastavitve.

Zdaj lahko ustvarite novo objavo ali uredite obstoječo. V urejevalnik objav boste naložili svojo datoteko SVG, kot bi naložili katero koli drugo slikovno datoteko. Preprosto dodajte slikovni blok v urejevalnik in nato naložite datoteko SVG.

Ročno dodajanje podpore za SVG v WordPress

Pomembno!

Pred kakršnimi koli spremembami varnostno kopirajte svoje spletno mesto WordPress, da preprečite izgubo podatkov v primeru napačne konfiguracije.

1. korak: Uredite datoteko Functions.php svojega spletnega mesta
   Za začetek boste morali urediti datoteko functions.php vašega spletnega mesta. To storite tako, da na nadzorni plošči izberete Videz > Uredi teme in izberete datoteko functions.php:

Druga možnost je, da do datotek svojega spletnega mesta dostopate z aplikacijo protokola za prenos datotek (FTP), kot je FileZilla.

V vsakem primeru je najbolje, da ustvarite podrejeno temo ali preklopite na razvojno okolje, preden opravite kakršno koli večje delo na svojem spletnem mestu. Tako bo vaše spletno mesto v živo varno pred poškodbami, medtem ko izvajate spremembe.

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. Zdaj se pomaknite na dno in tja prilepite ta delček kode:

function add_file_types_to_uploads($file_types){
$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );
return $file_types;
}
add_filter('upload_mimes', 'add_file_types_to_uploads');

Shranite spremembe v datoteko in jo zaprite. Nato se lahko vrnete na nadzorno ploščo in preizkusite svojo novo funkcijo tako, da naložite datoteko SVG v svojo medijsko knjižnico, kar bi moralo delovati brez težav!

Zaključek

Številne prednosti datotek SVG prispevajo k vse večji priljubljenosti te vrste datotek. Na žalost so besedilne datoteke XML nagnjene k vstavljanju kode, kar je glavni razlog, zakaj WordPress privzeto ne vključuje podpore za SVG.

Kljub temu obstajata dva načina, da vaše spletno mesto WordPress sprejme datoteke SVG ‒ z uporabo vtičnika WordPress ali spreminjanjem datoteke functions.php spletnega mesta. Poleg omejitve privilegijev za nalaganje boste lahko varno nalagali datoteke SVG v medijsko knjižnico spletnega mesta.

FAQ – Pogosta vprašanja o nalaganju SVG v WordPress

Sledi nekaj odgovorov o uporabi SVG v WordPressu.