De ce nu utilizați SVG?

SVG sau Scalable Vector Graphics, este un vector de redare vectorială grafică pe bază de marcaj XML pentru browser. SVG este acceptat în fiecare browser, cu excepția IE < v9 and Android < v3. The same support is available for canvas (except canvas goes all the way back on Android), so the question often surfaces: which one should you use?

Astăzi, vom analiza SVG și vom explica de ce întrebarea "care ar trebui să utilizez?" este de obicei răspunsul "Ce încerc să fac?". Pentru a obține o listă completă a elementelor care alcătuiesc SVG, verificați documentele Mozilla pentru acest subiect. Puteți vedea și API-ul SVG DOM acolo.

Prezentare generală

Vom începe prin a sublinia câteva avantaje unice ale SVG. Apoi, în loc să examinăm toate cele 80 de tipuri de noduri SVG, vom explica modul în care Illustrator poate obține rapid un document SVG într-o pagină Web. De asemenea, vom arunca o privire la D3.js, o bibliotecă puternică de manipulare SVG JavaScript.

"SVG nu este menit să fie folosit pentru manipularea pixelilor".

Avantaje majore ale SVG

SVG are destul de multe avantaje față de imaginile sau randările bazate pe canvas pentru anumite aplicații. SVG nu este destinat utilizării pentru manipularea pixelilor; cu toate acestea, se ocupă grafică vectorială și manipulare vectoriale programare foarte bine.

Rezoluția Independenței

În cazul în care nu ați auzit, independența rezoluției și agnosticismul browser-ului este un subiect fierbinte în dezvoltarea front-end (gândiți-vă "design receptiv") în aceste zile. Majoritatea soluțiilor existente pentru rezolvarea problemelor bazate pe rezoluție (de exemplu, pentru ecranele retinei) implică fie o cantitate mare de date inutile descărcate (înlocuirea imaginii hi-res), fie un compromis pentru un browser sau altul (ridicând toate rezoluțiile, chiar când ecranul nu va afișa diferența). Acest lucru ne face să ne bazăm pe viteza de blocare a vitezei de descărcare a datelor pentru a aduce imagini cu rezoluție mai mare dispozitivelor care sunt adesea pe rețele de date fără fir. Nu este ideal.

"SVG oferă o modalitate de a face elemente grafice de rezoluție completă, indiferent de dimensiunea ecranului, de nivelul de zoom sau de rezoluția aparatului utilizatorului."

SVG oferă o modalitate de a face elemente grafice de rezoluție completă, indiferent de dimensiunea ecranului, de nivelul de zoom sau de rezoluția aparatului utilizatorului. Acesta este un lucru care până la SVG, am văzut doar cu un stil inteligent de styling prin CSS și rendering text. Folosind divs și: după ce elemente pentru a crea forme simple și alte efecte nu este necesar cu SVG. În schimb, puteți crea forme de vector de toate felurile.

API DOM bazat pe noduri super-accesibile

Deci, scrieți HTML? JavaScript? CSS? Bun. Apoi, știi deja o mulțime de ceea ce trebuie să știi pentru a obține scris SVG. SVG utilizează de fapt un format compatibil XML pentru a defini formele sale de redare. Dincolo de asta, puteți să modelați propriile forme în CSS și să le faceți interactive cu JavaScript. Există mai multe biblioteci JS care vă ajută în această lume, cum ar fi D3.js și Raphael. Iată un exemplu de grup de elemente SVG (frunza Envato). De asemenea, puteți vedea acest exemplu pe JSFiddle.

API-ul bazat pe noduri DOM din SVG este deja mai accesibil decât API-ul canvas numai pe partea clientului. Cu această construcție puteți:

• Creați imagini SVG pe documente pe server
• Inspectați elementele SVG ca orice alt element HTML
• Programatically manipulate forme, stiluri și poziții cu tehnologia pe care deja o cunoașteți (JavaScript și CSS)
• Atașați manipulatorii de evenimente la nodurile SVG

DOM API oferă un set suplimentar de avantaje clare pentru utilizarea SVG.

Nu există solicitări HTTP inutile

Când utilizați imagini într - un document html cu eticheta, definiți un fișier pe care îl va utiliza browserul utilizatorului cerere. Această solicitare va ocupa o lățime de bandă și va necesita un timp mai prețios pentru descărcare. Dacă imaginea dvs. este în schimb un set de noduri dom, reducerea solicitării extra HTTP, făcând site-ul dvs. mai rapid și mai ușor de utilizat.

Scripting interactiv ușor

În ciuda războaielor de browser, API-ul DOM, în toate browserele, oferă o mare flexibilitate în ceea ce privește interactivitatea scripting-ului, care se extinde și la elementele SVG. Styling SVG se întâmplă prin CSS. Disponibilitatea API-urilor de evenimente ale browser-ului pentru elementele SVG face ca scriptul comportamental interactiv să fie un cinch. Pur și simplu atașați un handler la un nod specific al elementului SVG și ați fost setat.

Acest lucru nu este valabil pentru elementele desenate pe pânză. Deoarece panza este pur și simplu un motor de randare a pixelilor, elementele desenate nu sunt păstrate în memorie ca obiecte. Scenariul ar avea rolul de a păstra aceste elemente colectate și de a monitoriza toate informațiile relevante privind poziția și mărimea pentru a căuta și trage evenimentele într-o buclă de evenimente. Dincolo de aceasta, z-indexarea ar trebui să fie tratată și de scenariu.

Să aruncăm o privire la un exemplu. Spuneți că doriți să detectați mutarea peste un cerc în panza. Notă: Vom spune că panza este lățimea completă a ferestrei browserului și vom folosi jQuery doar pentru a păstra exemplul concis.

var circleCenter = [200, 300], raza = 50; (mx> circleCenter [0] - raza &&x < circleCenter[0] + radius && my > circleCenter [1] - raza && my < circleCenter[1] + radius) // now we are hovering  );

Deși acest lucru nu este neapărat un model dificil sau mai puțin frecvente de cod, dacă sunteți obișnuiți cu API-ul browserului, se pare că este un proces frustrant, doar pentru a verifica dacă treceți. Acesta este un model foarte comun în alte motoare de programare de interfață de nivel inferior, cum ar fi Unity3D sau Processing. Dar, în lumea web, avem la dispoziție instrumente care se ocupă deja de o mulțime de obiective interactive comune pe care le putem avea. S-ar putea scrie un set de funcții de comoditate pentru a face sarcini comune, dar nu ar trebui să ajungeți mai degrabă la punct? În schimb, putem vedea simplitatea aceleiași sarcini folosind SVG.

