Set de pictograme svg. Cum să implementați pictogramele SVG încrucișate

În această postare voi demonstra cum să implementez pictogramele SVG, cum să implementez o alternativă și, de asemenea, cum să transformi pictogramele într-un sprite SVG.

Integrarea elementului SVG de bază

În special pentru acest tutorial, voi folosi o pagină care va funcționa ca o carte de vizită online. Voi prezenta pe scurt serviciile mele și voi arăta trei profiluri din rețelele profesionale legate de munca mea. Vom folosi pictograme SVG.

Puteți vedea din captura de ecran de mai sus că folosesc pictograme (Twitter, Dribbble și GitHub) pentru a face legătura simbolică la profilurile mele de lucru. Am descărcat aceste pictograme de pe flaticon, care avea o varietate de pictograme și simboluri diferite în formate vectoriale și raster.

PNG și SVG

Vom începe prin a folosi versiuni PNG ale acestor pictograme de dragul compatibilității cu versiunile anterioare, apoi pregătiți pictogramele SVG pentru a funcționa în browserele compatibile.

Am folosit Sketch pentru a obține pictogramele PNG și îl voi folosi din nou pentru a pregăti pictogramele SVG.

Dacă te uiți la captura de ecran de mai sus, vei observa că am numit toate grupurile și formele din panoul din stânga în consecință (Adobe Illustrator are aceeași listă în panoul Straturi). Este foarte important să numiți corect toate sursele, acest lucru nu numai că va ajuta la organizarea bine a proiectului, ci va ajuta și în etapele ulterioare ale acestei lecții.

Exportați versiunile SVG

Acum export pictogramele în pictograme SVG, acest lucru este foarte ușor de făcut folosind instrumentul de tăiere din Sketch (Tăiere). Pentru mai mult descriere detaliată Pentru a vedea cum funcționează această opțiune, citiți Înțelegerea opțiunilor de export Sketch. Le voi exporta ca fişiere separateși plasați-le în folderul de imagini din proiectul meu.

În mod normal, pentru a afișa o imagine pe un site web, faci link la sursă folosind un element cu atributul src sau ceva similar:

Dar cu fișierele SVG, există câteva alte moduri în care le puteți utiliza în documentul HTML. De exemplu, puteți utiliza codul SVG direct - așa ar trebui să arate:

twitter-icon Created with Sketch.

Aceasta este una dintre pictogramele pe care le-am exportat format XML. Acest cod este foarte asemănător cu HTML (este un format structurat), ceea ce înseamnă că îl putem încorpora direct în pagină.

Adăugarea SVG la HTML

Să începem cu o pagină HTML de bază care include pictograme PNG cu ancorele lor și un container:

Și acum voi copia și lipi codul SVG, deși voi ignora linia de sus, care se referă la natura încorporarii fișierului și la alte detalii despre atribute. Documentul HTML conține deja informații care nu trebuie duplicate.

twitter-icon Created with Sketch.

Am plasat SVG-ul direct deasupra pictogramelor PNG corespunzătoare din pagina HTML. Pe în acest moment Voi încheia linia cu imaginea PNG obișnuită într-o etichetă de comentariu, astfel încât să nu apară lângă versiunea SVG

Mai curat SVG

De asemenea, voi curăța codul din SVG-ul meu. Eliminarea elementelor de atribut este opțională, deoarece majoritatea fragmentelor pe care le elimin nu vor schimba comportamentul SVG-ului. Iată codul înainte și după în cazul în care doriți să faceți același lucru:

twitter-icon Created with Sketch.

Uite ce articole am scos. Elementele , , și nu sunt necesare acum, dar vor fi utile mai târziu în această lecție. Există, de asemenea, câteva elemente care se referă la grupuri și corespund grupurilor create în documentul meu Sketch. În mod implicit, Sketch plasează totul în interiorul paginii, de unde elementul de grup

Iată una dintre pictogramele mele SVG de pe pagină și veți observa că pictograma mea PNG originală este încă acolo, dar este comentată. Această imagine PNG va fi de rezervă.

Ștergerea comentariilor

