O privire asupra graficii vectoriale scalabile (SVG)

Grafica grafică a fost aplicată pe scară largă în presa scrisă. Într-un site web, putem adăuga, de asemenea, grafice vectoriale cu SVG sau Scalable Vector Graphic. Citind din spec. Oficial la W3.org, SVG este descris ca:

O limbă pentru descrierea graficelor bidimensionale în XML. SVG permite trei tipuri de obiecte grafice: forme grafice vectoriale (de exemplu, trasee care constau din linii drepte și curbe), imagini și text.

Acesta a fost de fapt în jur de la 1999 și începând cu 16 august 2011, a devenit o recomandare W3C. Cu toate acestea, SVG este încă considerabil insuficient utilizată, în timp ce există multe avantaje în utilizarea Vectorului mai degrabă decât Bitmap pentru a servi grafic sau imagine pe un site web.

SVG Avantaje

În ceea ce privește difuzarea pe site-uri grafice, SVG oferă câteva avantaje față de Bitmap, dintre care unele includ:

Rezoluția independentă

Grafica bitmap / raster este dependentă de rezoluție - este construită pe pixeli. Graficele deservite vor arăta pixelate când vor fi redimensionate la un anumit nivel de zoom. Acest lucru nu se întâmplă cu graficul vectorial, care este rezoluția independentă în natură, deoarece graficul este exprimat cu o ecuație matematică care îl face scalabil la orice nivel de mărire, menținând în același timp calitatea, chiar și la ecranul Retina.

Reducerea cererii HTTP

SVG poate fi încorporat direct într-un document HTML cu svg etichetă, astfel că browserul nu are nevoie să facă o solicitare de difuzare a graficului. De asemenea, aceasta are ca rezultat o performanță mai bună a încărcării pentru site.

Styling și scripting

Încărcarea directă cu svg tag-ul va permite, de asemenea, stilul grafic cu ușurință prin CSS. Noi putem schimbarea proprietăților obiectului cum ar fi culoarea de fundal, opacitatea, margini etc., la fel cum facem cu eticheta HTML obișnuită. În mod similar, putem manipula graficul prin JavaScript.

Poate fi animat și editat

Obiectul SVG poate fi animat atunci când utilizează elementul de animație sau prin Biblioteca JavaScript ca jQuery. Obiectul SVG poate fi editat și cu orice editor de cod text sau cu un software grafic, cum ar fi Inkscape (care este gratuit) sau Adobe Illustrator.

Dimensiune mai mică a fișierului

SVG are o dimensiune de fișier mai mică comparativ cu Bitmap, care are o prezentare grafică similară.

Desenează forme de bază cu SVG

Potrivit spec., Putem trage câteva forme de bază cum ar fi dreptunghi, cerc, linie, elipsă, polilinie și poligon cu SVG și pentru ca browserul să facă grafica SVG, toate elementele grafice trebuie inserate în etichetă. Să vedem exemplele de mai jos pentru mai multe detalii:

Linia

A desena o linie în SVG putem folosi element. Acest element este folosit pentru a desena o singură linie dreaptă, astfel că va consta numai din două puncte, start și Sfârșit.

După cum puteți vedea mai sus, coordonatele punctului de start sunt exprimate cu primele două atribute x1 și x2, în timp ce coordonatele punctului final al liniei sunt exprimate cu y1 și y2.

Există, de asemenea, două alte atribute: accident vascular cerebral și accident vascular cerebral lățime care sunt folosite pentru a defini culoarea frontierei și respectiv lățimea marginii. Alternativ, putem defini aceste atribute într-un stil inline, cum ar fi:

în cele din urmă doar face același lucru.

• Vizualizați demonstrația “Linia”

Polilinie

Este aproape similar cu , dar cu element putem trasa mai multe linii în loc de unul singur. Iată un exemplu:

elementul are puncte atributele care stochează toate coordonatele care formează liniile.

• Vizualizați demonstrația “Polilinie”

Dreptunghi

