Pregătirea SVG pentru utilizare pe web este un proces foarte simplu, nu mai complicat decât exportul JPEG sau PNG. Utilizați orice editor grafic cu care sunteți familiarizat (Illustrator, Sketch, Inkscape [gratuit] etc. [sau chiar Photoshop dacă utilizați straturi de formă]) la dimensiunea imaginii pe care intenționați să o utilizați. Lucrez de obicei în Illustrator, așa că voi explica câteva dintre modalitățile de a pregăti fișiere în acel program, dar acestea se aplică în general oricărui program. Poate doriți să convertiți textul în curbe, deoarece fontul va fi redat cel mai probabil incorect, cu excepția cazului în care intenționați să le stilați cu fontul web folosit pe pagină (ceea ce este posibil!). De asemenea, nu este o idee bună să convertiți toate obiectele în forme unice, mai ales dacă aveți linii care vor trebui manipulate pe pagină, mai ales că conversia obiectelor adesea nu reduce dimensiunea fișierului. Orice nume atribuite grupurilor sau straturilor vor fi adăugate la SVG ca ID de element. Acest lucru este destul de convenabil pentru stil, dar va crește ușor dimensiunea totală a fișierului.

Înainte de a exporta, trebuie să verificați dacă toate imaginile sunt într-o grilă de pixeli întregi (adică, de exemplu, nu 23,3 px × 86,8 px). În caz contrar, cel mai probabil imaginea nu va avea suficientă claritate și o parte din imagine va fi tăiată. În Illustrator, acest lucru se poate face după cum urmează: Obiect > Planșe de artă > Potrivire la limitele lucrării de artă. Apoi faceți clic pe Salvați ca și selectați SVG și lăsați setările implicite. Există puțină optimizare pe care o putem face aici, dar chiar nu merită, deoarece vom folosi mai târziu diverse tehnici de îmbunătățire, așa că nu vom pierde timpul cu acele ajustări deocamdată.

(Vezi optimizarea)

Pentru a realiza cea mai mică dimensiune SVG, ar fi logic să eliminați tot ce nu este necesar din el. Cel mai faimos și program util(cel puțin așa cred) pentru procesarea SVG este SVGO. Îndepărtează tot codul inutil. Dar! Fiți atenți când utilizați acest program dacă intenționați să manipulați SVG când Ajutor CSS/ JS, deoarece poate curăța prea mult codul, ceea ce face modificările viitoare dificile. SVGO este, de asemenea, convenabil prin faptul că poate fi inclus în procesul de construire automată a unui proiect, dar puteți utiliza și GUI dacă doriți.

Înțelegând mai în detaliu eliminarea corectă a tuturor lucrurilor inutile, putem face altceva editor grafic. Mai întâi trebuie să vă asigurați că utilizați cât mai puține căi/forme posibil, precum și puncte de pe acele căi. Puteți combina și simplifica tot ceea ce poate fi simplificat și puteți elimina toate punctele inutile. Illustrator are un plugin VectorScribe cu un instrument Smart Remove Brush, care vă va ajuta să eliminați puncte, păstrând în același timp forma generală.

Optimizare preliminară

Smart Remove Brush Tool a eliminat puncte

În continuare vom mări imaginea. În Illustrator, este convenabil să activați Vizualizare > Previzualizare pixeli cu o grilă de pixeli și să verificați cum sunt poziționate contururile. Va dura puțin timp pentru a plasa contururile pe grilă, dar efortul va da roade și va avea ca rezultat o randare mai curată (cel mai bine este să acordați atenție acestui lucru în avans).

Puncte în afara rețelei

Aliniați la Grilă

Dacă există două sau mai multe obiecte de aliniat, atunci merită să eliminați toate suprapunerile inutile. Uneori, chiar dacă contururile sunt aliniate cu grijă, poate fi vizibilă o linie albă subțire. Pentru a preveni acest lucru, puteți suprapune ușor obiectele unde se suprapun. Important: în SVG, indexul z are o anumită ordine, care depinde de obiectul de mai jos, așa că merită să plasați obiectul de sus în partea de jos a fișierului în cod.

Și, în sfârșit, nu în ultimul rând, ceva ce este de obicei uitat este să activați compresia gzip a SVG pe site-ul dvs. în fișierul .htaccess.

AddType imagine/svg+xml svg svgz AddOutputFilterByType DEFLATE "image/svg+xml" \ "text/css" \ "text/html" \ "text/javascript" ... etc

Ca exemplu despre cât de eficientă este această tehnică, voi lua logo-ul original Breaking Borders și îl voi optimiza astfel: măresc dimensiunea la ceea ce ar trebui să fie; Voi pune contururile în ordine; Voi șterge cât mai multe puncte; mutați punctele cu pixeli întregi; Voi muta toate zonele care se suprapun și voi trimite totul către SVGO.

Ca rezultat, dimensiunea fișierului a devenit cu ~71% mai mică (și cu ~83% mai mică când a fost comprimat)

Pictogramele pe care le găsiți în aceste resurse pot fi folosite și pentru a ilustra informații în prezentări de diapozitive, pentru a decora cărți de vizită, meniuri, fluturași și multe altele.

Am scris că pictogramele de pe aceste site-uri sunt gratuite, dar totuși acordați atenție condițiilor de descărcare, deoarece acestea se pot schimba în orice moment.

Blugraphic - Opțiuni pentru pictograme PSD, PNG și vector. Căutarea este limitată la etichete, dar vă puteți abona la newsletter și puteți primi săptămânal selecție liberă prin email.

Icon Shock - mii de pictograme gratuite pentru uz personal. Pentru a utiliza o imagine într-un proiect comercial, trebuie să faceți o plată unică.

CSS Author oferă tururi săptămânale ale celor mai bune pictograme gratuite de pe web.

Vrei icoane proaspete? Creative Tail are truse pe care nu le vei găsi în altă parte.

Descărcarea totală gratuită oferă căutare ușoară și descărcări directe de PSD, PNG și vectori.

Ego Icons oferă peste 1500 de pictograme premium și 100 de pictograme vectoriale gratuite. Vizitați și subsite-urile făcând clic pe butoanele din bara de navigare de sus.

AlienValley oferă o gamă largă de pictograme de înaltă calitate în schimbul adresei dvs. de e-mail.

Dreamstale vă oferă câteva pictograme premium gratuite excelente cu atribuire.

1001 Descărcări gratuite este specializată în pictograme plate care vin într-o varietate de opțiuni frumoase și ciudate.

Pe Pixeden puteți căuta pictograme în mai multe dimensiuni. Există o selecție largă de la 16x16 la 512x512 în format PNG.

NounProject este o căutare convenabilă, descărcare ușoară și calitate superioară icoane Este necesar un link către autor. Abonamentul cu o taxă lunară elimină restricțiile de descărcare.

Iconmonstr oferă icoane în mai multe dimensiuni fără atribuire.

Designul responsive este un subiect popular. Ecranele au depășit de mult rezoluțiile standard, iar site-urile web pot fi vizualizate atât pe dispozitive de dimensiunea palmei, cât și pe monitoare mari. Site-ul ar trebui să arate la fel de bine, indiferent de dimensiunea dispozitivului și densitatea pixelilor. Există multe tehnici și tehnologii diferite pentru adaptarea designului și a conținutului. Grafică vectorială, SVG, după părerea mea, este unul dintre cele mai interesante subiecte în această direcție.

Grafica SVG este convenabilă de utilizat pentru pictograme, nu va arăta cu săpun pe dispozitivele cu retină și poate fi întinsă fără a pierde calitatea.

Iată, de exemplu, un sprite SVG în 4 dimensiuni diferite, original - 32 px:

SVG face bine această treabă și este bine potrivit pentru utilizarea în machete receptive.

Puteți lua icoane pentru design din seturi gata făcute sau puteți să le desenați pe ale dvs.

Colecție mare de icoane pe diverse subiecte. Se sugerează ca pictogramele încărcate să fie inserate în HTML folosind utilizarea .

Cel mai convenabil instrument. Puteți nu numai să selectați și să descărcați pictograme gata făcute, dar le puteți încărca și pe ale dvs. și le puteți obține sub forma unui font și/sau sprite. Împreună cu sprite, vi se oferă să descărcați versiunea PNG.

Colecție mare, icoanele sunt împărțite convenabil în categorii. Pictogramele selectate pot fi descărcate în formate individuale (font, SVG, PNG) sau toate odată.

Pentru a vă crea propriul set de pictograme veți avea nevoie de un editor vectorial:

• Adobe Illustrator este cel mai bun din punctul meu de vedere. 599 RUB/lună ca parte a unui abonament Creative Cloud;
• Inkscape este gratuit și nu foarte ușor de utilizat;
• Sketch - pentru Mac OS, 79,99 USD. Are unele probleme cu vectorizarea loviturilor, dar în general destul de convenabil.

Fișierul SVG finit conține de obicei o mulțime de lucruri inutile, dar în același timp se pretează bine pentru optimizare. Atributele, spațiile și cratimele inutile sunt eliminate din cod, iar numărul de caractere după punctul în numere este redus. Greutatea fișierului este redusă cu 30-50%. Instrumente de optimizare:

grunt-svgmin - sarcină pentru Grunt folosind svgo. În acest caz, fișierele în sine vor fi preluate din folderul sursă, optimizate și stocate în folderul cu rezultate. Foarte convenabil.

Fontul este o alternativă convenabilă la sprite. Nu trebuie să vă deranjați cu grila și aranjarea pictogramelor, este convenabil să adăugați simboluri noi, deși acest lucru necesită instrumente suplimentare.

Folosind un font, puteți crea nu numai pictograme cu o singură culoare, ci și mai multe culori.

Vă puteți crea propriul font, de exemplu, pe site-ul web icomoon.io/app/. Secvența aproximativă de acțiuni:

Împreună cu fontul în patru formate (.woff, .svg, .ttf, .eot), sunt descărcate CSS și un fișier demonstrativ.

Fonturile încorporate funcționează chiar și în IE 8, dar au probleme de suport neașteptate în unele browsere moderne. Opera Mini nu acceptă deloc fonturi personalizate, Firefox necesită vrăji pentru serverul unde se află fontul (rezolvat folosind base64), Chrome poate descărca fontul dacă lăsați fila deschisă mult timp:

De asemenea, în Chrome pe Windows7, o pagină cu fonturi încorporate se poate bloca la deschidere, iar în alte browsere, în loc de pictograme, poate apărea orice:

Imagine din articolul lui Chris Coher Icon System with SVG Sprites. Am văzut odată hieroglife în același loc, dar acum sunt SVG, așa că nu pot face o captură de ecran. CSS-tricks, apropo, folosește foarte activ SVG în noul său design, iar dezvoltatorii Codepen au abandonat utilizarea fonturilor de pictograme în favoarea SVG în noul design al editorului.

În ciuda ușurinței de utilizare, există probleme cu suportul fonturilor în în acest moment vă obligă să alegeți pictogramele SVG.

Aș dori să sper că în viitor fonturile încorporate vor fi mai bine acceptate.

Care sunt diferitele moduri de a insera SVG într-o pagină?

Pro:

• cod scurt lizibil;
• imaginea este stocată în cache;

Contra:

• cerere către server;
• în Opere mai vechi, suportul SVG de fundal este ciudat: pot apărea probleme la adăugarea unui cadru la un element cu un fundal SVG, iar în Opera Mini doar fundaluri fără viewBox funcționează;
• pictogramele în sprite nu sunt disponibile pentru stilurile de pagină;
• Sprite-urile mari pot cauza probleme de performanță.

Pro:

• nu există nicio solicitare către server.
• suport bun pentru browser: totul, cu excepția Opera pe Presto și vechiul IE.

Contra:

• imaginea nu este stocată în cache și este redată din nou de fiecare dată;
• linie lungă în CSS;
• nu se poate citi: nu este clar din cod ce conține;
• imaginea codificată poate cântări mai mult decât cea originală;
• sunt necesare instrumente suplimentare pentru codificare/decodare;
• pictogramele nu sunt disponibile pentru stilurile de pagină.