Mai devreme, în blogul nostru, am ridicat subiectul creării de interfețe web de înaltă calitate, în special, într-unul dintre subiectele anterioare, am discutat problema utilizării corecte a animațiilor. În materialul de astăzi vom vorbi despre tehnologia SVG, principiile de lucru cu această tehnologie, avantajele și dezavantajele acesteia. În plus, am întrebat designerii autohtoni dacă folosesc SVG și, dacă nu, de ce nu.

Foarte pe scurt: ce este SVG

Avantajele și provocările utilizării SVG

Creați nu doar frumos, ci cu adevărat design bun Este pur și simplu imposibil să creezi o pagină web fără a înțelege cum se va încărca această pagină, va fi afișată în browser, se va adapta la dimensiunea ferestrei de vizualizare și se va modifica atunci când conținutul este modificat. Pe baza acestui fapt, putem spune că un web designer este o specialitate tehnică (poate că esența acestei lucrări este mai bine exprimată prin termenul de „inginer web”), în cea mai mare parte implicând utilizarea logicii și cunoștințelor și doar o mică parte. din care o parte este creativitatea artistică. Cu alte cuvinte, un designer web prost este unul care nu știe deloc să facă layout.

După ce am înțeles ce este cu adevărat un designer modern, putem trece la discutarea beneficiilor pe care astfel de profesioniști le pot câștiga din utilizarea tehnologiei SVG. Pe scurt, utilizarea sa ajută la creșterea vitezei și a calității muncii: designerul trebuie să efectueze el însuși mai puține acțiuni, ceea ce reduce timpul petrecut în diferitele etape ale creării unui proiect.

Să aruncăm o privire mai atentă asupra listei de avantaje ale SVG:

SVG este ușor de modificat(atât în ​​editorul grafic, cât și pe pagina în sine folosind CSS). Modificarea locației, formei, mărimii, proporțiilor, culorii, umplerii și a tuturor celorlalte proprietăți ale părților constitutive ale imaginii este mai ușoară decât în ​​cazul grafică raster. Când lucrați cu un raster, va trebui să stocați „sursa” într-un format cu straturi, să faceți toate modificările în acesta și să o exportați. Cu SVG, de obicei, nu este nevoie de o „sursă”.

Pentru ecranele cu densitate mare de pixeli, este suficientă o singură imagine.În cazul graficelor raster acest moment(primăvara 2015) aveți nevoie de cel puțin trei (!) versiuni ale imaginii: dimensiunea aspectului 100%, 200% și 300%. În cazul utilizării SVG, este suficientă o singură versiune - ca pentru oricare format vectorial, pixelii necesari pentru a afișa imaginea „apar” chiar înainte de afișare, în funcție de dimensiunea pixelului necesară.

SVG se încarcă rapid. Da, da, pentru că, după cum am aflat mai sus, designerii ar trebui să se gândească și la viteza de încărcare a paginii, pentru că cu cât trece mai mult timp de la trimiterea unei solicitări până la afișarea paginii, cu atât conversia proiectului este mai mică. În primul rând, fișierele SVG au, în general, o dimensiune de fișier mai mică decât versiunile lor raster (excepțiile includ imagini mici de dimensiunea pixelilor și imagini vectoriale complexe cu multe forme). În al doilea rând, puteți adăuga mai multe versiuni ale unei imagini într-un fișier SVG și le puteți afișa în anumite condiții (reducerea numărului de solicitări către server). În al treilea rând, în SVG puteți folosi „clonarea” - specificați o formă (gradient, textură) o dată și utilizați-o în mod repetat, referindu-se la original. Există, totuși, un dezavantaj: redarea SVG în browser este puțin mai lentă decât afișarea unei imagini raster, dar pentru a observa această diferență, trebuie să comparați imagini mari și complexe.

SVG este ușor de făcut receptiv.În cazul în care este necesar să afișați sigla site-ului într-o versiune simplificată pe ferestre înguste, SVG vă permite să realizați acest lucru într-o singură solicitare către server.

