Sunteți pe pagina 1din 9

Limbajul SVG (Scalable Vector Graphics) pentru grafica vectorial bidimensional i aplicaii n XML

Pop Vasile Mihai vasak4all@yahoo.com coordonator proiect: Ovidiu tefan

Abstract: Tehnologia SVG este open source a consoriului W3C i reprezint un limbaj pentru grafica vectorial bidimensional n XML (eXtensible Markup Language). Combinaia dintre SVG i JavaScript ofer o platform puternic pentru grafica interactiv 2D, comparabil cu tehnologiile Flash i Java. SVG ofer o grafic XML pentru Web prin trei tipuri de obiecte grafice: vector graphic shapes (linii i curbe), imagini i text. Obiectele pot fi grupate, transformate i reprezentate n mod dinamic i interactiv. SVG utilizeaz standarde XML pentru text, formatele JPEG i PNG pentru imagini, DOM ( Document Object Model) pentru scripting i interactivitate, SMIL pentru animaie i CSS pentru styling. Lucrarea cuprinde o prezentare a limbajului SVG, caracteristici ale acestuia i cteva exemple de imagini SVG.
Cuvinte cheie: SVG, XML, grafic vectorial 2D,obiecte grafice.

1. Introducere

Complexitatea aplicaiilor de utilizare a calculatorului n diverse domenii de activitate, a determinat perfecionarea, att a sistemelor de operare i limbajelor de programare, ct i a tehnologiilor i platformelor. Au fost concepute i elaborate noi sisteme de operare, noi limbaje de programare, noi tehnologii. Dac n anii 1970 inventarea i utilizarea microprocesorului a nsemnat o revoluie n domeniul arhitecturii calculatoarelor, n anii 1990 a avut loc o adevrat explozie a tehnologiei, att n domeniul reelelor de calculatoare, ct i n domeniile limbajelor de programare (Java i JavaScript) i sistemelor de operare (Linux, Windows). Astfel, au aprut tehnologiile Web, iar odat cu rspndirea internetului, care este acum disponibil pe o mare varietate de dispozitive mobile problema oferirii de servicii GIS prin folosirea aplicaiilor web are o actualitate din ce in ce mai mare. Specific unui GIS este modul de organizare a informaiei gestionate. Exist dou tipuri de informaie: una grafic care indic repartiia spaial a elementelor studiate i alta sub form de baz de date folosita pentru a stoca atributele asociate acestor elemente.

Informaia grafic poate fi de dou feluri: raster sau vectorial. Grafica raster este o modalitate de reprezentare a imaginilor n aplicaiile software sub forma de matrice de pixeli, n timp ce grafica vectorial este o metod de reprezentare a imaginilor cu ajutorul unor primitive geometrice (puncte, segmente, poligoane),caracterizate de ecuaii matematice. Specific sistemelor GIS este asocierea unui sistem de coordonate geografic matricii de pixeli (imaginea raster) sau vectorilor procedeul poart denumirea de Georefereniere, astfel unui obiect (reprezentat fie printr-o imagine, fie printr-un vector) i este asociat o poziie unic n Sistemul Informatic corespunztor poziiei geografice din lumea real. Ca urmare a dezvoltrilor oferite de limbajul XML (eXtensible Markup Language), limbajul JavaScript, DOM (Document Object Model) pentru scripting i interactivitate, SMIL (Synchronized Multimedia Integration Language) pentru animaie i CSS pentru styling, n anul 2003, Consoriul W3C ( Worldwide Web Consortium - W3C) elaboreaz specificaia SVG 1.1 (Scalable Vector Graphics) http://www.w3.org/Graphics/SVG/. Aceast platform este open source i este o alternativ performant la tehnologiile Java i Flash. SVG este folosit n numeroase zone de afaceri incluznd: grafica Web, animaie, interfee pentru utilizatori, transfer de grafic, imprimare, aplicaii mobile, design de nalt calitate i GIS. Printre autorii platformei SVG se numara: Adobe, Apple, Macromedia, Microsoft; iar n anul 2004, marea majoritate a productorilor din industria de telefonie mobil a ales SVG ca baz pentru platformele grafice. Aplicaiile grafice SVG pot fi vizualizate (folosind un browser compatibil) cu Firefox 1.5+, Opera 9 sau Internet Explorer cu Adobe SVG plug-in (Adobe SVG Viewer). Din 2003, apare generaia WEB 2.0: noi tehnologii i servicii Web. Folosind platforma SVG, n domeniul educaiei se pot concepe i elabora aplicaii grafice pentru diverse discipline (matematic, fizic, informatic, chimie etc.) ce vor reprezenta diverse fenomene, termeni, concepte. Aceast grafica vectorial (SVG) se folosete i n GIS (Geographic information System), imaginile provenite de la satelii sunt vectorizate cu scopul obinerii hriilor. Datorit flexibilitii n ceea ce privete rezoluia imaginilor vectoriale, acestea sunt folosite intensiv pentru crearea materialelor ce trebuie imprimate la mrimi variabile: acelai fiier poate fi folosit att pentru o hart ct i pentru un plan de situatie, n ambele cazuri, rezultatele fiind foarte clare i precise.

2. Scalable Vector Graphics (SVG)


Platforma SVG are dou pri componente: un fiier de baz de tip XML i unul de programare de tip API pentru aplicaiile grafice bidimensionale. Principalele caracteristici includ: forme, texte, grafic raster integrat cu multe stiluri diferite de desenare, acestea fiind susinute printr-un limbaj de scripting numit ECMAScript care are suport complect pentru animaie. Formatul SVG este destul de uor, fiind familiar cu cel al limbajul HTML, XML i cel al programarii orientate spre obiecte (OOP), n plus fa de acestea, exist numeroase tutoriale i exemple on-line, care determin o nelegere mai clar a utilizrii specificaiilor SVG.
Limbajul XML (eXtensible Markup Language) este limbajul ce ofer un format pentru stocarea i transmiterea de date printr-o descriere declarativ. Gramatica XML include XHTML ( the XML version of HTML), SVG, MathML (theMathematics Markup Language), ChemML (the Chemistry Markup Language) i GML (the Geography Markup Language). Ca limbaj de scripting prin utilizarea lui JavaScript i SVG Document Object Model (SVG-DOM), SVG este o extensie a lui HTML DOM 2

level 2 familiar dezvoltatorilor de Web. Elementele SVG pot fi caracterizate de animaie prin utilizarea Synchronized Multimedia Integration Language (SMIL). Analog XHTML i MathML, SVG este de tip XML, fiierele sau documentele SVG au extensia .svg i sunt editate cu un editor simplu (Notepad). Aceste fiiere nu sunt compilate, ci doar interpretate de ctre browser ( Firefox 1.5+, Opera 9 sau Internet Explorer cu Adobe SVG Viewer).

n momentul de fa SVG-ul are mai multe profile pentru a se putea adapta mai bine la diferite constrngeri. Astfel, profilele "SVG Tiny" i "SVG Basic" au fost create special pentru dispozitivele mobile cu resurse limitate. n acelai timp, profilul "SVG Print" este destinat mediilor de printare a documentelor. Document Type Definition (DTD) reprezint descrierea elementelor i atributelor (svg11.dtd) corespunztoare declaraiilor de tip SVG i care sunt utilizate n aplicaiile grafice. Elementele root pentru documentele XML sunt acele etichete XML interpretate de browser. De exemplu, <html> pentru XML i <svg> pentru SVG. Namespace XML sau atribute "xmlns" realizeaz o descriere unic de identificare a atributelor SVG cu datele XML. Caracteristici SVG 1. Dimensiunile fiierului sunt mici: n medie, fiierele SVG au dimensiunile mai mici dect alte formate grafice, cum ar fi JPEG sau GIF, astfel nct ele se descarc mai repede,economisindu-se astfel timp. Imaginile SVG ,fiind XML, conin multe fragmente de text repetate i sunt astfel potrivite pentru compresie. Dup ce o imagine SVG a fost comprimat poate fi menionat ca fiind un SVGZ, fiierele comprimate SVG sunt, de obicei de 50% pn la 80% mai mici dect fiierele SVG necomprimate, ele sunt decomprimate automat de ctre Adobe SVG Viewer fr nici o ntrziere vizibil pentru utilizator. 2. Independena afirii: Imaginile SVG sunt ntotdeauna clare pe ecran i se pot printa la orice rezoluie a imprimantei, fie c este vorba 300 dpi (puncte per inch), 600 dpi, sau mai mult. Nu se vor obine niciodat marginile distorsionate ca urmare a extinderii pixelilor sau a antialiasingului, pentru c fiierul stocheaz liniile, formele i culorile care alctuiesc imaginea ca formule matematice,dup care un program de grafic vectorial folosete aceste formule pentru a construi imaginea pe ecran, la o calitate optim n funcie de rezoluia ecranului. Aadar, se poate produce o imagine de orice mrime i nivel de detaliu, calitatea imaginii fiind determinat doar de rezoluia display-ului, mrimea fiierului rmnnd aceeai. Imprimarea unei imagini vectoriale pe hrtie sau pe orice alt material va da un rezultat mai clar i de o rezoluie mai nalt dect cea posibil prin folosirea unei imagini de tip bitmap, folosind exact acelai fiier. Comparaie ntre o imgine vectorial SVG (stnga) i o imagine de tip BITMAP (dreapta).