Voi șterge mai întâi comentariile. Trebuie să-l mutăm sus și la elementul svg>, imediat după grupul care conține pictograma în sine. Atunci o voi încheia într-un element SVG numit foreignObject. Dacă browserul nu poate înțelege informațiile vectoriale SVG, atunci se va referi la un „obiect extern” și se va folosi din ea. De asemenea, trebuie să spunem browserului să acceseze versiunea vectorială, dacă este acceptată. Și pentru aceasta se folosește elementul, în care am înfășurat atât grupul, cât și obiectul străin în sine. Și iată codul actualizat:

Dacă mi-ați urmat instrucțiunile și, de asemenea, v-ați structurat HTML ca și mine, atunci grafica ar trebui să treacă la originalul imagine raster, dacă browserul nu acceptă pictogramele SVG.

Crearea unui Sprite SVG

Sprite-urile SVG funcționează foarte asemănător cu sprite-urile grafice obișnuite. În lor cea mai simplă formă sprite-urile sunt o colecție de elemente grafice combinate într-o singură imagine. Fiecare imagine este apoi selectată folosind CSS și HTML, folosind coordonatele și o fereastră de vizualizare.

Principalele avantaje sunt încărcarea mai rapidă a paginii, mai mult lucru convenabilși coerența între graficele paginii. Al doilea și al treilea punct se aplică foarte bine sprite-urilor SVG. În loc ca mai multe blocuri de cod SVG să aglomereze pagina, vom avea tot codul legat de SVG într-un singur loc și va fi foarte ușor de actualizat.

Pentru a începe, voi crea un element nou în elementul paginii mele, chiar înainte de eticheta de închidere. Acest nou SVG va conține toate pictogramele care erau anterior pe pagină.

Apoi trebuie să pun pictograme acolo. Nu trebuie să împachetez întregul SVG, ci doar elementul de grup și conținutul acestuia. Pot încorpora acest lucru într-un element din capul fișierului.

David Darnes - Web Designer și dezvoltator front-end

Notă: dacă vă simțiți confortabil să utilizați Grunt, iată un plugin care automatizează îmbinarea tuturor fișierelor SVG individuale.

Ascunde!

Acum avem toate pictogramele SVG în cap și trebuie să le ascundem; adăugați atributul display=”none” la noul svg>, ceea ce înseamnă că nicio pictogramă nu va apărea în partea de sus a paginii.

Definiția fiecărei pictograme SVG

Următorul pas este să definim fiecare pictogramă astfel încât să le putem folosi pe pagina în care am eliminat anterior elementul defs. Folosind această etichetă, trebuie să împachetez toate grupurile, așa că prin împachetarea tuturor pictogramelor, pot indica că vreau să le reutilizam oriunde pe pagină.

David Darnes - Web Designer și dezvoltator front-end

Cum să utilizați pictogramele SVG

Icoanele sunt acum definite, dar trebuie să definim și metoda de utilizare a acestora, iar pentru aceasta luăm elementul use. Element vă permite să preluați orice element și să îl apelați oriunde pe pagină. Selectăm un element după ID-ul său, așa că a fost important să denumim pictogramele corect înapoi în documentul Sketch. Priviți ID-urile din exemplul de mai sus și cum mă refer la fiecare folosind .

Dacă ați făcut totul așa cum am făcut mine și nu ați făcut greșeli, nu veți vedea nicio modificare în afișajul grafic, dar acum puteți reutiliza pictogramele SVG (în orice dimensiune aveți nevoie) și să sunați pe fiecare de câte ori aveți nevoie. like pe pagina.

Îmbunătățirea sprite-ului nostru SVG

Un alt avantaj al folosirii sprite-urilor SVG este că codul paginii este mult mai curat și mai ușor de citit pentru alte persoane care lucrează și ei pe site. Putem îmbunătăți un pic rezultatul. Mai jos, am înlocuit elementele din sprite-ul meu SVG cu un element simbol, plus am mutat atributul caseta de vizualizare din elementele SVG de pe pagină la noile elemente simbol.

David Darnes - Web Designer și dezvoltator front-end

Utilizarea nu numai că este mai corectă din punct de vedere semantic în exemplul meu, dar elimină și necesitatea de a repeta atributul viewbox împreună cu elementele și. Putem aduce înapoi elementele de titlu și descriere pe care le-am eliminat mai devreme și le putem folosi pentru a îmbunătăți accesibilitatea pictogramelor. Notă: Rețineți că conținutul elementului este afișat implicit în IE7.

