Ce este un fișier SVG (și cum încarci SVG-uri în WordPress)?

Principalul motiv pentru care fișierele SVG sunt deosebit de populare în rândul dezvoltatorilor și designerilor este că sunt un format de imagine scalabil, în general mai mic ca dimensiune a fișierului (uneori destul de mult) și nu se pixelează pe ecranele retină. Cu toate acestea, WordPress în mod implicit nu vă permite să încărcați formatul de fișier SVG, în principal din cauza problemelor de securitate.

Astăzi vom analiza ce sunt SVG-urile, cum pot fi benefice și cum puteți activa în siguranță suportul SVG pentru WordPress. Vom discuta, de asemenea, suportul pentru browser, precum și câteva avertismente dacă decideți că doriți să treceți la formatul de imagine vectorială.

Sperăm că într-o zi vom avea SVG ca parte a nucleului WordPress, dar încă nu am ajuns acolo.

Ce este un fișier SVG?

SVG (Scalable Vector Graphics) este o imagine vectorială bazată pe XML, care este folosită în mod obișnuit de site-uri web și mărci pentru a afișa logo-uri și pictograme pe site-urile lor web. Wikipedia definește SVG ca:

Un SVG (grafică vectorială scalabilă) este un format de imagine vectorială bazat pe XML pentru grafică bidimensională cu suport pentru interactivitate și animație. Specificația SVG este un standard deschis dezvoltat de World Wide Web Consortium (W3C) din 1999.

Puteți chiar să manipulați fișiere SVG cu cod sau editor de text. SVG-urile sunt utilizate în prezent de 33% din toate site-urile web și, după cum puteți vedea mai jos, rata de adoptare crește rapid. Site-urile populare precum Google, Reddit, Dropbox, ESPN și chiar și propriul nostru site aici la Kinsta folosesc SVG-uri.

Suport pentru browser de fișiere SVG

Fișierele SVG sunt acceptate în prezent de toate browserele majore, inclusiv browserele mobile. Singura problemă cu care s-ar putea întâlni este dacă mai aveți nevoie de suport pentru IE8, ceea ce sperăm că nu o aveți. IE8 are doar o cotă de piață de browser de aproximativ 0,36% și nu mai este acceptat. Iată un articol grozav al lui Lubos despre de ce dezvoltatorii ar trebui să nu mai accepte IE8, IE9 și IE10. Din perspectiva afacerilor, acest lucru s-ar putea să nu fie întotdeauna posibil, dar el aduce câteva puncte bune. Dacă dintr-un motiv disperat mai aveți nevoie de suport IE8, puteți defini o imagine alternativă (PNG sau JPG) pentru imaginile dvs. SVG, dar nu vom aborda asta astăzi. Mai jos este o listă de browsere acceptate:

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

Beneficiile utilizării fișierelor SVG

Fișierele SVG sunt în format vectorial, ceea ce înseamnă că sunt scalabile automat atât în ​​browsere, cât și în instrumentele de editare foto. Acest lucru le face grozave atât pentru designeri grafici, cât și pentru web designeri. În mod normal, când încercați să editați un PNG sau JPG într-un instrument precum Photoshop, Sketch sau Paint, nu le puteți mări fără pixelare. Cu SVG-urile, le puteți mări la o cantitate infinită și vor arăta perfect pixeli (sau ar trebui să spunem perfect vector) de fiecare dată. Acesta este motivul pentru care sunt un format de imagine grozav de utilizat pentru ecranele retină.

Google indexează SVG -urile, ceea ce este o veste excelentă în scopuri SEO. Conținutul SVG care este legat la un fișier în sine va fi indexat și va apărea în căutarea de imagini Google. Puteți vedea acest lucru din prima mână cu ilustrațiile SVG pe care le folosim pe Kinsta, făcând o căutare avansată de imagini. Notă: SVG-urile inline, sau mai degrabă cele compuse doar din cod, de obicei nu sunt indexate.

