Cum să utilizați SVG în WordPress

În ciuda faptului că SVG a fost standardizat la începutul anilor 2000, formatul de imagine extrem de atrăgător nu a văzut prea multă lumină din cauza suportului slab al browserului. Toate acestea s-au schimbat drastic în ultimii ani, deoarece SVG devine rapid forma de imagine de facto pe web.

Și nu doar designerii grafici se îndrăgostesc de SVG, ci și utilizatorii WordPress care doresc să-și accelereze blogurile prin reducerea dimensiunii totale a imaginii. Această postare va explora subiectul cum să utilizați SVG pe un site bazat pe WordPress.

Ce este SVG?

SVG (Scalable Vector Graphics) este un format de imagine bazat pe XML pentru afișarea graficelor pe web și în cadrul aplicațiilor. În principiu, un fișier SVG este pur și simplu o colecție de cod XML care specifică diferite forme și culori utilizate într-o imagine SVG.

Și, deoarece puteți deschide fișiere SVG cu un editor de text, este, de asemenea, ușor să faceți personalizări folosind codul CSS3 și JS de bază. Ca rezultat, SVG-urile sunt foarte apreciate de utilizatorii web moderni datorită flexibilității lor versatile.

Cel mai important, W3C recunoaște SVG ca un standard de vârf în industrie. Deci, SVG funcționează impecabil împreună cu alte tehnologii bazate pe web, cum ar fi DOM, HTML și așa mai departe.

De ce este important SVG?

Imaginile SVG sunt bazate pe vectori, drept urmare, o imagine SVG poate fi scalată la infinit pe ecran fără a pierde calitatea. Interacțiunea de bază în acest sens este Browser XML; unde Browserul trasează specificația XML cu fiecare creștere sau scădere.

Inutil să spun că fișierele SVG sunt mult mai flexibile decât formatele tradiționale, cum ar fi PNG sau JPEG. Iar interacțiunea directă dintre CSS și JavaScript înseamnă că vă puteți adapta imaginile SVG din mers. Acest lucru este esențial atunci când lucrați la un design nou sau altfel.

În ceea ce privește performanța, imaginile SVG tind să fie semnificativ mai mici ca dimensiune decât orice omologi. Ca rezultat, este obișnuit să vedeți că ilustrațiile, siglele și pictogramele sunt create ca grafică vectorială. Acest lucru a dus și la dezvoltarea multor fonturi de pictograme, pe care le vom menționa pe scurt în articol mai târziu.

Pe scurt, SVG-urile oferă flexibilitate, dimensiune redusă a imaginii și o bază solidă pentru îmbunătățirea performanței imaginii pe site-ul dvs. WordPress.

Cum sunt create imaginile SVG?

Crearea imaginilor SVG poate fi în două moduri: scrierea „codului” și utilizarea unui software modern de design grafic. Prima metodă, care este să scrieți script XML, este modalitatea tradițională de a construi fișiere SVG, dar se poate dovedi a fi o tehnică lentă și ineficientă.

O colecție simplă de pătrate ar putea arăta cam așa în format XML:

După cum puteți vedea, a scrie acest lucru în mod repetitiv pentru o grafică complexă este același lucru cu a vă împușca în picior.

Cealaltă metodă este utilizarea software-ului, iar acesta este cel mai rapid și mai eficient mod de a construi grafică SVG. Cu software-ul bazat pe vectori, vă puteți concentra pe crearea de grafice și ulterior pe exportul lor ca fișiere SVG gata făcute.

Affinity Designer este un program profesional de editare vectorială bine-cunoscut, dar la fel este și software precum Adobe Illustrator, Sketch, Figma și Inkscape.

Indiferent de software-ul cu care decideți să utilizați, singurul lucru care contează cu adevărat sunt planurile dvs. pentru tipul de grafică pe care doriți să îl creați. Funcționalitatea de export funcționează la fel în toate programele moderne.

Inutil să spun că SVG este întotdeauna aceeași structură XML. Deci, puteți utiliza imagini SVG atât ca document, dar și să le inserați în linie.

WordPress acceptă SVG?

Oricât de ciudat ar suna, o platformă cu sfera WordPress nu acceptă de fapt formatul de fișier SVG. Dar numai din cauza unor preocupări grave de securitate.

Vedeți, spre deosebire de tipurile de fișiere PNG/JPG/GIF — SVG nu este o imagine rasterizată, ci un vector. Ca urmare, SVG este expus riscurilor exploatării JavaScript, iar WordPress a ales să nu permită SVG în WordPress în mod implicit. Are sens din toate punctele de vedere.

Chiar dacă colaboratorii WordPress au vorbit despre SVG de mulți ani, există prea multe unghiuri de abordat pentru a preveni problemele de securitate la scară.

Așadar, singura modalitate de a rezolva acest lucru este prin pluginuri sau prin activarea SVG ca format de fișier folosind funcțiile temei.

Cum să activați imaginile SVG pe un site web WordPress?

Înainte de a ajunge la partea cu pluginuri, puteți activa de fapt SVG în WordPress prin fișierul functions.php din directorul dvs. de teme. Aceasta este cu siguranță cea mai rapidă modalitate, dar și cea mai puțin sigură, deoarece activați SVG în format brut.


//enable SVG file format for WordPress Uploads
function add_file_types_to_uploads($file_types){

$new_filetypes = array();
$new_filetypes['svg'] = 'imagine/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );

returnează $file_types;
}
add_action('upload_mimes', 'add_file_types_to_uploads');

Și cealaltă opțiune – mai sigură – este să folosești pluginuri. Iată trei dintre cele mai proeminente pluginuri pentru activarea SVG în WordPress.

Suport SVG

Adăugarea suportului SVG este jumătate din luptă, poate doriți să adăugați, de asemenea, un stil personalizat, efecte de animație și să activați restricții. Dar pentru a face toate acestea, ai nevoie de sprijin.

Cu asistență SVG — puteți începe să adăugați fișiere SVG la postările și paginile dvs. folosind eticheta tradițională Image. De exemplu, puteți adăuga o nouă clasă CSS la Imagini: „style-SVG”, care va prelua imaginea SVG încărcată și va reda conținutul acesteia într-un afișaj inline.

Principalele caracteristici ale acestui plugin sunt:

• Activați gestionarea fișierelor SVG în Biblioteca Media WordPress.
• Convertiți imaginile SVG încărcate în cod inline.
• Acceptă widgetul Image pentru adăugarea etichetelor Alt și Caption la toate imaginile SVG.
• Stilați imaginile SVG individuale folosind CSS personalizat.
• Implementați efecte de animație folosind CSS3 și JavaScript.
• Pagini de setări detaliate din tabloul de bord al pluginului.
• Implementați accesul bazat pe permisiuni. De exemplu, restricționați încărcarea numai la conturile cu privilegii de administrator.

Cuvânt de avertizare că, în ciuda a ceea ce oferă acest plugin, riscurile exploatării SVG sunt destul de reale. Nu activați gestionarea fișierelor SVG pentru utilizatorii în care nu aveți încredere. Deci, în mod ideal, ați activa această funcție doar pentru utilizatorii la nivel de administrator.

Pentru a reitera, oricine cu privilegii de încărcare poate încărca noi fișiere SVG, dar, deoarece fișierele SVG se bazează pe XML, sunt deschise exploatării prin injecții rău intenționate și altfel.

SVG sigur

Safe SVG este un plugin care vă va oferi liniște sufletească în ceea ce privește îngrijorarea cu privire la potențiale riscuri de securitate. Pluginul este creat special pentru a igieniza orice încărcare SVG nouă și pentru a preveni intențiile rău intenționate. În plus, Safe SVG adaugă posibilitatea de a vedea ce fel de fișiere SVG ați încărcat prin Biblioteca dvs. media.

Cu 50.000 de utilizatori activi, te poți baza pe Safe SVG pentru a oferi un palmares excelent de performanță sigură. De remarcat este faptul că există două versiuni diferite pentru acest plugin; gratuit si platit.

Versiunea gratuită include funcționalitate pentru a igieniza încărcările noi și adaugă, de asemenea, suport pentru vizualizarea SVG în Biblioteca Media.

Dacă alegeți versiunea Pro, veți primi funcții suplimentare, cum ar fi Optimizarea SVGO. Această tehnică de optimizare va reduce și mai mult dimensiunea fișierului încărcat SVG.

