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 Sergiu Dumitriu Tehnologii Web 2005/2006 http://fenrir.info.uaic.ro/~sdumitriu 6 SVGSVG esteeste XMLXML 2005/2006 2005/2006 • Sintaxa XML <?xml version="1.0"?> Web Web <svg xmlns="http://www.w3.org/2000/svg"> <title>Un desen</title> <circle cx="100"cy="100px"r="20cm"/> Tehnologii Tehnologii <line x1="20em"y1="20%"x2="50"y2="20"/> </svg> 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, xml: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 Sergiu Dumitriu Tehnologii Web 2005/2006 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 <defs> <radialGradient id="rubyGradient" gradientUnits="userSpaceOnUse" cx="100" cy="100" r="90" fx="110" fy="110"> Web Web <stop offset="0%" stop-color="#B51010"/> <stop offset="95%" stop-color="#000"/> </radialGradient> ... </defs> Tehnologii Tehnologii … <g id=“ruby”> <circle r="70" cx="100" cy="100" fill="url(#rubyGradient)" stroke="url(#goldGradient)" stroke-width="15"/> … </g> … 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 <filter id="embossFilter" filterUnits="userSpaceOnUse" x="90" width="180" 2005/2006 2005/2006 y="275" height="225"> <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/> Web Web <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/> <feSpecularLighting in="blur" surfaceScale="5" specularConstant="0.6" specularExponent="10" lighting-color="white" result="specOut"> <fePointLight x="-5000" y="-10000" z="20000"/> </feSpecularLighting> <feComposite in="specOut" in2="SourceAlpha" operator="in" Tehnologii Tehnologii result="specOut"/> <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litPaint"/> <feMerge> <feMergeNode in="offsetBlur"/> <feMergeNode in="litPaint"/> </feMerge> </filter> Sergiu Dumitriu http://fenrir.info.uaic.ro/~sdumitriu 17 Sergiu Dumitriu Tehnologii Web 2005/2006 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 <mask> – 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