David Darnes - Web Designer & Dezvoltator front-end Cont Twitter Twitter Portofoliu Dribbble Dribbble Cont GitHub GitHub

Schimbarea elementului de grup în simbol. Putem implementa toate aceste îmbunătățiri. Puteți elimina un element dintr-un sprite SVG, făcând codul și mai curat.

Concluzie

Ei bine, ceea ce a început cu pictogramele raster simple s-a transformat într-un set super puternic grafica vectoriala, care poate fi aplicat cu ușurință oriunde este nevoie și în orice dimensiune este necesară. Sper că ați găsit acest tutorial util și veți continua să experimentați și să creați pictograme SVG în următorul dvs. proiect.

Etichete: , ,

Pictogramele PSD sunt un element indispensabil al oricărui design UI, nu inferioare ca importanță chiar și fonturilor, dar, în practică, rareori își dezvoltă cineva propriile pictograme pentru fiecare proiect web. Pe de altă parte, găsirea pictogramelor potrivite ca calitate și design necesită, de asemenea, mult timp, dar astăzi am decis să vă ajutăm și v-am pregătit o selecție de seturi de pictograme gratuite pentru toate ocaziile.

01.Icoane8

Icons8 - un set de 20 de mii de icoane plate în orice format, dimensiune și culoare! Categorii precum afaceri, îmbrăcăminte, alimente și multe altele sunt prezentate aici. Icons8 poate fi descărcat ca aplicație pentru Mac sau ca arhivă ZIP.

02.Freepik

O colecție vibrantă de pictograme vectoriale din resursa specializată Freepik este doar una dintre multele prezentate. Este ideal pentru afaceri și proiecte independente. În plus, puteți descărca pictograme PSD în formatele .AI, .EPS și .SVG.

03.Iconfinder

Proiectat în alb-negru, acest set conține o combinație de pictograme vectoriale clare funcționale și emoționale. Cu excepţia icoane standard Acest set conține pictograme sub formă de inimi și ochi, permițându-vă să personalizați proiecte proprii culoare emoțională.

04. 195 icoane PSD steag plat

Un set excelent de pictograme PSD pentru un site web care poate fi folosit atunci când dezvoltați un site internațional, un magazin online sau un blog de călătorie. Acest set include 195 de pictograme gratuite pentru colțuri rotunjite.

05. Set de pictograme Metro UI

Dacă sunteți fan Windows 8, atunci veți dori să verificați acest pachet de pictograme gratuit. Include 700 de pictograme bine concepute care pot fi folosite liber în orice tip de proiect.

06. Icoane UI moderne

Un alt set de pictograme gratuite pe care le puteți folosi atunci când creați interfata utilizator software pentru Windows sau pentru Android/iOS. Descărcând acest set, veți primi 1000 de pictograme plate, realizate manual, inclusiv pictograme chiar și pentru cortina aplicației din Windows Phone.

07. Pictograme perfecte de 350 de pixeli

Un set incredibil de 350 de pictograme perfect clare pentru aplicații sau site-uri web. Mai mult, acestea pot fi modificate în dimensiune fără pierderea calității.

08. 80 de mini icoane

80 de pictograme miniaturale perfect clare care pot fi descărcate atât în ​​format PSD, cât și ca font iconic. Aceste pictograme sociale PSD îngrijite și sofisticate sunt perfecte pentru orice tip de proiect.

09. Grafică vectorială pictogramă web simplă și practică

O mulțime de pictograme utile care pot fi folosite în proiecte personale și comerciale.

10. Pictograme plate gratuite

Un set de pictograme realizate într-un stil plat, inclusiv un calendar, e-mail, ceas, hărți și multe altele.

11. Pictograme mono

Un set care include 108 icoane monocrome unice realizate într-un stil minimalist. Toate sunt disponibile în format PNG la o dimensiune de 32 x 32.

12. Pictograme Metrize

O colecție gratuită de modele în stil Metro pe care le puteți folosi în propriile aplicații și proiecte web. Pictogramele Social Media PSD sunt gratuite atât pentru personal, cât și pentru utilizare comercială. Arhiva conține nu numai formatele PSD, SVG, ESP și AI, ci și fonturi web.