3. Control superior al culorilor:


3

SVG ofer o palet de 16 milioane de culori i accept profiluri de culoare ICC, sRGB, pante, i mascare. 4. Interactivitate i inteligen: Deoarece SVG este bazat pe XML, acesta ofer o interactivitate dinamica de neegalat. Imaginile SVG pot rspunde la aciunile utilizatorului prin evideniere, instrumente, efecte speciale, audio i animaie. Combinaia realizat ntre SVG i JavaScript ofer o platform puternic pentru grafica interactiv bidimensional, comparabil cu tehnologiile Flash i Java, cu toate acestea, limbajul SVG a fost trecut cu vederea o perioad de timp, n mare parte din cauza sprijinului browser incomplet ns situaia s-a mbuntit semnificativ ncepnd cu anul 2006, odata cu eliberarea pe pia a browserelor Firefox 1.5 i Opera. 5. Zoom-ul: Utilizatorii pot amplifica o imagine de pn la 1600%, fr a sacrifica detaliile sau claritatea. Textul rmne text n SVG, imaginile rmne editabile (n codul surs) i, mai important, SVG are functia de cutate (spre deosebire de omologii si in format raster sau binar). Nu exist limitri de font sau amplasare, iar utilizatorii vd imaginea ntodeauna la fel.

6. Fiierele sunt bazate pe text: Un fiier SVG este bazat pe text, deci nu este binar, este un "om care poate fi citit", i are format asemntor HTML-ului. Chiar i un nceptor se poate uita la codul surs SVG i s fac imediat un sens al coninutului descriptiv n raport cu reprezentarea grafic. <?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <polygonstyle="stroke:#24a;stroke-width:1.5;fill:#eefefe" points="10,10,400,10,430,230,10,280,10,10" /> <circle style="stroke:#d33;stroke-width:2;fill:#7ce" cx="100" cy="80" r="50" /> <text x="270" y="50">Exemplul 1</text> </svg>

Principalele elemente din componena unui fiier SVG sunt:

Paths. "Cile" pot fi folosite pentru descrierea conturului unei forme. Conturul poate rmne gol sau poate fi umplut. Cile pot fi folsite i pentru a specifica zonele de decupare; Forme de baz. Specificaia SVG ofer posibilitatea folosirii urmtoarelor forme de baz: dreptunghi, cerc, elips, linii i poligoane, acestea pot fi construite i cu ajutorul cilor care au acelai contur; Text. Pentru a specifica textul ce apare ntr-o imagine trebuie folosite elemente de
tipul text;

Painting. Se refer la posibilitatea de a umple formele specificate n SVG, pentru aceasta poate fi folosit o singur culoare, o culoare cu transparen, un gradient sau un model; Culoare. Propietatea culoare este folsit pentru specificare culorii; Gradient i model. Folosite pentru colorarea formelor specificate; Decupare, mascare. n SVG pot fi folosite zone de decupare sau de mascare; Filtre. Filtrele descriu diferite efecte aplicate imaginilor; Interactivitate. O imagine SVG are posibilitaea de a interaciona cu utilizatorul, astfel, la apsarea unui buton sau la folosirea mausului pot fi pornite diferite scripturi; Linkuri. Un document poate conine legturi ctre alte pagini sau elemente din web; Scripting. ntr-un SVG pot fi definite scripturi cu diverse funcii;
5

Animaii. Pentru un SVG pot fi specificate diverse tipuri de animaii; Font. Nu este necesar ca utilizatorul final s aib deja instalate diferitele seturi de caractere ("fonturi") folosite, fonturile pot fi incluse n imagine, prin aceasta ele pot fi randate la fel n orice situaie; Metadata. Pentru intregrarea mai bun webul semantic ofer i opiunea specificrii de metadata (acestea sunt datele care descriu datele propriu-zise).

Elaborarea aplicaiilor grafice n SVG se poate realiza prin cunoaterea specificaiilor SVG i utilizarea elementelor i atributelor conform definiiilor XML i SVG. Coninutul SVG va fi cuprins ntre etichetele <svg>. Se poate nva prin exemple. Dac nu se opteaz pentru o codificare manual ,atunci exist instrumente software specializate disponibile care se pot utiliza pentru a crea SVG ntr-un mediu grafic,cum ar fi programele: Adobe Illustrator i Inkscape. Elementele (etichetele) eseniale pentru aplicaiile grafice sunt: <circle>, <ellipse>, <rect>, <line>, <polyline>, <polygon> i <path>. Etichete importante sunt i <g> pentru gruparea elementelor (formelor) i <use> pentru reutilizarea elementelor definite n seciunea <defs>. O list complet privind definirea, sintaxa i utilizarea elementelor SVG se afl la adresa W3C SVG 1.1. Recommendation (www.w3.org/TR/SVG11/) i la adresa W3Schools SVG site. Pentru exemplificare prezentm codul SVG (ex1.svg) ce realizeaz generarea unor forme geometrice: poligon,cerc, dreptunghi, linie (dreapt) i drum (path), indicndu-se pentru fiecare atributele i elementele de identificare (referina) corespunztoare. Se va folosi i elementul <text> pentru desenarea unui text. Pentru aplicaiile SVG sunt necesare urmtoarele declaraii:
xmlns=http://www.w3.org/2000/svg; xmlns:xlink=http://www.w3.org/1999/xlink;

