Grafica grafică este aplicabilă pe scară largă în produsele tipărite. În ceea ce privește site-ul web, aici putem folosi și grafica vectorială prin intermediul SVG sau Scalable Vector Graphics (grafice vectoriale scalabile). În specificația oficială W3.org, SVG este descrisă după cum urmează:
O limbă pentru descrierea graficelor bidimensionale prin XML. SVG ne permite să folosim trei tipuri de obiecte grafice: forme grafice vectoriale (de exemplu, trasee formate din linii drepte și curbe), imagini și text.
Avantaje ale graficii vectoriale scalabile
În ceea ce privește utilizarea graficii pe paginile de web, grafica vectorială scalabilă ne oferă mai multe avantaje față de grafica raster, care includ:
Independența de permisiune
Grafica raster (sau Bitmap) depinde de rezoluție, deoarece este creată folosind pixeli. Dacă un astfel de element grafic este mărit, atunci pătratele mari devin imediat vizibile. Cu ajutorul graficii vectoriale, acest lucru nu se întâmplă, deoarece nu depinde de rezoluție, ci este construit pe baza unor calcule matematice, ceea ce ne permite să-l mărim la orice dimensiune și să nu-l pierdem în calitate.
Grafica vectorială scalabilă poate fi încorporată direct într-un document HTML utilizând eticheta svg, astfel încât browserul nu trebuie să aibă o interogare suplimentară pentru grafică. Acest lucru are, de asemenea, un efect pozitiv asupra performanței site-ului web.
Styling și scripting
Integrarea directă cu ajutorul etichetei svg ne va permite de asemenea să stilizăm grafica cu CSS. Putem schimba astfel de parametri ai obiectului ca și culoare de fundal, opacitate, margini și așa mai departe, la fel ca în HTML. De asemenea, putem gestiona grafica cu j # 097; vascript.
Abilitatea de a anima și edita
Dimensiunea fișierului mai mică
SVG are o dimensiune de fișier mai mică decât grafica raster.
Desenează forme simple folosind SVG
În urma caietul de sarcini, putem desena forme simple, cum ar fi poligoane, cercuri, elipse, linii sau prin SVG și, în scopul de a genera un browser grafică vectorială scalabilă, aceste elemente grafice trebuie să fie plasate în «svg» tag-uri. Să examinăm exemplele de mai jos:
Pentru a trasa o linie folosind SVG, putem folosi elementul "line". Acest element este folosit pentru a desena o linie dreaptă, astfel încât acesta va consta doar din două puncte: punctele de început și de sfârșit.
După cum puteți vedea mai sus, coordonatele punctului de pornire al liniei sunt indicate în primele două atribute x1 și x2, iar coordonatele punctului de tracțiune sunt indicate de atributele y1 și y2.
Există, de asemenea, două alte atribute: cursa și lățimea cursei, care sunt responsabile pentru culoarea și lățimea marginii. Pe de altă parte, putem defini aceste atribute în stilul liniei, după cum urmează:
iar acest lucru ne va da același rezultat.
Aici totul este foarte în concordanță cu "linia", dar cu elementul "polilin" putem trasa mai multe linii, în loc de una. Iată un exemplu:
Elementul "polilin" are atributele punctelor care conțin toate coordonatele liniilor.
Desenați un dreptunghi, putem la fel de ușor, folosind elementul "rect". Trebuie doar să specificăm lățimea și înălțimea:
De asemenea, putem trage un cerc folosind elementul cerc. În acest exemplu, tragem un cerc cu o rază de 100, care este determinat de atributul r:
Primele două atribute, cx și cy, definesc coordonatele centrale ale cercului. În exemplul de mai sus, setăm 102 pentru ambele coordonate x și y. Dacă aceste atribute nu sunt setate, atunci implicit vor fi 0.
Putem extrage elipse utilizând elementul "elipsă". Aici totul funcționează în același mod ca și cu un cerc, dar de această dată putem controla separat raza liniei x și raza liniei y utilizând atributele rx și ry.
Folosind elementul "poligon", putem desena poligoane, forme cu mai multe unghiuri și laturi, ca un triunghi, un octogon. exemplu:
După cum puteți vedea, desenarea unor forme simple folosind SVG în HTML este destul de simplă. Cu toate acestea, dacă avem nevoie de un obiect mai complex, atunci această metodă nu va mai funcționa pentru noi.
Sau puteți încorpora singur fișierul svg utilizând unul dintre următoarele elemente: embed, iframe, object.
Rezultatul va fi similar.
Suport pentru browserele grafice vectoriale scalabile
În ceea ce privește suportul în browsere, graficele vectoriale scalabile sunt deja perfect acceptate în multe browsere moderne, cu excepția versiunilor IE8 și versiunilor anterioare. Dar acest lucru poate fi corectat cu j # 097; o bibliotecă vascript numită Raphael.js. Pentru a facilita sarcina, folosim instrumentul ReadySetRaphael.com. Pentru a converti codul nostru SVG în formatul acceptat de Raphael.
Mai întâi, descărcați și includeți biblioteca Raphael.js în codul dvs. HTML. Apoi, descărcați fișierul svg pe site, copiați și inserați codul generat în următoarea funcție de încărcare:
În interiorul etichetei de caroserie, introduceți următoarea div cu atributul id rsr.
Și pe asta am terminat! Uitați-vă la exemplul de mai jos.
Deci, aceasta este baza SVG. Sperăm că acum înțelegeți puțin acest subiect. Aceasta este una dintre cele mai bune modalități de a optimiza performanța paginilor dvs., oferind în același timp imagini grafice care pot fi afișate clar chiar și pe ecranele Retina.
Ca de obicei, dacă sunteți curios, am pregătit pentru dvs. o mică selecție de articole suplimentare.
Vizualizați demonstrația | Descărcați codul sursă
Articole similare
Trimiteți-le prietenilor: