Un ghid pentru formatul de imagine grafică vectorială scalabilă (SVG).

Există un aspect al internetului de care nu poți scăpa: imaginile. În primele zile ale internetului, a fost o afacere strictă, doar text. Cu toate acestea, acum avem formate de imagine dedicate pentru a ne ajuta să afișăm imagini clare. Formatul Scalable Vector Graphics (SVG) este unul dintre cele mai noi și mai flexibile disponibile.

Vom explica mai multe mai târziu, dar un SVG este o colecție de date care se prezintă ca o imagine pe front-end. Aceasta înseamnă că puteți utiliza Cascading StyleSheets (CSS) pentru a manipula imaginea. În plus, îl puteți redimensiona după cum este necesar, fără a pierde calitatea.

Pentru această postare, vom vorbi mai multe despre graficele vectoriale scalabile și despre cum vă pot ajuta acestea. Vom discuta, de asemenea, cum să le includeți pe site-ul dvs. WordPress.

Un ghid rapid despre cele mai comune formate de imagini web

Înainte de a trece la SVG-uri și cum să le folosim, merită să vorbim despre formatele primare de imagine pe care le folosim pentru web. Sunt trei de remarcat:

• Grupul mixt de experți fotografici (JPEG). După cum sugerează și numele, dacă doriți să afișați fotografii realizate cu o cameră digitală, acesta este formatul pentru dvs.
• Grafică de rețea portabilă (PNG). Veți dori să utilizați formatul PNG pentru a afișa orice grafică creată, cum ar fi cele din Adobe Illustrator.
• Format de schimb grafic (GIF). Hei, tuturor le plac clipurile amuzante ale emisiunilor TV pe care să le folosească ca reacție pe rețelele sociale! GIF este formatul perfect pentru grafica animată care este, de asemenea, portabilă.

În timp ce unii vor alege orice format le place, aceasta nu va fi o abordare optimă. De exemplu, dacă alegeți să faceți fiecare imagine GIF, puteți vedea dimensiuni astronomice ale fișierelor și imagini de calitate slabă. În schimb, nu veți dori să utilizați JPEGS pentru grafică, deoarece PNG este un format mai optim.

Ce este formatul de grafică vectorială scalabil

Veți dori să ne suportați în această secțiune, deoarece vom obține tehnică în unele domenii. De asemenea, conceptul de SVG ar putea fi confuz.

Grafica vectorială scalabilă nu există (un fel de). De fapt, ele nu sunt deloc o grafică sau o imagine, ci o formă de Extensible Markup Language (XML). Pentru cei care nu știu, acesta este un frate apropiat de HTML, dar fără unele dintre aspectele acelui limbaj (cum ar fi etichetele predefinite).

Ca o comparație pe care s-ar putea să o înțelegeți deja, luați în considerare modul în care puteți crea forme folosind CSS. Acesta este ceva despre care vom vorbi mai mult în curând. Ei bine, imaginați-vă acest CSS încorporat într-un pachet de document pe care îl apelați folosind un format și o structură de fișier standard ( image.svg , de exemplu).

Este mai corect să spunem că, deoarece HTML oferă un cadru pentru definirea antetelor, paragrafelor, secțiunilor, listelor și multe altele, SVG oferă cadrul pentru a defini forme precum cercuri și dreptunghiuri. Totuși, acest lucru încă nu explică de ce avem (și uneori avem nevoie) de formatul SVG. Vom vorbi despre asta în continuare.

De ce avem SVG-uri

Înainte de SVG, ați folosi PNG-uri pentru a afișa grafice. Imaginile timpurii de pe web ar putea fi GIF-uri, dar, în general, PNG-urile sunt formatul de imagine dominant. Întrebarea nu este atât de mult: „De ce avem SVG-uri?”, mai mult „Ce le lipsește formatele actuale de imagine pe care un SVG le va rezolva?” Răspunsul este: dinamism.