SVG-urile sunt în mod tradițional (nu întotdeauna) mai mici ca dimensiune a fișierului decât PNG-urile sau JPG-urile . Folosind SVG-uri, vă puteți accelera site-ul WordPress, deoarece veți reduce dimensiunea generală a paginii. Genki a scris un articol grozav în care compară dimensiunea SVG vs PNG vs JPEG și iată comparația noastră JPG vs JPEG. Mai jos sunt câteva concluzii din testarea sa în care a comparat cele trei tipuri diferite de imagini.

JPG (dimensiune optimizată: 81,4 KB)

PNG (dimensiune optimizată: 85,1 KB)

SVG (dimensiune optimizată: 6,1 KB)

După cum puteți vedea mai sus, SVG este o scădere a dimensiunii fișierului cu 92,51% în comparație cu JPG. Și în comparație cu PNG, 92,83% . Acestea sunt diferențe de dimensiunea fișierelor destul de impresionante. Cu toate acestea, există o avertizare, deoarece a testat imagini mai detaliate, SVG-urile au devenit în cele din urmă mai mari ca dimensiune decât JPG sau PNG.

De aceea, multe site-uri folosesc SVG-uri pentru imagini mai puțin detaliate, cum ar fi logo-uri, pictograme etc., deoarece vor observa o scădere semnificativă a dimensiunilor fișierelor. Dar pentru mai multe imagini cu detalii deosebite, cum ar fi, poate, postarea de blog „imagini prezentate”, poate doriți să rămâneți cu un PNG sau JPG, dar le puteți optimiza în continuare. Multe site-uri web folosesc o abordare hibridă, folosind ambele tipuri de fișiere împreună acolo unde are sens.

De asemenea, este important să rețineți că rețelele de social media precum Facebook și Twitter nu acceptă SVG-uri pentru partajare. Deci, dacă ați folosit SVG-uri pentru imaginile dvs. prezentate, ar trebui să utilizați caracteristica Yoast SEO și să încărcați un PNG sau JPG pentru OG și etichetele meta, altfel ați putea risca ca imaginea prezentată să nu apară deloc.

De ce este importantă securitatea SVG

