SVGSVG –– ScalableScalable VectorVector 2005/2006 2005/2006 GraphicsGraphics Web Web http://www.w3.org/Graphics/SVG/ Tehnologii Tehnologii

Sergiu Dumitriu http://fenrir.info.uaic.ro/~sdumitriu 1 2005/2006 2005/2006 “Things to watch: SVG - Scalable Vector Web Web Graphics - at last, graphics which can be rendered optimally on all sizes of device” Tehnologii Tehnologii

Tim Berners-Lee

Sergiu Dumitriu http://fenrir.info.uaic.ro/~sdumitriu 2 CuprinsCuprins 2005/2006 2005/2006 • SVG – format scalabil de grafică vectorială • CSS + XSL Web Web • Efecte speciale •Animaţii • Programare Tehnologii Tehnologii • sXBL / XBL + SVG •Unelte •Aplicaţii • Implementări

Sergiu Dumitriu http://fenrir.info.uaic.ro/~sdumitriu 3 SVGSVG 2005/2006 2005/2006 • Limbaj standardizat de Consorţiul Web Web Web •Grafică 2D vectorială • Suport pentru efecte şi animaţii • Interactivitate Tehnologii Tehnologii • Sintaxă XML • Specificaţie, nu implementare

Sergiu Dumitriu http://fenrir.info.uaic.ro/~sdumitriu 4 GraficGraficăă vectorialvectorialăă 2005/2006 2005/2006 • 2 tipuri de imagini Web Web – Raster (lossless, lossy) – Vectorial (2D, 3D) • Formatul vectorial Tehnologii Tehnologii – Redimensionabil – Independent de rezoluţie – Dimensiunea fişierului nu este proporţională cu dimensiunea imaginii

Sergiu Dumitriu http://fenrir.info.uaic.ro/~sdumitriu 5 2005/2006 2005/2006 Web Web Tehnologii Tehnologii

Sergiu Dumitriu http://fenrir.info.uaic.ro/~sdumitriu 6 SVGSVG esteeste XMLXML 2005/2006 2005/2006 • Sintaxa XML Web Web Un desen Tehnologii Tehnologii

Sergiu Dumitriu http://fenrir.info.uaic.ro/~sdumitriu 7 SVGSVG esteeste XMLXML 2005/2006 2005/2006 • Namespaces – XHTML, RDF, XLink Web Web • Infoset •XSL •CSS Tehnologii Tehnologii •DOM, SAX •XBL • Generare facilă server-side • Resurse externe

Sergiu Dumitriu http://fenrir.info.uaic.ro/~sdumitriu 8 SintaxaSintaxa SVGSVG -- elementeelemente •Definiţie modulară –elemente: 2005/2006 2005/2006 – Structure – svg, g, defs, desc, title, use Web Web – Conditional Processing –switch – Image – Shape – path, rect, line, circle, ellipse, polyline – Text – text, tspan, tref, textPath, altGlyph Tehnologii Tehnologii – Marker – Gradient – linearGradient, radialGradient, stop – Pattern – Clip – Mask – Filter –feBlend, feDistantLight, feGaussianBlur...

Sergiu Dumitriu http://fenrir.info.uaic.ro/~sdumitriu 9 SintaxaSintaxa SVGSVG -- atributeatribute 2005/2006 2005/2006 •Definiţie modulară – atribute: – Core – id, :base, xml:lang, xml:space Web Web – Viewport – clip, overflow – Paint – color, fill, stroke... – Opacity – opacity, stroke-opacity, fill-opacity Tehnologii Tehnologii – Graphics – display, visibility, pointer-events... – DocumentEvents – onunload, onzoom, onscroll... – GraphicalEvents – onfocusin, onclick, onmouseout... – AnimationEvents – onbegin, onend, onrepeat

Sergiu Dumitriu http://fenrir.info.uaic.ro/~sdumitriu 10 SintaxaSintaxa SVGSVG -- extraextra 2005/2006 2005/2006 • Alte module: – Cursor Web Web – Hyperlink – XLink attributes – ExternalResourcesRequired – View Tehnologii Tehnologii – Script – Style – Animation – Font – Extensibility – Color-profile

