Folosind SVG. Stilizarea SVG cu CSS. Caracteristici și limitări
SVG este un format de grafică vectorială. Numele său înseamnă literal „scalabil Grafică vectorială„(Grafică vectorială scalabilă). Mai simplu spus, este ceea ce lucrezi în Adobe Illustrator. SVG poate fi folosit cu ușurință pe web, dar mai întâi sunt multe de înțeles.
De ce ai nevoie de SVG?
- Fișier de dimensiuni mici, compresie excelentă;
- Scalare la orice dimensiune, fără pierderi de calitate (cu excepția dimensiunilor foarte mici);
- Arată bine pe retină;
- Gamă largă de posibilități oferite de filtre și interactivitate.
Să creăm o imagine SVG cu care vom lucra în continuare
Creați un desen personalizat în Adobe Illustrator. Iată, de exemplu, o pasăre kiwi pe un oval.
Vă rugăm să rețineți că imaginea este tăiată brusc în jurul marginilor imaginii. Pânza în SVG joacă un rol nu mai puțin decât în PNG sau JPG.
Adobe Illustrator poate salva ca SVG.
La salvare, va apărea o altă casetă de dialog cu setări. Sincer să fiu, nu știu prea multe despre ei. Există un întreg tutorial despre profilurile SVG. Sunt destul de mulțumit de SVG 1.1.
Este demn de remarcat aici că aveți opțiunea de a face clic pe OK și de a salva fișierul, sau de a face clic pe butonul „Cod SVG...”, care va deschide o fereastră TextEdit (cel puțin pe un Mac) cu codul SVG.
Ambele opțiuni pot fi utile.
În Illustrator Spațiul de lucru a fost 612px ✕ 502px.
Acestea sunt dimensiunile pe care le va avea imaginea de pe pagină dacă nu sunt specificate în mod specific. Dimensiunile sale pot fi modificate prin setarea atributelor de lățime sau înălțime la img , la fel ca PNG sau JPG. Iată un exemplu:
Suport pentru browser
O opțiune: verificați suportul prin Modernizr și înlocuiți src pentru imagine:
dacă (!Modernizr.svg) ( $(".logo img" ).attr("src" , "images/logo.png" ); )David Bushell are o alternativă foarte simplă dacă nu vă deranjează JavaScript în marcaj:
"this.onerror=null; this.src="image.png"">
Pentru această metodă de inserare SVG, puteți utiliza următoarele tehnici de degradare:
<svg > ... svg > <div class="fallback" >div >Și din nou folosim Modernizr:
.logo-fallback ( display: none; /* Asigurați-vă că dimensiunea se potrivește cu dimensiunea SVG */) .no-svg .logo-fallback ( imagine de fundal : url (logo.png); )Adăugarea SVG la pagină folosind o etichetă
Dacă dintr-un motiv oarecare nu vă place opțiunea de a introduce SVG direct în document (are încă câteva dezavantaje, de exemplu, stocarea în cache este aproape imposibilă), puteți conecta fișierul SVG folosind
<tip obiect ="image/svg+xml" date ="kiwi.svg" clasa ="logo" > Logo Kiwi obiect >În cazul în care acest lucru nu este acceptat, să implementăm degradarea folosind clasa pe care Modernizr o adaugă:
.no-svg .logo ( lățime : 200 px ; înălțime : 164 px ; imagine de fundal : url ( kiwi.png ); )Această abordare nu cauzează probleme de stocare în cache și este acceptată de browsere mai bine, decat altii. Dar dacă utilizați un fișier extern cu stiluri sau
Deoarece SVG nu face diferență între regiunile cap și corp, foile de stil și conținutul în sine împărtășesc elementul SVG, care este comparabil cu elementul HTML.
Folosind pseudo-clase
SVG permite utilizarea pseudoclaselor precum:hover , chiar și împreună cu proprietatea de tranziție CSS3.
După ce am implementat acest exemplu, vom vedea că atunci când trecem cu mouse-ul peste un element cu clasa de exemplu setată pentru el, culoarea de umplere se va schimba de la roșu la albastru. Pentru ca acest lucru să funcționeze corect, nu încorporați SVG-ul folosind eticheta img. Utilizați mai bine încorporarea sau iframe:
Când utilizați eticheta img, SVG-ul în sine se va afișa corect. Dar efect de hover iar tranzițiile vor fi ignorate. Pe lângă proprietatea de tranziție, putem folosi și transform . În acest caz, elementele vor fi scalate sau rotite.
Când utilizați CSS3, asigurați-vă că adăugați prefixe de furnizor pentru a asigura cât mai mult suport posibil. Mai mult browsere moderne. În timp ce Chrome și Firefox se ocupă de redarea impecabil, Internet Explorer refuză să arate creația dvs., deși este perfect capabil să arate acele proprietăți CSS3 dacă le aplicați în HTML.
Interogări media și SVG
Dacă doriți să vă personalizați SVG-ul pentru anumite permisiuni, utilizați interogări media, chiar în interiorul acestuia:
În acest exemplu, elementele care au clasa de exemplu specificată nu vor fi afișate de îndată ce lățimea vizibilă a ecranului devine mai mică de 800 de pixeli. Atenție, nu este vorba despre lățimea documentului, ci despre lățimea elementului purtător SVG.
Pregătirea SVG pentru utilizare pe web este un proces foarte simplu, nu mai dificil Export 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 coafare, dar va crește dimensiune totală fişier.
Î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! Fiți atenți când utilizați acest program dacă intenționați să manipulați SVG cu CSS/JS, deoarece poate curăța prea mult codul, îngreunând modificările viitoare. Comoditatea SVGO este, de asemenea, că poate fi inclus în proces montaj automat proiect, dar puteți folosi și GUI dacă doriți.
Înțelegerea mai în detaliu cu îndepărtarea corectă totul nu este necesar, putem face altceva în editorul 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 șterge totul puncte 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 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
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)