Dacă te uiți înapoi la formatele principale de imagini web, două nu se potrivesc cu adevărat cu graficele create (JPEG și GIF). Acest lucru lasă PNG-urile să suporte tulpina. Cu toate acestea, PNG-urile suferă câteva probleme care sunt abia acum evidente pentru web-ul modern:

• Sunt statice, prin aceea că creați imaginea offline și o exportați în acel format special. Asta înseamnă că este oarecum inflexibil.
• Prin extensie, nu puteți modifica „machiajul” imaginii. Având în vedere că avem un număr de dispozitive pentru care să creăm și să afișați, uneori trebuie să vă adaptați la acele „porturi de vizualizare”. Faceți efortul de care aveți nevoie pentru a crea toate dimensiunile siglelor doar pentru desktop și dispozitive mobile majore folosind PNG-uri.
• În timp ce PNG-urile pot fi ușoare, este responsabilitatea designerului și a proprietarului site-ului să se asigure că optimizarea imaginii are loc. Un PNG poate fi greu, uneori peste un megaoctet, fără nicio optimizare.

În plus, PNG-urile au umplut o parte dintr-un gol într-un moment în care existau puține opțiuni care ar putea oferi o calitate a imaginii suficient de ridicată. La vremea respectivă, CSS era la început și nu aveam încă domeniul de proiectare și dezvoltare pe care îl avem acum.

De exemplu, am putut folosi proprietatea border-radius doar din 2010. Acest lucru vă permite să definiți margini rotunjite și chiar cercuri. Îl vei vedea foarte des în acțiune pe butoane:

Veți folosi CSS pentru a crea forme care se pot scala și se pot adapta la ecran, dar Scalable Vector Graphics poate face mai mult. De fapt, acum veți apela la SVG-uri mai degrabă decât la CSS pentru a face acest lucru, deși nici acestea nu sunt un glonț magic.

Avantajele graficelor vectoriale scalabile

La fel ca orice alt format de imagine, graficele vectoriale scalabile nu sunt perfecte. Există o mulțime de aspecte pozitive, desigur:

• Un SVG se potrivește dimensiunilor unui dispozitiv, adesea fără nicio intervenție suplimentară din partea dvs. Acest lucru reduce timpul de dezvoltare sau de creare.
• Fișierul asociat unei imagini este mic, deoarece aveți nevoie doar de un singur SVG. În schimb, un logo PNG trebuie să ofere câteva dimensiuni și dimensiuni diferite. Aceasta ocupă spațiu pe server.
• Mai mult, SVG-urile sunt mai performante decât PNG-urile, deoarece trebuie să încărcați doar un fișier cu un cost de kiloocteți. Acest pachet de fișiere PNG ar putea fi în megaocteți, în funcție de calitatea, cantitatea și optimizarea acestora.

În general, puteți face mai multe cu SVG-urile decât puteți face cu orice alt format de imagine. Atât un dezvoltator, cât și un designer grafic pot crea SVG-uri – fie prin cod, fie exportând o creație tipică dintr-o aplicație de desen dedicată. Deoarece se leagă mai strâns de dezvoltarea web, adoptarea este în creștere.

Dezavantajele graficelor vectoriale scalabile

Cu toate acestea, nu totul este roz. SVG-urile mai au câteva probleme de care veți dori să fiți conștienți:

• Tehnologia se dezvoltă, spre deosebire de majoritatea celorlalte aspecte de bază ale web. Deoarece mulți oameni se așteaptă foarte mult de la Scalable Vector Graphics, există un „decalaj” între ceea ce poți face și ceea ce vrei să faci.
• Deși suportul SVG de bază este disponibil în majoritatea browserelor, setul complet de caracteristici nu este încă disponibil în funcție de browserul pe care îl utilizați. Din nou, SVG-urile au un potențial mai mare, ceea ce nu este încă aparent: avem nevoie de un suport mai bun pentru browser pentru o funcționalitate mai avansată pentru a vedea de ce este capabil formatul.
• În unele cazuri, este posibil să găsiți că imaginile SVG sunt mai puțin precise sau au un aspect greșit. Acest lucru se datorează faptului că trebuie să vă bazați pe un site care se încarcă așa cum v-ați aștepta. Dacă vă amintiți un moment în care a trebuit să reîncărcați o pagină web din cauza erorilor, imaginându-vă că acest lucru se întâmplă doar cu imaginile dvs. SVG.

De asemenea, am spune că este mai greu să creezi SVG-uri fără cunoștințe de codificare și în unele cazuri. Există un suport mult mai bun în programele de grafică precum Affinity Designer și Adobe Illustrator. Există, de asemenea, suport pentru exportul SVG în aplicații precum Google Drawing:

Aceasta este o zonă în îmbunătățire, dar este încă puțin în urmă în comparație cu alte formate de imagine.

În ciuda acestor dezavantaje, le puteți atenua. Cu siguranță, pentru utilizarea de bază, le puteți implementa aproape imediat. De fapt, WordPress oferă chiar această asistență cu câțiva pași, iar despre asta vom discuta în continuare.

Cum să utilizați SVG-urile pe site-ul dvs. WordPress

Vestea proastă este că, dacă vrei să încarci un SVG pe WordPress fără nicio treabă, nu vei putea. O problemă suplimentară cu suportul actual pentru grafica vectorială scalabilă este că WordPress nu vă permite să încărcați aceste imagini ca standard din motive de securitate:

Motivele depășesc domeniul de aplicare al acestui articol. Pe scurt, deoarece formatul SVG este mai degrabă un document decât o imagine reală, un utilizator rău intenționat ar putea genera atacuri potențiale de scripting. Acest lucru înseamnă că va trebui să găsiți o alternativă mai sigură.

În altă parte pe web, veți găsi instrucțiuni pentru a adăuga un cod în fișierul functions.php pentru a activa încărcările SVG. Cu toate acestea, nu vom trece prin acest pas, deoarece nu putem garanta că este sigur. În schimb, puteți face ceea ce ați face adesea cu WordPress: apelați la un plugin. Vă recomandăm suport SVG:

După ce instalați și activați pluginul, mergeți la ecranul Setări > Asistență SVG din WordPress. Aceasta vă va afișa câteva ecrane, dar trebuie doar să bifați opțiunea Restricționați la administratori? caseta de selectare din panoul Setări.

În mod implicit, pluginul va permite tuturor utilizatorilor să încarce SVG-uri. Aceasta ar putea fi o veste proastă bazată pe problemele de securitate inerente și tocmai de aceea WordPress nu vă permite să încărcați acele fișiere în primul rând. Cu toate acestea, dacă bifați această casetă, pluginul va restricționa încărcarea numai pentru administratorii site-ului, împreună cu utilizarea SVG-urilor mai sigură ca standard.

În concluzie

Există o mulțime de moduri de a afișa imagini pe web și majoritatea oamenilor nu se gândesc de două ori la formatul pe care îl folosesc. Cu toate acestea, dacă vă faceți timp pentru a potrivi formatul la nevoie, veți obține imagini detaliate și clare, care arată uimitor pe toate ecranele.

În această postare, am oferit o mulțime de informații despre grafica vectorială scalabilă. Veți folosi CSS pentru a adapta imaginea la nevoile dvs., iar sfera de manipulare este mult mai mare decât PNG-urile și JPEG-urile. De asemenea, sunt ușoare – deci, perfecte pentru ecrane mici și conexiuni slabe la internet.

Doriți să utilizați grafică vectorială scalabilă pe site-ul dvs. și, dacă da, vă va ajuta acest articol? Anunțați-ne în secțiunea de comentarii de mai jos!

Credit imagine: GDJ.