SVG poate fi interactiv. Pot exista link-uri, scripturi în interiorul imaginii, părțile interactive pot reacționa la hover și alte acțiuni ale utilizatorului, puteți adăuga animație.

Software distribuit gratuit. Nu trebuie să utilizați SVG pentru a lucra cu Adobe Illustrator(ca standard în lumea graficii vectoriale), Inkscape distribuit destul de liber. Există o serie de alte instrumente.

În ciuda avantajelor enumerate ale formatului SVG, nu toți designerii îl folosesc în proiectele lor. Am întrebat experți ruși cunoscuți în domeniul designului și al designului de interfețe despre motivele acestei situații:

Yuri Vetrov, Șef Departament Inginerie și Proiectare la Mail.Ru

Răspunsul simplu este că nu este suficient ca un designer să învețe cum să pregătească SVG; este necesar ca dezvoltatorii să-l poată folosi în produs, iar acest lucru nu este atât de ușor; o mulțime de soluții tehnologice trebuie schimbate. . În al doilea rând, procesul de lucru cu vectori în sine trebuie să fie optimizat, astfel încât SVG să poată fi exportat confortabil de la existente. editori grafici. Acestea. Nu există prejudecăți, doar că procesul de lucru trebuie restructurat semnificativ, iar acest lucru nu oferă niciun beneficiu evident pentru afacere. Acestea. Aceasta este o sarcină de infrastructură, care este întotdeauna o prioritate mai mică. Desigur, toată lumea va trece la el în timp, dar problemele sunt aproximativ cele descrise mai sus.

Denis Kortunov, director UX la Acronis

Această întrebare nu este cu adevărat pentru designeri, ci pentru tehnologii web sau dezvoltatorii front-end. În zilele noastre, destul de mulți designeri proiectează inițial în vector și nu există nicio problemă în a prezenta grafica ca SVG. Problema principală este compatibilitatea cu browsere diferite. Asemenea imagini pur și simplu nu sunt afișate și este nevoie de mult „dans cu tamburine”. O alternativă comună la SVG este utilizarea fonturilor. Acesta este un hack care vă permite să utilizați imagini vectoriale pe web.

În general, în web modern există o problemă - avem nevoie de un format simplu și universal pentru afișare imagini vectoriale pe pagini. Este posibil ca SVG să devină în curând standardul. Aștept cu nerăbdare asta.

Dmitry Zimin, manager de proiect Kinokhod

Cât despre „de ce nu folosesc SVG”, pot vorbi doar pentru proiectul nostru. Avem o particularitate: majoritatea conținutului sunt fotografii (postere, fotografii din film, videoclip de previzualizare).

Interfață în aplicatie de mobil Vrem să-l convertim în vector, deoarece tăierea imaginilor în trei rezoluții (x.png, @2x.png, @3x.png) este atât plictisitoare, cât și predispusă la greșeli. Dar până acum nu am ajuns la asta.

Artyom Geller, dezvoltatorul șef al site-ului Kremlin.ru

Folosim activ SVG în proiectele noastre, dar și această tehnologie are anumite restricții. Pentru noi, ele, desigur, sunt compensate de beneficiile pe care le aduce SVG - nu avem nevoie de animație complexă în elemente și nu trebuie să pictăm nimic în ele atât de des.

În același timp, înlocuim elemente din SVG cu PNG, în cazul în care o anumită versiune de browser nu este prietenoasă cu acest format.

Nikita Mikheenkov, director de dezvoltare, Nimax Design

Ni se pare că problema aici nu este deloc despre designeri, ci despre întreaga echipă care realizează proiectul. Forța obișnuinței ne trage înapoi la grafica raster - este mai simplă și mai familiară. Lucrăm constant cu SVG în proiectele noastre și mai ales ne place să facem tot felul de lucruri animate și zburătoare.