Desenarea unui dreptunghi este de asemenea simplă cu acest lucru element. Trebuie doar să specificăm lățimea și înălțimea, după cum urmează:

• Vizualizați demonstrația “Dreptunghi”

Cerc

Putem de asemenea trage un cerc cu element. În următorul exemplu, vom crea un cerc cu 100 raza care este definită cu r atribut:

Primele două atribute, cx și cy definesc coordonatele centrale ale cercului. În exemplul de mai sus, am stabilit 102 atât pentru X și y coordonate, în cazul în care aceste atribute nu sunt specificate, 0 va fi considerată ca valoare implicită.

• Vizualizați demonstrația “Cerc”

Elipsă

Putem desena o elipsă . Funcționează destul de similar cercului, dar de data aceasta putem controla în mod specific X raza de linie și y line cu rx și ry atribut;

• Vizualizați demonstrația “Elipsă”

Poligon

Cu element, putem desena mai multe laturi de forme cum ar fi un triunghi, hexagon și chiar un dreptunghi. Iată un exemplu:

• Vizualizați demonstrația “Poligon”

Utilizarea Editorului grafic grafic

După cum puteți vedea, desenarea obiectelor simple cu SVG în HTML este destul de ușoară. Cu toate acestea, atunci când obiectul devine mai complex, această practică nu mai este ideală și vă va da o durere de cap.

Din fericire, așa cum am menționat mai sus, putem folosi un editor grafic vectorial Adobe Illustrator sau Inkscape să facă treaba. Dacă sunteți familiarizat cu aceste software-uri, este cu siguranță mult mai ușor să desenați obiecte cu ajutorul interfeței grafice, mai degrabă decât să codificați-vă propriul grafic în eticheta HTML.

Dacă lucrați cu Inkscape, puteți să salvați graficul dvs. vector ca simplu SVG și apoi să îl deschideți în editorul de cod text. Acum, ar trebui să găsiți codurile SVG în fișier. Copiați toate codurile și inserați-le în interiorul documentului HTML.

Sau, puteți încorpora și .svg fișier prin unul dintre aceste elemente; încorporare, iframe și obiect, de exemplu;

Rezultatele vor fi în cele din urmă aceleași.

În acest exemplu, folosesc acest Apple iPod de la OpenClipArt.org.

• Vizualizați demonstrația “iPod”

Suport pentru browser

În ceea ce privește suportul browserului, SVG a fost foarte bine susținut în toate browserele importante, cu excepția celor din IE8 și anterioare. Dar această problemă poate fi rezolvată cu această bibliotecă JavaScript, numită Raphael.js. Pentru a face lucrurile mai ușoare, vom folosi acest instrument, ReadySetRaphael.com, pentru a converti codul nostru SVG în format acceptat de Raphael. Iată cum.

Mai întâi de toate, descărcați și includeți Raphaël.js bibliotecă în documentul dvs. HTML. Apoi, încărcați .svg fișierul pe site, copiați și inserați codul generat în interiorul încărcării următoare funcţie;

 window.onload = function () // codul Raphael merge aici 

În interiorul corp etichetă, puneți următoarele div cu RSR atributul id;

Asta e, ați terminat. Consultați exemplul din linkul de mai jos.

• Vizualizați demonstrația “Raphael”

Gândurile finale

Deci, asta e baza cu SVG. Sperăm că acum aveți o înțelegere corectă a acestui subiect. Este cel mai bun mod de a optimiza site-ul dvs. pentru orice rezoluție a ecranului, chiar și pentru utilizarea pe ecranul retinei.

Ca întotdeauna, dacă sunteți o persoană aventuroasă, aici am pus câteva referințe și discuții pentru a sătura mai profund în acest subiect.

• O introducere în școlile SVG - W3
• Rezoluție independentă cu SVG - Smashing Magazine
• De ce nu utilizați SVG? - NetTuts

Vă mulțumim pentru lectură și sperăm că v-ați bucurat de acest post.

• Vizualizați demonstrația
• Descărcați sursa