Exemplu nr.1

<svgxmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="570" height="470" > <polygonstyle="stroke:#24a;stroke-width:1.5;fill:#eefefe" points="10,10,400,10,430,230,10,280,10,10" /> <circle style="stroke:#d33;stroke-width:2;fill:#7ce" cx="100" cy="80" r="50" /> <rect style="stroke:#2aa;stroke-width:7;fill:#ded;opacity:.8" height="120" width="220" /> x="170" y="80"

<line style="stroke:#eea;stroke-width:6" x1="30" y1="250" x2="340" y2="60"/> <path style="fill:#daa;fill-rule:evenodd;stroke:none" d="M 230,250 C 360,30 10,255 110,140 z "/> <circle style="stroke:#d33;stroke-width:2;fill:#7ce" cx="370" cy="140" r="30" /> <text x="270" y="50">Exemplul 1</text> </svg>

EXEMPLU nr. 2 <rect id=Rectangular_shape fill=#FF9900 width=85.302 height=44.092/> <ellipse id=Elliptical_shape fill=#FFFF3E cx=42.651 cy=22.046 rx=35.447 ry=16.426/> <text transform=matrix(1 0 0 1 16.2104 32.2134) font-family=fMyriad-Romanf font-size=31.2342>SVG</text>

Cele trei obiecte care alctuiesc acest exemplu sunt uor de identificat. Exist un dreptunghi <rect>, o elips <ellipse> i un element text <text>. Proprietile de poziionare i stil sunt uor de citit, si se pot modifica uor printr-o simpl editare a textului. De exemplu, se poate schimba culoarea de umplere a elipsei prin simpla schimbare a valorii acesteia n descrierea complet.
7

EXEMPLU nr.3

n acest exemplu, punctul B este mobil i se rotete pe suprafaa arcului de cerc,astfel inct unghiul ABC este ntotdeauna un unghi drept, acest fiier SVG este numit Thales.svg deoarece Thales din Milet ,vechi matematician este creditat cu "dovada" acestui rezultat de baz. Acest tip de grafic ar putea fi uor modificat pentru a afia rezultate diferite de la geometrie pn la istoria matematicii. Chiar dac imaginile sunt statice ( spontane), e mai bine s se utilizeze grafice vectoriale dect fisiere .gif sau .JPEG. 3. Concluzii: Limbajul SVG este o platform puternic pentru grafica bidimensional oferind numeroase avantaje cum ar fi: dimensiunea mic a fiierelor, claritatea imaginilor obinute, posibilitatea unui zoom foarte mare fr pierderea calitii imaginii datorit faptului c programul recalculeaz funcia matematic asociat obiectului modificndu-i dimensiunile fr pierderi, editarea codului imaginilor se poate realiza cu orice editor de text, sprijin browser complet. n unele cazuri este recomandat folosirea imaginilo vectoriale, iar n altele a imaginilor bitmap, n funcie de natura proiectului. Uneori, cele dou formate pot fi folosite mpreun. O nelegere a avantajelor i limitrilor fiecrei tehnologii i relaia dintre ele va duce la o utilizare optim a acestora. 4. Bibliografie

1. The Journal of Online Mathematics and Its Applications by David Lanehttp://www.maa.org/joma/Volume7/Lane/Contents.html; 2. SVG: The Nuts and Bolts; 3. Site oficial Adobepromoid=DIOAJ;

Scalable Vector Graphics http://www.adobe.com/svg/?

4. W3C-site oficial SVG http://www.w3.org/Graphics/SVG/; 5. Wikipedia http://en.wikipedia.org/wiki/Scalable_Vector_Graphics#cite_note-0; 6. http://en.wikipedia.org/wiki/SVG_animation 7. GIS- http://www.scribd.com/doc/40401398/Gis

8. http://commons.wikimedia.org/wiki/File:Harta_transportului_%C3%AEn_comun_Bucure %C8%99ti.svg 9. http://www.scribd.com/doc/37805020/Grafic%C4%83-vectorial%C4%83