SVG

Scalable Vector Graphics exista de multa vreme in Opera, Firefox, Safari si Chrome, insa de abia cand Internet Explorer 9 a inceput sa il suporte, acest API este pregatit pentru utilizare pe scara larga, moment in care a fost eclipsat de elementul canvas din HTML5 – desi sunt instrumente diferite pentru destinatii diferite.

Elementul canvas 2D este nemaipomenit pentru a desenea rapid grafica pe ecran. Insa tot ce puteti sa faceti este sa desenati; nu exista o “amintire” a ce este acolo sau a ceea ce se afla “deasupra” cui; daca aveti nevoie de tipul acesta de contabilitate, trebuie sa o faceti singuri in JavaScript. Deoarece nu este stocat in memorie un DOM, API-ul este rapid, asa ca este adecvat pentru jocuri de tip FPS.

In schimb, SVG este grozav atunci cand trebuie sa stocati un DOM. Obiectele pot fi mutate si animate independent cu JavaScript. Incercati Inbox Attack, jocul retro al lui Daniel Davis si uitati-va la codul sursa pentru a vedea cum este realizata animatia.

Deoarece formele si traseele sunt generate folosind markup, le pot fi adaugaute stiluri prin intermediul CSS. Spre deosebire de elementul canvas, textul din SVG ramane text, asa ca este indexabil, accesibil si poate fi utilizat in aplicatii web hibride; folosind elementul canvas, textul se transforma in pixeli, ca o imagine a unui text in Photoshop.

Insa caracteristica intr-adevar senzationala din SVG este ca se bazeaza pe grafica vectoriala – asa ca ilustratiile, graficele, pictogramele din interfete si asa mai departe vor fi la fel de clare si de precise pe un ecran lat de televizor de 50 de toli, conectat la internet ca si pe ecranul unui telefon sau al unui desktop. In vremurile in care webul este peste tot, acest lucru este important, imaginile SVG pot chiar sa includa interogari despre mediul de afisare, asa incat pot fi adaptabile, reducant astfel din numarul de nuante ale umbrelor sau la detaliile atunci cand, de exemplu, sunt generate avand dimensiuni mici.

Asa cum am mentionat anterior, SVG este suportat pe scara larga in cele mai recente browsere pentru desktop. In zona mobila suportul este de asemenea in gneral destul de bun, cu exceptia notabila a browserului din Android de dinainte de versiunea 3.0.

Daniel Davis are o lista de resurse cu tutoriale pentru SVG. De asemenea recomand un e-book gratuit: Learn SVG(learnsvg.com/book-learnsvg).

Leave a reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>