De asemenea, cu Pro, puteți alege cine poate sau nu poate încărca noi fișiere SVG. Drept urmare, puteți restricționa accesul numai la anumiți utilizatori. Și, în sfârșit, achiziționând pluginul, obțineți acces la asistență premium - primiți răspuns la întrebările dvs. oricând aveți cea mai mare nevoie.

Adăugați suport complet SVG

Ar trebui să obțineți rezultate rezonabile cu primele două pluginuri pe care le-am enumerat. Dar, dacă vă place ideea de a adăuga SVG pe site-ul dvs. folosind Shortcodes, atunci verificați acest plugin.

Acest plugin adaugă unele funcționalități SVG la WordPress și utilizează o tehnică SVG care se bazează pe o idee a lui Alexey Ten. Acest mod de a include imagini SVG în HTML pare a fi cel cu cea mai bună combinație de performanță și compatibilitate în acest moment.

Adaugă suport complet SVG permite încărcarea SVG și generarea de coduri scurte. În plus, puteți personaliza stilul fiecărui element SVG folosind CSS personalizat. Nu în ultimul rând, puteți specifica o fotografie de rezervă pentru oricare sau pentru toate SVG-urile pe care le-ați încărcat.

Care sunt alte plugin-uri SVG utile pentru WordPress?

În afară de adăugarea suportului SVG la un site WordPress, ce alte plugin-uri există care ar putea beneficia site-ul dvs.? Toată lumea și bunica lor știu că există beneficii semnificative de performanță. Atât în ​​ceea ce privește dimensiunea fișierului, dar și capacitatea browserului de a reda grafica vectorială inline.

Pictograme WP SVG

Icoanele sunt un element vizual, iar astfel de elemente tind să ofere design-urilor o viață nouă. Destul de interesant, acest plugin s-a născut dintr-o necesitate personală. Autorul a vrut să înceapă să implementeze mai multe fișiere SVG în designul său, dar nu a găsit o soluție pentru asta. Deci, și-a luat timpul și efortul și a creat WP SVG Icons.

Acest plugin este foarte ușor de utilizat și puteți înlocui pictogramele existente pe site-ul dvs. în doar câteva clicuri. Cel mai bine, nici nu trebuie să recreați fiecare imagine pentru afișajele Retina, atâta timp cât setați lățimea maximă, pictograma se va scala automat.

La fel ca în cazul autorilor, acest plugin este excepțional pentru toate tipurile de activități de dezvoltare, multisite și client. Fără restricții, nu trebuie să vă faceți griji cu privire la compatibilitatea temelor sau a ceva de acest fel.

Se pare că există, de asemenea, o versiune premium în ofertă, cu o caracteristică care permite încărcarea pictogramelor personalizate. Deci, nu vă limitați la pictogramele integrate.

Meniu social SVG

Acesta este un plugin care funcționează ca un widget pentru afișarea pictogramelor rețelelor sociale prin imagini SVG. Pentru ca acest plugin să funcționeze, tot ce trebuie să faceți este să creați un nou meniu WordPress cu link-uri către profilurile dvs. de socializare.

Apoi, selectați locația personalizată a meniului social SVG și salvați noul meniu. După aceea, puteți utiliza widget-ul SVG Social Menu fie în bara laterală, fie în alte zone pregătite pentru widget-uri ale blogului dvs.

Pictogramele disponibile în prezent sunt pentru următoarele site-uri și platforme: plus.google, WordPress, facebook, twitter, dribbble, Pinterest, Github, Tumblr, Youtube, Flickr, Vimeo, Instagram, LinkedIn, xing /feed, mailto.

Logo SVG și efecte de text

SLATE este un plugin care permite suportul pentru coduri scurte pentru adăugarea de efecte SVG personalizate. Puteți folosi acest plugin pentru a promova o imagine puternică a mărcii, a sublinia widget-urile CTA sau pentru a face elementele să iasă în evidență în felul lor. Utilizarea inteligentă a suportului pentru coduri scurte înseamnă că vă puteți edita și personaliza efectele în orice moment.

De exemplu, puteți amesteca diferite culori, fonturi, filtre și puteți utiliza numeroase modele de umplere care se manifestă ca efecte de design care atrage atenția. SLATE oferă la fel de multă libertate creativă ca un software de editare vectorială, dar numai fără a fi nevoie să utilizați vreun software!

Deci, care sunt unele dintre caracteristicile cheie?