$ ("calea svg # cerc") pe ("hover", funcție (eveniment) // Asta e tot.);

Acest lucru este mult mai eficient pentru dezvoltatorii care scria interactivitate simplă.

Aplicații practice

Există o mulțime de biblioteci JavaScript disponibile pentru panza (cum ar fi KineticJS, care vă va permite să faceți niște lucruri minunate, dar dacă sunteți ca mine, nu utilizați motoare full-on fizice în aplicațiile dvs. web. cel mai adesea am nevoie de icoane scalabile, grafice interactive și modalități detaliate, superbe estetice de a prezenta informații utilizatorilor mei.Cele mai multe din fizica de care am nevoie sunt simple easing easing.Aceste elemente grafice sunt ușor de creat cu SVG și o multitudine de fizici simple ecuațiile se vor ocupa, probabil, de restul necesităților mele. Să examinăm câteva aplicații practice pentru SVG.

• Grafic Deoarece puterea cea mai mare a lui SVG este reprezentată de forme vectoriale de bază, ea funcționează în mod natural foarte bine pentru grafice și infografice. Nu numai că este grozav pentru crearea de grafice statice din numere date, dar este de asemenea potrivit pentru graficele "live", alimentate de cererile AJAX, de intrarea utilizatorului sau de date generate aleatoriu.
• Harta rutieră Hărțile rutiere constau din linii tari și forme exacte. Aceste forme pot fi reprezentate bine cu grafica vectorială și se pot mări în hartă pentru detalii suplimentare.
• Elemente complexe ale UI Să presupunem că doriți un element UI care arăta ca o piramidă de cercuri stivuite. Cum ați face acest lucru în HTML și CSS? Ei bine, ați crea mai întâi o mulțime de divs pentru fiecare gaură, oferindu-le fiecare o anumită rază de graniță și stiluri de frontieră. Apoi le-ați poziționa într-un div conținând. Acum, dacă ați fi vrut un singur unghi peste tot? Probabil va trebui să utilizați mascarea sau altă tehnică. Preferați să nu utilizați imagini, deoarece acestea nu sunt scalabile și nu pot fi re-redate sau modificate programatic. În schimb, de ce nu trageți elementul în Illustrator și salvați-l ca fișier SVG? Acest lucru vă va permite să aveți un singur element scalabil fără să vă faceți griji în legătură cu gestionarea mai multor divizii.
• Logos Cele mai multe logo-uri sunt bazate pe vectori. S-ar putea să definiți un document SVG ca logo-ul dvs. și să-l lăsați oriunde, scalarea în zbor spre orice dimensiune trebuie să fie fără a compromite calitatea sau a prelua prea multă lățime de bandă.
• Jocuri Simple Nu este un secret că panza este potrivită pentru redarea jocurilor. O parte a motivului pentru aceasta este că jocurile nu sunt adesea dependente de grafica vectorială; mai degrabă, ei folosesc arta și animația bazate pe pixeli. Cu toate acestea, SVG este o alternativă excelentă pentru jocuri care necesită animație mai puțin caracter și afișare mai multe informații (gândiți Sudoku).

De ce probabil că nu o folosiți

Acum, că am analizat unele dintre avantajele SVG, să examinăm de ce mulți dezvoltatori încă mai aleg să nu utilizeze SVG. Există două motive principale pentru care SVG nu este folosită de o mulțime de dezvoltatori.

1. Nu au auzit niciodată de ea sau nu au crezut niciodată că au nevoie de ea, așa că l-au ignorat (aceasta nu mai este o scuză!)
2. Un document SVG XML de orice complexitate pare relativ arhaic și complicat și, aparent, nu este la fel de ușor ca doar să folosești o imagine.

Deci, desigur, nimeni nu vrea să stea și să editeze punctele din SVG XML. Din fericire, nimeni nu trebuie! Aceasta este partea pe care oamenii de multe ori nu o realizează; acolo sunt instrumente pentru a edita SVG, deci nu trebuie sa o faci vreodata manual.

Instrumente SVG

Illustrator, Inkscape

Dacă dețineți un editor de vectori, cel mai probabil vă poate salva fișierul ca un svg. Mergeți și încercați. Deschideți Illustrator, desenați un cerc sau două, apoi salvați fișierul ca SVG. Apoi, deschideți fișierul respectiv în Sublime Text sau într-un alt editor de text. Veți vedea imediat că, în afară de unele meta date suplimentare, SVG XML este gata să apară direct în fișierul dvs. HTML. Veți vedea cel mai probabil (grup), (calea) și bineînțeles (elementele părintei svg).

D3.js

În timp ce sunteți total capabil să renunțe la SVG XML direct într-un fișier HTML, ce dacă doriți ca SVG să fie creat dinamic? D3.js este "o bibliotecă JavaScript pentru manipularea documentelor bazate pe date". Cu alte cuvinte, este minunat pentru generarea de elemente SVG, cum ar fi graficele de bare și parcelele bazate pe un set de date. Am ales să afișăm D3 din cauza vocabularului corespunzător implementării SVG actuale în browser; să fie conștienți de faptul că există alte mari biblioteci SVG aflate în sălbăticie (în special, Raphael.js).

Deși D3.js face mai mult decât manipularea SVG, de dragul de scurtă durată, totul îl vom folosi astăzi. (Asigurați-vă că ați aruncat o privire la exemplele de pe site-ul oficial D3.js și verificați acest atelier pe care Mike la postat pe site-ul său personal.)

Exemplul 1: Cercul pulsatoriu

În acest prim exemplu, creăm pur și simplu un cerc pulsatoriu folosind Math.sin și un iterator cu setInterval. Pulsing Cerc

Exemplul 2: Actualizarea graficului de linie

În acest exemplu, actualizăm un grafic de grafic planificat, cu unele valori aleatorii. Linia grafică

Când NU ar trebui să utilizați SVG?

SVG va face față multor nevoi pentru redarea imaginilor în browser. În timp ce există o mulțime de motive pentru a utiliza SVG, ca și în cazul a ceva grozav, există lucruri pe care nu le face bine.

• Dacă randamentul dvs. necesită mii de noduri, este mai performant să faceți redarea în panza (deoarece browserul nu trebuie să creeze obiecte pentru fiecare piesă redată și, de asemenea, nu trebuie să facă matematica vectorală necesară pentru a face obiectul. În schimb, în ​​esență pictează pixeli mapați.)
• Dacă aplicația dvs. necesită suport pentru IE8, amintiți-vă că trebuie să furnizați un alt vector de rezervă (cum ar fi VML mai complicat) sau să nu folosiți vectorul deloc și, în schimb, să vă bazați pe imagini cu dimensiuni corespunzătoare.

Link-uri utile

Iată câteva linkuri utile pentru a vă consolida în SVG!

• Raphaël.js
• Processing.js, bazat pe prelucrarea puternică, un instrument de imagistică Java
• jQuery SVG
• Articol articol: Cum să alegeți între canvas și SVG
• Canvas și performanța SVG
• Nettuts + articol despre Raphael

Ce alte utilizări ați găsit pentru SVG? Spuneți-ne în secțiunea de comentarii și vă mulțumim foarte mult pentru citire.