duminică, 29 iulie 2012

SVG (II) - Crearea formelor vectoriale de bază

Desenarea liniilor


Sintaxa pentru desenarea unei linii este:
<line x1="start-x" y1="start-y" x2="end-x" y2="end-y" />
unde (x1,y1) reprezintă punctul din care începe linia, iar (x2,y2) punctul în care se sfărşeşte. Dacă perechea (x1,y1) lipseşte, punctul implicit de start va fi  (0,0) adică colţul stâng sus al ferestrei browserului, iar culoarea implicită de desenare a graficelor este albă.
SVG oferă o serie de atribute care permit stabilirea stilului formei vectoriale desenate şi anume:

  • stroke - culoarea conturului formei
  • stroke-width  - grosimea conturului
  • stroke-opacity - opacitatea conturului (un număr cuprins între 0.0 şi 1.0, unde 0.0 este complet transparent, iar 1.0 este complet opac)
  • stroke-linecap - stabileşte forma sfîrşitului unei linii şi poate avea una din valorile butt (implicit), round sau square
  • stroke-linejoin - stabileşte forma colţurilor unui poligon sau a unei serii de linii şi poate avea una din valorile miter (ascuţit - implicit), round sau bevel (plat).
  • stroke-dasharray - dacă conturul este punctat, acest atribut precizează lungimea liniilor şi a spaţiului dintre ele
  • fill - culoarea de umplere a formei
  • fill-opacity - opacitatea culorii de umplere
  • fill-rule - cu valorile nonzero sau evenodd care oferă reguli diferite pentru a stabile dacă un punct este în interiorul sau exteriorul unei forme

Culoarea conturului sau a interiorului formei poate fi precizată în mai multe moduri:

  • none - conturul nu va fi desenat sau forma nu va fi umplută cu culoare
  • un nume de culoare recunoscută în web
  • #rrggbb - cifre hexazecimale pentru descrierea celor trei culori de bază (red, green, blue)
  • rgb(r,g,b) - fiecare dintre valori fiind în intervalul 0-255 sau 0%-100%.

Observaţie: în cazul liniilor atributul fill nu are nici-un efect


Exemplu: fie fişierul linie1.svg cu următorul conţinut:

<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
width="300px" height="300px" viewBox = "0 0 300 300" >


<!-- linie cu punctul de plecare si grosimea implicite-->
<line x2="150" y2="170"  stroke ="black" />
<!-- linie verticala de culoare verde si grosimea 5px -->
<line x1="10" y1="10" x2="10" y2="180" stroke="green" stroke-width="5" />
<!-- linie orizontala de culoare rosie si grosimea 10px -->
<line x1="30" y1="20" x2="250" y2="20" stroke="red" stroke-width="10" />

</svg>
În browser se afişează:




SVG (I) - Introducere

     SGV (Scalable Vector Graphics) este un standard pentru grafică promovat şi susţinut de World Wide Web Consortium (W3C). SVG este un limbaj care permite crearea elementelor vectoriale 2-D care sunt reprezentarea matematică a obiectelor grafice şi pot fi redimensionate fără a-şi pierde precizia şi calitatea. SVG este unic prin faptul că are propriul Document Object Model (DOM) putând astfel interacţiona cu alte limbaje web cum ar fi JavaScript, HTML şi CSS. Ca şi HTML, SVG este uşor de citit şi editat şi permite interacţiuni complexe şi animaţii prin intermediul scripturilor şi a limbajului Synchronized Multimedia Integration Language (SMIL) care este un alt standard W3C.
Principalele avantaje ale SVG sunt:
  • utilizează grafica client-side având un impact minor asupra performanţelor serverului web
  • codul este open source (XML)
  • deoarece codul este scris în XML,el este accesibil motoarelor de căutare şi dispozitivelor screen reader
  • fiind creat de W3C este un standard deschis şi public
  • foloseşte tehnologii deja familiare programatorilor web: DOM, JavaScript, CSS şi Ajax
  • poate fi integrat direct aplicaţiilor web create în HTML5 şi în aplicaţiile RIA (Rich Internet Applications)
  • din 2010 este suportat nativ de cele 5 browsere majore

Vizualizarea documentelor SVG

   Graficele create în SVG pot fi vizualizate cu oricare din browserele Internet Explorer, Firefox, Opera, Safari şi Chrome. Singura excepţie o reprezintă IE, deoarece suportul nativ pentru SVG apare din versiunea 9 (care necesită Windows Vista sau 7). Pentru a vizualiza SVG în versiunile IE mai vechi, trebuie descărcat şi instalat plug-in-ul SVG (ASV 3.03) de la adresa http://www.adobe.com/svg/viewer/install/mainframed.html.
În cazul celorlalte browsere este necesară doar actualizarea versiunii utilizate.

Editarea documentelor SVG

   Există diferite unelte şi resurse pentru crearea graficelor SVG (Inkscape, SVG-editor etc), dar la fel de simplu puteţi crea documentele SVG într-un simplu editor de text, cum ar fi Notepad sau Notepad+.
Structura unui document SVG este:
<svg xmlns='http://www.w3.org/2000/svg' 
        xmlns:xlink='http://www.w3.org/1999/xlink' 
        width="100%" height="100%"  >

.....
</svg>
Perechea de taguri <svg> </svg> marchează începutul şi sfârşitul documentului, în timp ce atributele xmlns şi xmlns:xlink precizează că SVG este un dialect XML şi că pentru interpretarea documentului trebuie folosite definiţiile din  spaţiul de nume precizat de W3C. Atributele width şi height stabilesc dimensiunile absolute sau relative ale graficului afişat în browser.