Iată câteva exemple cu grafica vectoriala.

SVG este un format de imagine pentru grafică vectorială. Literal, nu este nimic mai puțin decât scalabil. Grafică vectorială. Adică, cu asta lucrați în Adobe Illustrator. Utilizarea SVG în dezvoltarea web este destul de ușoară, dar există câteva caracteristici care merită luate în considerare.

Pentru ce se folosește SVG?

• Fișier de dimensiune mică, care se comprimă bine
• Scalare la orice dimensiune fără pierderi de calitate
• Arata grozav pe ecranele retina
• Control complet al designului în interactivitate și filtre

Să desenăm ceva pentru lucrare viitoareîn Adobe Illustrator. Să luăm pasărea Kiwi:

​

Vă rugăm să rețineți că pânza este tăiată exact de-a lungul marginii imaginii. O pânză SVG este construită absolut identic cu un PNG sau JPG. Puteți salva fișierul direct din Adobe Illustrator ca fișier SVG.

​

După ce salvați fișierul, va apărea o altă casetă de dialog cu opțiuni SVG. Sincer să fiu, nu știu prea multe despre toate setările prezentate în această fereastră. Există o specificație pentru profilurile SVG, așa că dacă ești interesat o poți citi. Găsesc că SVG 1.1 funcționează grozav.

​

Lucrul tare aici este că puteți fie să faceți clic pe OK și să salvați fișierul, fie să faceți clic pe butonul „Cod SVG...” și se va deschide un editor de text cu codul SVG.

​

Ambele metode pot fi utile.

Folosind SVG ca etichetă img

În Illustrator, pânza noastră s-a dovedit a fi 612px ✕ 502px.

Cât de mare va fi imaginea pe pagină depinde de dvs. Puteți redimensiona o imagine definind proprietățile de lățime și înălțime, exact în același mod ca în PNG sau JPG. Iată un exemplu:

Verificați acest stilou!

Cum să faci SVG pentru browsere încrucișate

Când utilizați SVG în acest fel, trebuie să aveți în vedere: suport diferit browsere. În esență, SVG funcționează peste tot, cu excepția IE8 și mai jos, precum și Android 2.3 și mai jos.

Dacă trebuie să utilizați SVG, dar aveți nevoie și de suport din browserele de mai sus, există mai multe opțiuni pentru a rezolva problema. Am folosit mai multe tehnici în diverse proiecte pentru a rezolva această problemă.

O modalitate de a verifica suportul SVG este Modernizr, cu care schimbați calea src:

Dacă (!Modernizr.svg) ( $(".logo img").attr("src", "images/logo.png"); )

David Bushell a venit cu unul foarte ușor cale alternativă dar conține javascript în markup:

Serviciul SVGeezy poate ajuta, de asemenea. Pe măsură ce continuăm acest articol, ne vom uita la multe diferite metode de backup pentru suport SVG.

Folosind SVG ca imagine de fundal

Prin analogie cu etichetă img, SVG poate fi folosit ca imagine de fundal:

Rețineți că setăm dimensiunea fundalului să fie exact aceeași cu dimensiunea elementului. Acest lucru trebuie făcut pentru că in caz contrar am vedea un mic top parte imaginea originală. Aceste numere țin cont de proporțiile originale ale imaginii. De asemenea, puteți utiliza background-size ca valori Cuvinte cheie, de exemplu conţin, astfel încât imaginea să ocupe complet întregul element.

Folosind SVG ca imagine de fundal își lasă amprenta pe suportul browserului, dar, în general, totul este la fel ca atunci când se folosește eticheta img.

Modernizr ne poate ajuta și mai mult aici mod eficient decât în ​​cazul img. Ideea este că dacă înlocuiți imaginea de fundal cu un format acceptat, atunci va fi executat doar unul Solicitare HTTPîn loc de două, cum este cazul img. Modernizr adaugă numele clasei „no-svg” la Etichetă HTML dacă browserul nu are suport SVG:

Antetul principal ( fundal: url(logo.svg) fără repetare stânga sus; background-size: conține; ) .no-svg .main-header ( imagine de fundal: url(logo.png); )

Dacă întâmpinați probleme la utilizarea celor două moduri de mai sus de a folosi SVG, mai jos sunt mai multe modalități de aranjare a graficelor vectoriale.

Folosind SVG „inline”.

S-a menționat mai sus că atunci când salvați o imagine în format SVG, folosind editorul Illustrator puteți obține codul SVG corect (puteți deschide și fișierul folosind editor de textși copiați acest cod). Puteți copia acest cod în HTML, iar SVG-ul va reda exact la fel ca folosind img.

Acest lucru poate fi util, deoarece imaginea vine împreună cu codul din document și nu necesită o solicitare HTTP. Cu alte cuvinte, beneficiile sunt aceleași ca la utilizare Date URI. Cu toate acestea, există și dezavantaje. Prin introducerea unui cod SVG direct, documentul începe să arate ca o porcărie mare și umflată.

Există, de asemenea, o opțiune de inserare SVG pe partea serverului:

Optimizare SVG

Adobe Illustrator nu efectuează acțiuni de optimizare în mod implicit pentru imaginea SVG rezultată. Oferă DOCTYPE și note și totul este aproape un gunoi. SVG este destul de ușor în mod implicit, dar de ce să nu îl faceți și mai mic? Peter Collingridge a oferit instrument online pentru a optimiza SVG Optimiser. Folosind acest serviciu, puteți încărca dosar vechiși obțineți unul nou optimizat.

Dacă doriți mai mult hardcore - nicio problemă, iată un instrument pentru optimizarea SVG folosind instrumentul Javascript Node JS de pe server https://github.com/svg/svgo

Stilul SVG

Vedeți cum SVG este similar cu HTML? Pentru că amândoi sunt date XML. În designul nostru există două elemente care formează baza, acestea sunt elipsa și calea. Putem specifica cu ușurință clase pentru ele prin cod HTML.

Acum putem controla aceste elemente folosind CSS SVG personalizat. Acest CSS nu trebuie să fie încorporat direct în SVG, el poate fi plasat absolut oriunde. Vă rugăm să rețineți că elementele SVG au un set special de stiluri care sunt create special pentru lucrul cu grafica vectorială. De exemplu, nu se folosește culoarea obișnuită de fundal, ci umplerea. Deși funcționează și unele stiluri obișnuite, de exemplu:hover.