• Text. Generați coduri scurte care pot reproduce efectele efectelor textului care captează atenția, dar prietenoase cu SEO. La fel ca ceea ce vedeți în instantaneul de mai sus.
• Fonturi. Nu sunteți sigur de unde să obțineți fonturi personalizate? Nu vă faceți griji, deoarece SLATE vine pre-ambalat cu biblioteca masivă de fonturi Google.
• Umpleți modele. Literele sunt umplute cu un model de umplere la alegere. Modelele de umplere au parametri. Controlați diferite dimensiuni, distanțe și culori pentru a produce variații unice sau lăsați setările implicite să funcționeze pentru dvs.

Și multe altele! Acest plugin este un centru puternic pentru a vă crea textul și logo-urile cu o precizie excepțională. Și prin SVG, nu mai puțin.

Unde puteți găsi grafică SVG?

Ce poți face dacă nu ai nicio experiență anterioară în design grafic vectorial? Din fericire, găsirea SVG-urilor în zilele noastre este simplă și simplă. Cel mult, trebuie doar să faceți link înapoi la autorul original care a realizat graficul. Și multe platforme oferă imagini gratuite fără cerința de atribuire.

Iată câteva site-uri uimitoare care oferă conținut SVG gratuit:

• FontAwesome — Font Awesome cea mai grozavă bibliotecă de pictograme de font din lume. Proiectul merge puternic de câțiva ani și are suport aprofundat nu numai pentru browsere, ci și cadre specifice și software de proiectare. Acest pachet de fonturi orientat spre accesibilitate este un ucigaș absolut și atât de simplu de utilizat! De fapt, sunt sigur că există o duzină de pluginuri WordPress care oferă suport pentru Font Awesome!
• Vecteezy — Vecteezy este probabil cea mai mare platformă de grafică vectorială de pe planetă. Alimentat de modele personalizate, contribuții ale comunității și date bazate pe web: Vecteezy are vectori disponibili în orice tip de categorie, formă sau formă. Și este foarte ușor să descărcați fișiere. Tot ce trebuie să faceți este să vă conectați înapoi la pagina autorului de la care ați luat fișierul. Acesta este un site pe care îl folosesc frecvent.
• Fundaluri SVG — Sunteți la curent cu cele mai recente tendințe de design web? Există atât de multe domenii creative în care design-urile sunt explorate acum. Și una dintre acele zone este fundalurile SVG. Le-ai văzut și tu. Modele ondulate, linii curbe și așa mai departe. Utilizați acest site pentru a genera fundaluri SVG ușor accesibile!
• SVG Grabber — Această extensie Chrome este o mană divină absolută pentru obținerea de imagini SVG de pe diferite pagini de site. Pur și simplu faceți clic pe pictogramă și extensia poate prelua fiecare fișier SVG dintr-o pagină. Desigur, trebuie să urmați regulile privind drepturile de autor oriunde puteți, dar, în general, aceasta se simte ca o extensie solidă de utilizat în mod frecvent.
• Zona de sigle vectoriale — În funcție de nișa în care lucrați, s-ar putea să vă fie util să aveți o colecție de logo-uri bazate pe vectori de la cele mai importante mărci din lume. De asemenea, puteți utiliza aceste fișiere atunci când faceți anunțuri sau promoții specifice. Și majoritatea editorilor foto din zilele noastre pot converti fișierele SVG în PNG și oricum.

Și noi atingem suprafața a ceea ce este acolo, într-adevăr. Personal, SVG a făcut o mare diferență în modul în care lucrez cu designul site-ului web și chiar cu crearea de imagini prezentate. Cu un SVG puteți face cu adevărat totul în spectrul de culori, aliniamente diferite ale formelor etc.

Sigur, nu este același lucru cu utilizarea unei fotografii frumoase din viața reală, dar pe orice site web puteți găsi o mulțime de locuri unde un JPG ar putea fi înlocuit cu o grafică vectorială. Și tocmai acesta este scopul acestei postări, acela de a vă oferi o privire de ansamblu asupra modului de utilizare a SVG cu WordPress.

Indiferent dacă am atins acest obiectiv, vă vom lăsa să fiți judecătorul. Dacă doriți să adăugați ceva la această postare sau dacă aveți resurse suplimentare de distribuit, vă rugăm să știți că secțiunea noastră de comentarii este întotdeauna deschisă.