Sergiu Dumitriu http://fenrir.info.uaic.ro/~sdumitriu 11 FoiFoi dede stiluristiluri 2005/2006 2005/2006 • Stil intern – atributul style Web Web • Stil intern – elementul style • Foi de stiluri CSS externe –Proprietăţile standard CSS Tehnologii Tehnologii –Proprietăţi specifice SVG –Atributul class • Transformări XSLT –Ca orice fişier XML – restilizare – Generare SVG din alte limbaje

Sergiu Dumitriu http://fenrir.info.uaic.ro/~sdumitriu 12 2005/2006 2005/2006 Web Web Tehnologii Tehnologii

Sergiu Dumitriu http://fenrir.info.uaic.ro/~sdumitriu 13 EfecteEfecte specialespeciale –– gradiengradienţţii 2005/2006 2005/2006 •Tranziţii continue de culoare • Liniari sau radiali Web Web •Pentru fill, dar şi pentru stroke • Oricâte puncte de oprire –Culoare Tehnologii Tehnologii – Opacitate – Redefinibile prin CSS

Sergiu Dumitriu http://fenrir.info.uaic.ro/~sdumitriu 14 EfecteEfecte specialespeciale –– gradiengradienţţii ... 2005/2006 2005/2006 Web Web ... Tehnologii Tehnologii … … …

Sergiu Dumitriu http://fenrir.info.uaic.ro/~sdumitriu 15 EfecteEfecte specialespeciale –– filtrefiltre 2005/2006 2005/2006 • Transformări matriceale asupra conţinutului grafic generat Web Web • Majoritatea efectelor incluse în aplicaţiile desktop pentru grafică raster – Blurs, lighs, composition, flood, offset, turbulence – Any user defined matrix Tehnologii Tehnologii • Compuse în serie sau în paralel •Acţionează asupra imaginii întregi, opacităţii, fundalului, fill-ului sau doar stroke-ului – Eventual doar o regiune – Eventual text ce rămâne selectabil

Sergiu Dumitriu http://fenrir.info.uaic.ro/~sdumitriu 16 EfecteEfecte specialespeciale –– filtrefiltre

Web Web

Sergiu Dumitriu http://fenrir.info.uaic.ro/~sdumitriu 17 2005/2006 2005/2006 Web Web Tehnologii Tehnologii

Sergiu Dumitriu http://fenrir.info.uaic.ro/~sdumitriu 18 EfeteEfete specialespeciale –– clip,clip, maskmask 2005/2006 2005/2006 •Clipping– tăierea unui set de elemente Web Web SVG după o formă prestabilită – Forme sau text – Static sau dinamic Tehnologii Tehnologii • Masking – Opacitatea unui set de elemente este influenţată de opacitatea elementelor dintr-un container – Generalizează conceptul de clipping

Sergiu Dumitriu http://fenrir.info.uaic.ro/~sdumitriu 19 AnimaAnimaţţiiii –– SMILSMIL 2005/2006 2005/2006 • SMIL – specificaţie W3C pentru definirea declarativă a sincronizării animaţiilor şi a Web Web clipurilor multimedia – Synchronized Multimedia Integration Language • SVG utilizează un subset SMIL pentru declararea animaţiilor Tehnologii Tehnologii – set, animate, animateMotion, animateColor, animateTransform, mpath – attributeName, attributeType, begin, dur, end, min, max, restart, repeatCount, repeatDur, calcMode, values, keyTimes, keySplines, from, to, by, additive, accumulate

Sergiu Dumitriu http://fenrir.info.uaic.ro/~sdumitriu 20 AnimaAnimaţţiiii –– SVGOMSVGOM 2005/2006 2005/2006 • Sunt modificabile proprietăţile elementelor din arborele DOM ataşat Web Web fişierului SVG – DOM Core – setAttribute(attr, value) – DOM Style – element.style.attr = value Tehnologii Tehnologii – SVGOM – element.attr = value •Asemănător DHTML •Funcţii reapelate – setTimeout, setInterval – Javascript SMIL Library

Sergiu Dumitriu http://fenrir.info.uaic.ro/~sdumitriu 21 ProgramareProgramare -- SVGOMSVGOM 2005/2006 2005/2006 • Pentru SVG s-a definit un superset de Web Web interfeţe DOM – SVG Object Model • SVG 1.1 – extinde DOM L2 Core –Asemănător DOM L2 HTML Tehnologii Tehnologii •Extinde şi DOM L2 Style pentru a include proprietăţile CSS specifice SVG •SVGOM –o colecţie de interfeţe IDL – Implementări JavaScript, Java, C, C#