Kiwi ( completare: #94d31b; ) .kiwi:hover (completare: #ace63c; )

SVG are filtre distractive. De exemplu, estompare:

Puteți apoi aplica acest lucru în css dacă este necesar:

Ground:hover (filtru: url(#pictureFilter); )

Iată ce s-a întâmplat:

Verificați acest stilou!

Suport pentru SVG „inline” în browsere

Lista browserelor care acceptă acest mod Ecranele SVG pot fi vizualizate aici http://caniuse.com/#feat=svg-html5. Din nou, nu există suport în IE8 și Android 2.3.

Una dintre opțiunile de rezervă pentru aceasta tip SVG:

Apoi folosim din nou Modernizr:

Logo-fallback (afișare: niciunul; /* Asigurați-vă că are aceeași dimensiune ca și SVG-ul */ ) .no-svg .logo-fallback ( imagine de fundal: url(logo.png); )

Folosind SVG ca obiect

Dacă folosirea unui SVG „inline” nu este treaba ta (rețineți că această opțiune are dezavantaje, cum ar fi lipsa memoriei cache), puteți lega SVG-ul la un obiect și apoi îl puteți modifica folosind css:

Pentru asistență între browsere, folosim Modernizr:

.logo fără svg ( lățime: 200 px; înălțime: 164 px; imagine de fundal: url(kiwi.png); )

Această opțiune funcționează excelent cu stocarea în cache și are cel mai mult suport pentru browser dintre toate cele de mai sus. Dar pentru a acţiona cu folosind CSS pentru un astfel de obiect, va trebui să scrieți stiluri direct în fișierul SVG.

Utilizare URI de date este o modalitate de a reduce greutatea SVG. Mobilefish.com oferă un instrument de optimizare online în acest scop. Doar lipiți conținutul fișierului dvs. SVG și completați formularul, apoi rezultatul va fi afișat într-un câmp de text care poate fi copiat. Arata cam asa:

​

Puteți folosi acest cod oriunde! De exemplu:

Sigla ( fundal: url(date:image/svg+xml;base64,); )

Și apropo, dacă aveți un stil inline în SVG care este înainte de base64, va funcționa dacă îl utilizați ca obiect!

Suportul pentru grafică vectorială scalabilă (SVG) funcționează excelent în toate browsere moderne, formatul de imagine apare în contexte surprinzătoare pe multe pagini web diferite. Dar, în ciuda faptului că a fost standardul de aproape două decenii, SVG rămâne un format oarecum nou pentru unii designeri și dezvoltatori, lăsându-i confuzi cu privire la modul în care ar trebui să fie utilizat pe un site. Iată câteva motive pentru care ar trebui să utilizați SVG:

Dimensiune mică a fișierului

Bine conceput, un SVG tipic este mult mai mic decât PNG echivalent, ceea ce înseamnă că paginile care le folosesc se încarcă mai repede pentru utilizatori.

Scalabilitate

Deoarece SVG este construit din formule matematice, nu pixeli fix grafică raster Imaginile SVG pot fi mărite sau reduse fără a pierde calitatea, făcându-le ideale pentru site-uri web moderne, receptive.

Interacționează cu DOM

SVG este uneori denumit „desen de marcare”: fiecare element dintr-o imagine SVG interacționează cu DOM, ceea ce înseamnă că CSS și JavaScript pot manipula părți ale documentului SVG. Spre deosebire de grafica raster, fiecare formă individuală din SVG poate avea propriul ID sau clasă.

Ușor de modificat și adaptat

Calitatea componentelor SVG înseamnă că documentele SVG bine formate pot fi modificate cu ușurință în orice editor de text fără a fi nevoie de programe specializate, necesar pentru imagini raster. Și pentru că SVG interacționează cu DOM, elementele acestuia pot fi modificate folosind CSS. Formatul SVG este perfect pentru afișarea:

logos

• ilustrații și desene

Instrumente pentru lucrul cu SVG

Deși puteți crea un document SVG folosind orice editor de text, programele de ilustrare vectorială, cum ar fi Adobe Illustrator sau Inkscape sunt de obicei cea mai buna alegere(deși trebuie remarcat faptul că alte aplicații, inclusiv programe 3D, cum ar fi Blender și aplicatii server, poate exporta SVG).

Indiferent de ce folosiți, ar trebui să fiți conștienți de faptul că crearea de SVG-uri din aplicații lasă uneori foarte mult de dorit: documentul rezultat este adesea supracodat și uneori prost formatat. Fișierul .svg poate fi făcut mai mic, mai compact, prin procesarea lui folosind un optimizator precum SVGOMG. Uneori, trecerea document.svg greșit prin validatorul W3C vă poate ajuta să identificați problemele.

Integrare SVG

Există trei moduri principale prin care SVG poate fi utilizat direct pe o pagină web:

Deoarece SVG se bazează pe XML, poate fi integrat direct în codul de pe pagina ta. Codul SVG reduce latența și timpul general de încărcare a paginii dvs.


Ca imagini raster, fișier SVG te poți referi la etichetă sau prin CSS ca imagine de fundal. Acest lucru este adesea Cel mai bun mod cu excepția cazului în care SVG-urile au nevoie de atenție individuală pentru CSS și JavaScript.


Inserat ca