Motivul pentru care SVG nu face încă parte din nucleul WordPress este că există probleme de securitate care trebuie abordate. Puteți urmări discuția activă despre SVG-uri în nucleul WordPress (#24251) care a început în 2013. SVG este un fișier XML, care în sine îl deschide către diferite vulnerabilități ale căror formate normale de imagine nu sunt afectate. Acestea includ atacuri XML de entități externe (XXE), entități imbricate cu bombe și atacuri XSS.

Mario Heiderich a publicat o prezentare perspicace despre riscurile de securitate datorate injectării active de conținut cu fișiere SVG. Un exemplu dat a fost că JavaScript a fost încorporat într-un SVG și de fapt a reușit să-l sune pe Mario pe Skype. E cam înfricoșător! SecuPress, autorii unui plugin de securitate WordPress, au abordat și subiectul atenției atunci când adăugați SVG-uri la WordPress și importanța de a face acest lucru în mod corect.

Multe plugin-uri SVG din depozit utilizează următorul cod, care pur și simplu permite tipului MIME să permită încărcarea SVG-urilor în biblioteca media WordPress. Aceasta nu este modalitatea sigură de a face asta! Așa că nu mergeți și descărcați primul plugin SVG gratuit pe care îl vedeți sau copiați și lipiți acest cod și credeți că sunteți gata.

 function cc_mime_types($mimes) { $mimes['svg'] = 'image/svg+xml'; return $mimes; } add_filter('upload_mimes', 'cc_mime_types');

Soluția este că SVG-urile trebuie dezinfectate . Igienizarea este practic curățarea codului sau a intrării pentru a evita problemele de securitate (cum ar fi injectarea de cod), conflictele de cod și erorile. Acest lucru ar putea implica lucruri precum codificarea datelor, filtrarea și validarea șirurilor de caractere etc. Aici intervine biblioteca SVG-Sanitizer a lui Daryll Doyle, la care el numește „încercarea sa de a construi un dezinfectant SVG decent în PHP”. Consultați demonstrația dezinfectantului său SVG pentru a-l vedea în acțiune.

De asemenea, este important să luați în considerare cine de pe site-ul dvs. are acces pentru a încărca SVG-uri. De exemplu, dacă sunteți pe un site cu mai mulți autori, nu aveți idee ce fel de SVG ar putea încărca altcineva, expunând site-ul dvs. Este recomandabil să restricționați încărcările SVG la administratori și la cei care înțeleg unele dintre problemele de securitate.

Cum să activați în siguranță asistența SVG pentru WordPress

Daryll a dezvoltat un plugin, WP SVG (cunoscut și ca Safe SVG), care utilizează biblioteca SVG-Sanitizer la încărcarea imaginilor SVG în biblioteca dvs. media WordPress. De asemenea, pluginul vă permite să vizualizați SVG-uri ca imagini normale în biblioteca media.

Puteți descărca Safe SVG gratuit din depozitul WordPress sau căutându-l în tabloul de bord WordPress sub pluginuri „Adăugați noi”. Vă puteți ridica și merge cu câteva clicuri simple.

Există, de asemenea, o versiune premium, disponibilă la wpsvg.com, care vă permite să restricționați anumiți utilizatori de la încărcarea SVG-urilor și optimizarea SVG suplimentară. În exemplul de mai jos, vom folosi pur și simplu versiunea gratuită.

Ca plugin alternativ, ați putea dori să verificați Asistența SVG.

Înainte de a încărca fișierul SVG, este important să înțelegeți că acestea se comportă ușor diferit față de imaginile. Când exportați un SVG din instrumentul dvs. de editare a fotografiilor, veți dori să exportați textul ca curbe (sau să creați un contur), în caz contrar, acesta ar putea fi ușor diferit în diferite browsere.

După ce instalați pluginul, nu există setări, pur și simplu vă va dezinfecta SVG-urile la încărcare. Pe site-ul nostru de testare de mai jos puteți vedea că ne-am înlocuit logo-ul cu un fișier SVG, acesta poate fi vizualizat ca de obicei în biblioteca media.

Acest lucru ne-a permis apoi să folosim panoul de control al temei noastre pentru a schimba sigla din antetul nostru WordPress în fișierul nostru SVG. Puteți vedea mai jos că într-adevăr este difuzat fișierul .svg. Și arată frumos acum pe ecranele retină.

Mai trebuie să facem o modificare suplimentară. În IE9-11, desktop-ul și mobilul nu scalați încă corect fișierele SVG. Adăugarea de înălțime și lățime rezolvă această problemă. Acest lucru poate varia în funcție de temă, dar pe site-ul nostru de testare am modificat pur și simplu fișierul header.php și am adăugat aceste dimensiuni personalizate. Unele teme WordPress folosesc CSS pentru a modifica scalarea, ceea ce nu este bun din motive de performanță, dar din acest motiv ar putea fi necesar să adăugați cod suplimentar pentru a remedia problema IE.

Si asta e! Acum ați activat în siguranță suportul WordPress SVG. Acest plugin și/sau metodă nu este susținută sau susținută de nucleul WordPress, așa că, desigur, utilizați-vă pe propriul risc. Cu toate acestea, dacă încărcați deja SVG-uri doar cu fragmentul de tip MIME, atunci, prin toate mijloacele, vă rugăm să procedați astfel.

De asemenea, dacă nu ați mai folosit niciodată SVG-uri, asigurați-vă că aveți GZIP activat pe server pentru tipul de fișier „image/svg+xml”. Acest lucru va asigura că sunt comprimate și se vor încărca cât mai repede posibil. Uneori, administratorii de sistem activează doar tipurile de fișiere mai standard. Notă: GZIP este deja activat pe toate serverele Kinsta pentru SVG.

rezumat

SVG-urile sunt o modalitate excelentă de a îmbunătăți aspectul site-ului dvs.! Vă recomandăm să utilizați împreună SVG, PNG și JPG pentru a obține cea mai bună performanță, deoarece imaginile foarte detaliate nu vor funcționa la fel de bine în format SVG. SVG-urile sunt grozave pentru logo-ul dvs., pentru a vă asigura că arată perfect pixeli pe fiecare ecran, împreună cu pictogramele.

Care sunt gandurile tale? Ați folosit încă SVG-uri pe site-ul dvs. WordPress?