13. Pictograme din bara de file iOS 7

Un set elegant de pictograme inspirat de iOS 7 pe care le poți folosi în propriile aplicații. Puteți descărca pictograme în următoarele formate: PSD, AI și ESP.

14. Set de pictograme Chunky Pika

Pictograme în stil Pika create de agenția Dutch Icon din Danemarca. Acest set include 42 de pictograme perfect clare.

15.Iconic

Un alt set de pictograme simple, dar atractive, ideale pentru modele minimaliste. Iconic este un set open source care poate fi descărcat în PNG, SVG, SWC și în alte formate, permițându-vă să le adaptați la propriile dvs. modele.

16. 44 de nuanțe de icoane gratuite

Set de 44 de icoane. Conține pictograme PSD pentru forum, care vă vor permite să le editați și să le adaptați cu ușurință la propriile proiecte.

17. Set de pictograme de simbol

Tokenul include 128 de pictograme unice, disponibile în format ICO cu dimensiunile 16 pe 16 pixeli, 32 pe 32 pixeli și 256 pe 256 pixeli și în format PNG cu dimensiunile 128 pe 128 pixeli. Fiecare pictogramă este prezentată în versiuni întunecate și deschise și este completată de un fișier PSD.

18. Pictograme plate (PSD)

Pictograme colorate într-un stil plat care pot fi descărcate în format PSD și editate pentru a se potrivi propriilor nevoi.

19. Set de pictograme 32px gratuit

Un set în care vei găsi o pictogramă PSD pentru orice scop: Skype, Facebook, Twitter, RSS, ceașcă de cafea, „like” și multe altele.

20. 48 de icoane plate de designer

Daca esti fan al minimalismului, atunci cu siguranta iti va placea acest set. Este format din 48 de pictograme gratuite care reflectă sarcinile de birou, aspectele sociale, precum și călătoriile. Toate sunt în formate AI și PNG și pot fi scalate fără a pierde calitatea.

21. Set de pictograme Plex

Setul include peste 100 de pictograme, inclusiv calendare, antivirus, ceasuri, e-mail, aplicații Microsoft Office , social media, precum și multe altele.

22.Vector mini gratuit

Un set de peste 1000 de icoane PSD concepute de echipa Icojam. Toate sunt prezentate și în format PNG. Ele sunt ideale pentru a fi utilizate atunci când dezvoltați un site web nou, deoarece sunt libere pentru a fi utilizate atât pentru proiecte personale, cât și pentru cele comerciale.

23. Eldorado mini gratuit

O altă colecție de mini-icoane de la Icojam, care conține peste 1200 de pictograme într-o dimensiune de 40 pe 40 de pixeli.

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.

01. Smashing Magazine 22. PixelsMarket

26. Blugrafic

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.

27. Icon Shock

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

28. CSS Autor

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

29. Coada creativă

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

30. Descărcare gratuită

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

31. Icoanele Eului

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.

32. AlienValley

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

33. Povestea de vise

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

34.DuckFiles

35. 1001 Descărcări gratuite

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

36. GraphicsBay

37.Pixeden

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

38. SubstantivProiect

SubstantivProiect este căutare convenabilă, încă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.

39. Iconmonstr

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

40. Placă de fuziune

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 alt 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 unor grupuri sau straturi 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ă.

Trucuri pentru reducerea dimensiunilor fișierelor.

(Vezi optimizarea)

Pentru a obține cea mai mică dimensiune SVG, ar fi logic să eliminați tot ce nu este necesar din acesta. Cel mai faimos și program util(cel puțin așa cred) pentru procesarea SVG este SVGO. Îndepărtează tot codul inutil. Dar! Aveți grijă când utilizați acest program dacă intenționați să manipulați SVG pentru Ajutor CSS/ JS , deoarece poate curăța prea mult codul, ceea ce face modificările viitoare dificile. Un alt avantaj al SVGO este că poate fi inclus în procesul de construire automată a unui proiect, dar puteți folosi ș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 util să activați Vizualizare > Previzualizare 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 Grid

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 fișier î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.

Original: 1.413b După optimizare: 409b

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