Literal: scalabil Grafică vectorială. MVG? SVG! ÎN formate vectoriale nu imaginea în sine este stocată, ci instrucțiunile de construcție din puncte și curbe.
ÎN formate bitmap informațiile despre un anumit număr de puncte de imagine sunt împachetate dens într-o cărămidă binară. Este inutil să te uiți în el și îl poți schimba doar în editorii grafici.
�PNG IH�aV PLTE�������0� IDAcZ�d���� �W= S�3�o;���]P ���IEND�B`�~
Formatul SVG poate fi, de asemenea, creat și modificat în editori grafici precum Illustrator, Sketch sau Inkscape. Dar este și text, ceea ce înseamnă că poate fi deschis ca HTML sau CSS în orice editor de cod.
Vă spun mai multe: SVG este ca o pagină HTML independentă. Când încorporați un SVG, de fapt încorporați nu doar o imagine, ci o întreagă pagină. Cu propriul sistem de coordonate, vizualizare, stiluri, scripturi și caracteristici uimitoare.
Stiluri și scenarii, Carl! Iată o poză simplă pentru tine.
Dacă te uiți la SVG ca pagină separată- devine mai clar de ce metodă de inserare aveți nevoie. Există patru caracteristici principale și fiecare -.
Primul și cel mai simplu element chiar în codul HTML. Acesta este practic cel mai mult metoda eficientaîncărcați orice imagine - browserele știu dinainte prin codul HTML că există și încep să o încarce.
Dezavantajul este că scripturile nu vor funcționa într-un astfel de SVG și orice încercare de a interacționa cu elementele din interior este condamnată. Fișierul va fi ca în spatele geamului: poți privi, dar nu poți atinge. Deși totul funcționează bine în interior, inclusiv animațiile CSS.
Această metodă este cea mai potrivită pentru imaginile de conținut care nu necesită interacțiune: logo-uri, grafice, diagrame.
A doua cale - imagine de fundalîn CSS. Și nu contează dacă îl setați la un element, un pseudo-element sau inserați conținut - rezultatul va fi același ca și cu : în spatele geamului, dar în interior ceva funcționează.
.picture ( imagine de fundal: url(picture.svg); )
Această metodă este potrivită pentru grafica de proiectare care nu necesită interacțiune: fundaluri, pictograme și alte fleacuri.
A treia cale, prin
De fapt, în loc de
Trebuie să plătești pentru flexibilitate: datorită faptului că nu mai este doar grafică și poți scrie acolo, alte cerințe de securitate sunt impuse acestei metode. De exemplu, o imagine dintr-un alt domeniu nu poate fi inserată chiar așa.
Această metodă este potrivită atunci când trebuie să introduceți unele grafică interactivă: jucării, grafică și orice complex. Este suficient să ne amintim că o dată
A patra modalitate a funcționat atunci când browserele și-au rescris parserii HTML conform noului standard și conținutul fișierelor SVG putea fi inserat direct în pagină, ca orice alte etichete.
Pătrat
Cu un astfel de SVG, puteți face la fel ca și cu elementele HTML obișnuite: stiluri, scripturi - știți. Puteți, de exemplu, să schimbați culoarea de umplere la hover și să descrie totul în stiluri generale.
Dezavantajul este că astfel de imagini nu sunt stocate în cache separat de pagină - deși acest lucru poate fi ocolit prin simboluri și utilizări, dar acest lucru poveste lunga, vom vorbi despre asta separat.
SVG este mult mai mult decât un format grafic - am înțeles deja asta. Vrei să sapi mai adânc? Citiți articolele lui Sarah Swaidan, acesta este cel mai bun de până acum. Toate linkurile sunt în descrierea videoclipului.
Ca rezultat: există o mulțime de moduri și toate sunt bune într-un fel. Alege-l pe cel care se potrivește nevoilor tale, dar începe întotdeauna cu cel mai simplu: și fundal, și apoi complicați - dacă nu suficient.
Versiune video
Suportul pentru grafică vectorială scalabilă (SVG) funcționează excelent în toate browsere moderne, formatul imaginii apare în contexte surprinzătoare pe multe pagini web diferite. Dar, în ciuda faptului că este standardul timp 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 web. Iată câteva motive pentru care ar trebui să utilizați SVG:
Dimensiune mică a fișierului
SVG-urile tipice bine concepute sunt mult mai mici 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 și reduse fără a pierde calitatea, făcându-le ideale pentru site-urile web responsive moderne.
Interacționează cu DOM
SVG este uneori denumit „desen cu marcaj”: fiecare element dintr-o imagine SVG interacționează cu DOM, ceea ce înseamnă că CSS și JavaScript pot manipula părți ale unui document SVG. Spre deosebire de grafica bitmap, 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 hărți de bit. Și pentru că SVG interacționează cu DOM, elementele acestuia pot fi modificate cu CSS. Formatul SVG este excelent pentru afișarea:
-
ilustrații și desene
logos
Instrumente pentru lucrul cu SVG
În timp ce puteți crea un document SVG cu oricare editor de text, programe pentru ilustrare vectorială, de exemplu Adobe Illustrator sau Inkscape este de obicei cea mai buna alegere(deși trebuie remarcat faptul că alte aplicații, inclusiv programe 3D precum Blender și aplicații server, poate exporta SVG).
Orice ați folosi, ar trebui să știți că generarea de SVG-uri din aplicații lasă uneori foarte mult de dorit: documentul rezultat este adesea recodificat și uneori prost formatat. Un fișier .svg poate fi făcut mai mic, mai compact prin procesarea lui cu un optimizator precum SVGOMG. Uneori, trecerea unui 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 bitmaps, fișierul SVG poate fi referit prin etichetă sau prin CSS ca imagine de fundal. Este adesea Cel mai bun mod, cu excepția cazului în care SVG-urile necesită atenție individuală pentru CSS și JavaScript.
Inserat ca
SVG receptiv
Așa cum am menționat componente individuale SVG-urile pot fi etichetate cu un ID sau o clasă, ceea ce înseamnă că pot fi manipulate în interogări media. Aceasta înseamnă că poți folosi diverse funcții Ilustrații SVG marimi diferite ecrane, creând oportunități pentru logo-uri sau ilustrații receptive care prezintă mai multe sau mai puține detalii pe măsură ce fereastra se micșorează și se extinde... ceea ce este perfect potrivit pentru design receptiv, care este de a arăta vizitatorilor site-ului conținutul relevant la nivelul corespunzător de detaliu, pe dispozitivul de pe care îl vizionează în acest moment site-ul web.
Iată câteva exemple de sigle responsive:
SVG-uri interactive
SVG-urile sunt perfecte pentru afișarea formelor reale, ceea ce înseamnă că sunt grozave pentru hărți interactive:
modele
Există două aspecte deosebit de subestimate ale SVG:
SVG este un format de imagine pentru grafică vectorială. În sensul literal, aceasta nu este altceva decât grafică vectorială scalabilă. 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
- Scalați la orice dimensiune fără pierderi de calitate
- Arata grozav pe ecranele retina
- Control complet al designului în interactivitate și în filtre
Să desenăm ceva pentru lucrările viitoare în Adobe Illustrator. Luați pasărea Kiwi:
Vă rugăm să rețineți că pânza este tăiată exact la marginea imaginii. Pânza în SVG este construită absolut identic, ca 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. Consider că SVG 1.1 funcționează bine.
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 moduri pot fi de ajutor.
Folosind SVG ca etichetă img
În Illustrator, pânza noastră are 612px ✕ 502px.
Cât costă imagine mare va fi pe pagina pe care o decizi. Puteți redimensiona o imagine prin definire proprietăți de lățimeși înălțimea, adică exact la fel ca în PNG sau JPG. Iată un exemplu:
Verificați acest stilou!
Cum se creează SVG cross browser
Când utilizați SVG în acest mod, trebuie să fiți conștient de compatibilitatea diferită a browserului. Practic, SVG funcționează peste tot, cu excepția IE8 și mai jos, și Android 2.3 și mai jos.
Dacă trebuie să utilizați SVG, dar aveți nevoie și de suport pentru browserele enumerate mai sus, există mai multe opțiuni pentru rezolvarea problemei. Am folosit mai multe tehnici în diverse proiecte pentru a rezolva această problemă.
O modalitate de a verifica suportul SVG este cu Modernizr, care schimbă calea src:
Dacă (!Modernizr.svg) ( $(".logo img").attr("src", "images/logo.png"); )
David Bushell a venit cu un lucru foarte ușor cale alternativă, dar conține javascript în markup:
Serviciul SVGeezy poate ajuta, de asemenea. Pe parcursul acestui articol, vom analiza multe diferite metode de rezervă pentru suport SVG.
Folosind SVG ca imagine de fundal
Prin analogie cu etichetă img, SVG poate fi folosit ca imagine de fundal:
Kiwi Corp .logo (afișare: bloc; text-indent: -9999px; lățime: 100px; înălțime: 82px; fundal: url(kiwi.svg); background-size: 100px 82px; )Observați că setăm dimensiunea fundalului la exact aceeași dimensiune ca și elementul. Acest lucru trebuie făcut, pentru că altfel am vedea un mic partea de sus imaginea originală. Aceste cifre iau în considerare proporțiile originale ale imaginii. De asemenea, puteți utiliza background-size ca valori Cuvinte cheie, cum ar fi conține , astfel încât imaginea să ocupe complet întregul element.
Folosirea SVG ca imagine de fundal își lasă amprenta asupra suportului pentru browser, dar, în general, totul este la fel ca atunci când utilizați eticheta img.
Modernizr ne poate ajuta aici într-un mod și mai eficient decât cu img. Ideea este că dacă înlocuim imagine de fundal cu un format acceptat, apoi doar unul Solicitare HTTPîn loc de două, ca în 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ă aveți probleme la utilizarea celor două moduri de mai sus de a folosi SVG, mai jos sunt mai multe modalități de a plasa grafică vectorială.
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 cu un editor de text și copiați acest cod). Puteți copia acest cod în HTML și SVG-ul va fi redat exact la fel ca folosind img.
Acest lucru poate fi util deoarece imaginea imaginii vine cu codul în document și nu se face nicio solicitare HTTP. Cu alte cuvinte, beneficiile sunt aceleași cu cele ale utilizării Date URI. Cu toate acestea, există și dezavantaje. Datorită inserției cod direct SVG, documentul începe să arate ca o bucată mare de rahat umflat.
Există și o opțiune pentru inserții svg pe partea de server:
Optimizare SVG
Adobe Illustrator nu optimizează implicit imaginea SVG rezultată. Oferă un DOCTYPE și adnotări, toate acestea în general Gunoi. SVG este destul de ușor în mod implicit, dar de ce să nu îl faceți și mai mic? Peter Collingridge a contribuit instrument online pentru a optimiza SVG Optimiser. Cu acest serviciu puteți descărca dosar vechiși obțineți unul nou optimizat.
Dacă doriți mai mult hardcore, nicio problemă, iată un instrument pentru a optimiza SVG cu instrumentul Javascript Node JS de pe server https://github.com/svg/svgo
Styling SVG
Vedeți cum este similar SVG cu HTML? Asta pentru că sunt amândoi 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 cu 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 concepute special pentru a funcționa grafica vectoriala. De exemplu, nu se folosește culoarea obișnuită de fundal, ci umplerea. Deși funcționează și unele stiluri obișnuite, cum ar fi :hover.
Kiwi ( completare: #94d31b; ) .kiwi:hover (completare: #ace63c; )
SVG are câteva filtre distractive. De exemplu estompare:
...Apoi puteți aplica opțional acest lucru în css:
Ground:hover (filtru: url(#pictureFilter); )
Iată ce sa întâmplat:
Verificați acest stilou!
Suport pentru browsere SVG „inline”.
Lista browserelor care acceptă acest mod Redările 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 acest tip de SVG:
...Apoi folosim din nou Modernizr:
Logo-fallback (afișare: niciunul; /* Asigurați-vă că are aceeași dimensiune pe care o ocupă SVG-ul */ ) .no-svg .logo-fallback ( imagine de fundal: url(logo.png); )
Folosind SVG ca obiect
Dacă folosirea SVG-ului „inline” nu este pe placul dumneavoastră (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 cu css:
Folosim Modernizr pentru suport între browsere:
.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 oricare dintre cele de mai sus. Dar pentru a acționa asupra unui astfel de obiect cu CSS, trebuie să scrieți stiluri direct în fișierul SVG.
...Utilizarea datelor URI-ul este vindecat într-un mod pentru a reduce greutatea SVG-ului. Mobilefish.com oferă un instrument de optimizare online în acest scop. Este suficient să lipiți conținutul fișierului dvs. SVG și să 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 pe un obiect!
Pregătirea unui SVG pentru utilizare pe web este un proces foarte simplu, nimic mai mult export jpeg sau png. Utilizați orice editor de imagini cu care sunteți obișnuit (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. De obicei lucrez în Illustrator, așa că voi explica câteva dintre modalitățile de pregătire a fișierelor din acest program, dar în general sunt aplicabile oricărui alt program. Este posibil să doriți să convertiți textul în contururi, deoarece fontul nu se va afișa corect decât dacă intenționați să le modelați cu fontul web folosit pe pagină (ceea ce este posibil!). De asemenea, nu este o idee bună să transformați toate obiectele în forme unice, mai ales dacă aveți un accident vascular cerebral pe care va trebui să îl controlați pe pagină, mai ales că conversia obiectelor adesea nu reduce dimensiunea fișierului. Orice nume date grupurilor sau straturilor vor fi adăugate la SVG ca ID de element. Acest lucru este destul de util 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 astfel: 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 de făcut aici, dar nu merită cu adevărat, deoarece vom aplica diverse îmbunătățiri mai târziu, așa că nu vom pierde timpul cu acele modificări deocamdată.
Tehnici de reducere a 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 el. Cel mai faimos și program util(pe macar Cred că da) pentru procesarea SVG este SVGO. Ea înlătură totul codul dorit. Dar! Aveți grijă să utilizați acest program dacă intenționați să manipulați SVG când Ajutor CSS/ JS , deoarece poate curăța prea mult codul, făcând dificile modificările ulterioare. Comoditatea SVGO este, de asemenea, că poate fi inclus în proces montaj automat proiect, dar puteți folosi și GUI daca vrei.
Intrând în mai multe detalii cu îndepărtarea corectă totul este inutil, 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 aceste căi. Puteți combina și simplifica tot ceea ce poate fi simplificat și puteți elimina tot puncte inutile. Illustrator are un plugin VectorScribe cu Instrumentul Smart Remove Brush , care vă va ajuta să eliminați punctele și să lăsați în continuare forma generala La fel.
Pre-optimizare
Smart Remove Brush Tool a eliminat punctele
În continuare, vom mări imaginea. În Illustrator, este convenabil să activați vizualizarea grilă de pixeli Vizualizare > Previzualizare pixeli și să verificați cum sunt aranjate căile. Va dura ceva timp pentru a plasa traseele pe grilă, dar efortul va da roade și va avea ca rezultat o redare mai clară (este mai bine să acordați atenție acestui lucru în avans).
Puncte în afara grilei
Alinierea grilei
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 subțire albă. Pentru a preveni acest lucru, puteți suprapune ușor obiecte unul peste altul în locurile de suprapunere. Important: În SVG, z-index are o anumită ordine care depinde de obiectul care se află dedesubt, așa că merită să puneți obiectul de sus în partea inferioară 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-urilor 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 în ordine contururile; Voi șterge numărul maxim posibil de puncte; mutați puncte cu pixeli întregi; mutați toate zonele suprapuse și trimiteți 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)
Literal: grafică vectorială scalabilă. MVG? SVG! Formatele vectoriale nu stochează imaginea în sine, ci instrucțiuni pentru construirea acesteia din puncte și curbe.
În formatele raster, informațiile despre un anumit număr de pixeli de imagine sunt împachetate dens într-o cărămidă binară. Este inutil să te uiți în el și îl poți schimba doar în editorii grafici.
�PNG IH�aV PLTE�������0� IDAcZ�d���� �W= S�3�o;���]P ���IEND�B`�~
Formatul SVG poate fi, de asemenea, creat și modificat în editori grafici precum Illustrator, Sketch sau Inkscape. Dar este și text, ceea ce înseamnă că poate fi deschis ca HTML sau CSS în orice editor de cod.
Vă spun mai multe: SVG este ca o pagină HTML independentă. Când încorporați un SVG, de fapt încorporați nu doar o imagine, ci o întreagă pagină. Cu propriul sistem de coordonate, vizualizare, stiluri, scripturi și caracteristici uimitoare.
Stiluri și scenarii, Carl! Iată o poză simplă pentru tine.
Dacă priviți SVG ca pe o pagină separată, devine mai clar ce fel de inserare aveți nevoie. Există patru caracteristici principale și fiecare -.
Primul și cel mai simplu element chiar în codul HTML. Acesta este, în principiu, cel mai eficient mod de a încărca orice imagine - browserele știu dinainte din codul HTML că aceasta există și încep să o încarce.
Dezavantajul este că scripturile nu vor funcționa într-un astfel de SVG și orice încercare de a interacționa cu elementele din interior este condamnată. Fișierul va fi ca în spatele geamului: poți privi, dar nu poți atinge. Deși totul funcționează bine în interior, inclusiv animațiile CSS.
Această metodă este cea mai potrivită pentru imaginile de conținut care nu necesită interacțiune: logo-uri, grafice, diagrame.
A doua modalitate este o imagine de fundal în CSS. Și nu contează dacă îl setați la un element, un pseudo-element sau inserați conținut - rezultatul va fi același ca și cu : în spatele geamului, dar în interior ceva funcționează.
.picture ( imagine de fundal: url(picture.svg); )
Această metodă este potrivită pentru grafica de proiectare care nu necesită interacțiune: fundaluri, pictograme și alte fleacuri.
A treia cale, prin
De fapt, în loc de
Trebuie să plătești pentru flexibilitate: datorită faptului că nu mai este doar grafică și poți scrie acolo, alte cerințe de securitate sunt impuse acestei metode. De exemplu, o imagine dintr-un alt domeniu nu poate fi inserată chiar așa.
Această metodă este potrivită atunci când trebuie să inserați un fel de grafică interactivă: jucării, grafică și orice complex. Este suficient să ne amintim că o dată
A patra modalitate a funcționat atunci când browserele și-au rescris parserii HTML conform noului standard și conținutul fișierelor SVG putea fi inserat direct în pagină, ca orice alte etichete.
Pătrat
Cu un astfel de SVG, puteți face la fel ca și cu elementele HTML obișnuite: stiluri, scripturi - știți. Puteți, de exemplu, să schimbați culoarea de umplere la hover și să descrie totul în stiluri generale.
Dezavantajul este că astfel de imagini nu sunt stocate în cache separat de pagină - deși acest lucru poate fi ocolit prin simboluri și utilizări, dar aceasta este o poveste lungă, vom vorbi despre asta separat.
SVG este mult mai mult decât un format grafic - am înțeles deja asta. Vrei să sapi mai adânc? Citiți articolele lui Sarah Swaidan, acesta este cel mai bun de până acum. Toate linkurile sunt în descrierea videoclipului.
Ca rezultat: există o mulțime de moduri și toate sunt bune într-un fel. Alege-l pe cel care se potrivește nevoilor tale, dar începe întotdeauna cu cel mai simplu: și fundal, și apoi complicați - dacă nu suficient.
Versiune video