Sergiu Dumitriu http://fenrir.info.uaic.ro/~sdumitriu 22 ProgramareProgramare –– JavaScriptJavaScript 2005/2006 2005/2006 • ECMAScript + DOM Core + SVGOM + Web Web DOM Style + DOM Events • E4X? XML Events? DOM Views? DOM Load and Save? Tehnologii Tehnologii •Animaţii • Interactivitate • SVG + AJAX • SVG pentru interfeţele aplicaţiilor

Sergiu Dumitriu http://fenrir.info.uaic.ro/~sdumitriu 23 ProgramareProgramare –– JavaJava 2005/2006 2005/2006 •Aplicaţii Desktop – JDK + Batik toolkit Web Web –Mai uşor / rapid / estetic decât Swing –Interfeţe complexe pentru aplicaţii grafice •Aplicaţii Web – applet-uri + Batik toolkit Tehnologii Tehnologii – Integrarea cu JavaScript – Performanţe mai bune pe termen lung – 3D prin SVG

Sergiu Dumitriu http://fenrir.info.uaic.ro/~sdumitriu 24 XBLXBL 2005/2006 2005/2006 • XML Binding Language • Definirea formei de prezentare şi a Web Web comportamentului interactiv pentru elemente dintr-un spaţiu de nume oarecare • XBL 1.0 – specificaţie Mozilla Tehnologii Tehnologii –Nerespectată • XBL 2.0 – specificaţie în curs de dezvoltare (W3C?) • Original pentru mapare XHTML

Sergiu Dumitriu http://fenrir.info.uaic.ro/~sdumitriu 25 sXBLsXBL 2005/2006 2005/2006 • W3C Working Draft (15 august 2005) Web Web • Subset al viitorului XBL 2.0, pentru mapare SVG • Nestandardizat, neimplementat Tehnologii Tehnologii •Asigură separarea datelor de prezentare • Şi de comportament! • Programare declarativă, independentă de arhitectură, OS, browser, WTK (teoretic)

Sergiu Dumitriu http://fenrir.info.uaic.ro/~sdumitriu 26 XBLXBL ++ SVGSVG 2005/2006 2005/2006 • XBL implementat de Firefox (~1.0) Web Web • SVG implementat de Firefox (1.1) •Funcţional • Combinat cu XHTML sau XUL Tehnologii Tehnologii • Exemplu

Sergiu Dumitriu http://fenrir.info.uaic.ro/~sdumitriu 27 UnelteUnelte 2005/2006 2005/2006 • Programming Toolkits Web Web – Apache Batik Toolkit – Java –SVG# & SVG.NET–.NET – Mozilla Gecko Tehnologii Tehnologii • Editoare – Din ce în ce mai multe editoare grafice vectoriale exportă SVG (unele şi importă) – Editoare native – Inkscape, Sodipodi, Sketsa

Sergiu Dumitriu http://fenrir.info.uaic.ro/~sdumitriu 28 AplicaAplicaţţiiii 2005/2006 2005/2006 • Foarte mult accent pe GIS Web Web • Sketsa • Slidemakers • SVG Widget Toolkits (Spark) Tehnologii Tehnologii • SVG Mobile – telefoane mobile • http://svg.org/special/svg_phones • ...

Sergiu Dumitriu http://fenrir.info.uaic.ro/~sdumitriu 29 ImplementImplementăăriri 2005/2006 2005/2006 • Adobe SVG Viewer – 3.0, 6.0 • Corel SVG Viewer – abandonat Web Web • Apache Batik – toolkit + viewer Java • Opera – 8.0 suport pentru SVG 1.1 Tiny – 9.0 suport pentru scripting Tehnologii Tehnologii • Mozilla Firefox – SVG 1.1 Full – în curs de finalizare • Renesis – SVG 1.2 Full, pentru Win, Linux, MacOS, WinCE, Linux Embedded – în curs de finalizare • , CSIRO, Ionic, Koala, Bitflash

Sergiu Dumitriu http://fenrir.info.uaic.ro/~sdumitriu 30 ConcluziiConcluzii 2005/2006 2005/2006 • SVG – grafică vectorială de înaltă calitate Web Web • Limbaj XML, sintaxă simplă • Apreciat de programatori şi Web Designeri • Suport mediu şi bun din partea firmelor Tehnologii Tehnologii software

Sergiu Dumitriu http://fenrir.info.uaic.ro/~sdumitriu 31