“De ce frumusețea este adevărul”

Episodul din această săptămână poartă titlul unui volum de științăWhy Beauty Is Truth în original – avându-l ca autor pe Ian Stewart, pretext de-a face o incursiune în grafica Web vectorială.

La sugestia noastră, Axi îi spusese lui Gil că după familiarizarea cu stilurile CSS ar putea să se amuze puțin, dându-i ca „misiune” redarea cu minimum de efort a următorului desen, cu condiția ca acesta să poată fi vizualizat pe orice dispozitiv, inclusiv cele mobile, indiferent de rezoluție, iar conținutul textual să fie indexat de către motoarele de căutare.

O ilustrație redată de un browser Web (grafică vectorială cu SVG)

Un salut „vectorial” direct din browser-ul Web

Gil știe că – pentru a reprezenta imagini compuse din diverse primitive grafice (precum puncte, linii drepte sau curbe, zone rectangulare, elipse și altele) – se poate recurge la un format vectorial, în opoziție cu cele de tip raster (bitmap). O imagine vectorială conține informații despre mulțime de primitive grafice folosite și proprietățile acestora (poziție, dimensiuni, mod de colorare etc.), iar nu despre matricea de pixeli care o reprezintă – cum se întâmplă în cazul imaginilor raster stocate via formate clasice: GIF (Graphic Interchange Format), JPEG (Joint Photographic Experts Group) ori PNG (Portable Network Graphics).

Singurul format vectorial deschis destinat Web-ului este SVG (Scalable Vector Graphics) – un alt standard al Consorțiului Web.

Gil și-a dat seama rapid că SVG se bazează pe XML, o ilustrație fiind creată (eventual, dinamic) cu ajutorul unor marcatori descriptivi similari celor HTML. Specificația curentă este SVG 1.1, iar pentru dispozitivele cu capacități computaționale reduse pot fi consultate recomandările SVG Tiny și SVG Mobile. De asemenea, Gil a promis că va parcurge tutorialul An SVG Primer for Today’s Browsers și că va studia suportul pentru SVG oferit de cele mai cunoscute navigatoare Web.

Punem la dispoziție în continuare codul-sursă al documentului svg.svg. ilustrând desenul de mai sus, adaptare după un exemplu propus de absolventul Cătălin Bulancea (promoția FII 2004):

<!-- Un exemplu de generare de conținut grafic vectorial via SVG

  Adaptare după C. Bulancea, "Noua provocare în grafica 2D – SVG",
  capitol al volumului S. Buraga (coord.), "Situri Web la cheie", Polirom, 2004
-->
<svg xmlns="http://www.w3.org/2000/svg"  
         xmlns:xlink="http://www.w3.org/1999/xlink" width="8cm" height="3cm">
  <title>Conținut grafic SVG</title>
  <defs>
      <!-- definim un dégrade liniar -->
      <linearGradient id="unGradient"> 
           <stop offset="20%" stop-color="#3FF" />
           <stop offset="90%" stop-color="#F3F" />
    </linearGradient>
    <rect id="patrat" width="15px" height="15px" fill="navy" />
    <!-- o cale de redare incluzând "comenzi" grafice -->
    <path id="cale" d="M15 50 C10 0 90 0 90 40" />
  </defs>
  <!-- o formă rectangulară umplută cu dégrade-ul de mai sus -->
  <rect x="1cm" y="1cm" width="6cm" height="1cm" fill="url(#unGradient)"  />
  <!-- folosim instanțe ale pătratului definit -->
  <use x="40" y="40" xlink:href="#patrat" />
  <use x="100" y="80" xlink:href="#patrat" />
  <use x="160" y="80" xlink:href="#patrat" />
  <use x="220" y="80" xlink:href="#patrat" />
  <!-- un text redat conform căii specificate -->
  <text fill="#000">
     <textPath xlink:href="#cale">Salut, lume!</textPath>
  </text>
</svg>

Acesta poate fi regăsit la adresa http://profs.info.uaic.ro/~busaco/teach/courses/cliw/demos/svg/svg.svg. Spațiul de nume XLink a fost folosit aici pentru a putea referi resurse anterior specificate (în acest caz, un pătrat).

Obiectele (formele grafice) SVG pot fi interactive și dinamice. Animațiile pot fi definite și declanșate fie declarativ (direct cu elemente SVG), fie utilizând programe JavaScript. În acest sens, se poate menționa biblioteca Raphaël care permite „scufundarea” conținutului grafic vectorial în paginile Web după cum se poate remarca în captura-ecran următoare.

Animații SVG realizate dinamic via biblioteca Raphaël

Un exemplu SVG realizat cu biblioteca Raphael, inspectat în Firefox

Câteva instrumente open-source utile sunt Inkscape, Apache Batik și svg-edit. Gil (și întâmplătorii spectatori ai acestui spațiu virtual) n-ar trebui să rateze seria de exemplificări complexe sau resursele SVG oferite de Mozilla.

Încheiem cu menționarea aplicației Web educaționale GraphX3D realizate acum 10 ani de absolventa Alexandrina Orzan. Scopul acesteia a fost oferirea de reprezentări grafice ale unor funcţii 2D şi 3D pe baza facilităților puse la dispoziție de limbajele PHP, SVG și X3D (ex-VRML). Astfel, proiectul – susținut cu succes ca lucrare de licență – permitea scrierea la intrare a unor ecuaţii parametrice sau a unor puncte de control pentru curbe/suprafețe Bézier şi oferea drept rezultat graficul 3D al obiectului respectiv.

GraphX3D: un experiment Web interactiv de grafică computațională

GraphX3D: un experiment Web interactiv de grafică computațională

Cu certitudine, formele geometrice figurate ar putea „rezona” și cu ultimul capitol al cărții amintite la începutul articolului: „Căutătorii adevărului și frumuseții”…

Anunțuri

Un gând despre „“De ce frumusețea este adevărul”

  1. Pingback: Vulpea de foc #18 (sau Firefox la Iași, pe 19 ianuarie) | .web

Comentariile nu sunt permise.