SVG SVG

(1)

TehnologiiTehnologiiWebWeb2005/20062005/2006

SVG SVG – – Scalable Scalable Vector Vector Graphics

Graphics

http://www.w3.org/Graphics/SVG/

(2)

“Things to watch: SVG - Scalable Vector Graphics - at last, graphics which can be rendered optimally on all sizes of device”

Tim Berners-Lee

(3)

Cuprins Cuprins

• SVG – format scalabil de grafică vectorială

• CSS + XSL

• Efecte speciale

• Animaţii

• Programare

• sXBL / XBL + SVG

• Unelte

• Aplicaţii

• Implementări

(4)

• Limbaj standardizat de Consorţiul Web

• Grafică 2D vectorială

• Suport pentru efecte şi animaţii

• Interactivitate

• Sintaxă XML

• Specificaţie, nu implementare

(5)

Grafică vectorială Grafică vectorială

• 2 tipuri de imagini

– Raster (lossless, lossy) – Vectorial (2D, 3D)

• Formatul vectorial

– Redimensionabil

– Independent de rezoluţie

– Dimensiunea fişierului nu este proporţională cu dimensiunea imaginii

(6)

(7)

SVG este XML SVG este XML

• Sintaxa XML

<?xml version="1.0"?>

<svg xmlns="http://www.w3.org/2000/svg">

<title>Un desen</title>

<circle cx="100" cy="100px" r="20cm"/>

<line x1="20em" y1="20%" x2="50" y2="20"/>

</svg>

(8)

SVG SVG este este XML XML

• Namespaces – XHTML, RDF, XLink

• Infoset

• XSL

• CSS

• DOM, SAX

• XBL

• Generare facilă server-side

• Resurse externe

(9)

Sintaxa SVG

Sintaxa SVG - - elemente elemente

• Definiţie modulară – elemente:

– Structure – svg, g, defs, desc, title, use – Conditional Processing – switch

– Image

– Shape – path, rect, line, circle, ellipse, polyline – Text – text, tspan, tref, textPath, altGlyph

– Marker

– Gradient – linearGradient, radialGradient, stop – Pattern

– Clip – Mask

– Filter –feBlend, feDistantLight, feGaussianBlur...

(10)

Sintaxa SVG

Sintaxa SVG - - atribute atribute

• Definiţie modulară – atribute:

– Core – id, xml:base, xml:lang, xml:space – Viewport – clip, overflow

– Paint – color, fill, stroke...

– Opacity – opacity, stroke-opacity, fill-opacity – Graphics – display, visibility, pointer-events...

– DocumentEvents – onunload, onzoom, onscroll...

– GraphicalEvents – onfocusin, onclick, onmouseout...

– AnimationEvents – onbegin, onend, onrepeat

(11)

Sintaxa SVG

Sintaxa SVG - - extra extra

• Alte module:

– Cursor

– Hyperlink

– XLink attributes

– ExternalResourcesRequired – View

– Script – Style

– Animation – Font

– Extensibility – Color-profile

(12)

Foi de stiluri Foi de stiluri

• Stil intern – atributul style

• Stil intern – elementul style

• Foi de stiluri CSS externe

– Proprietăţile standard CSS – Proprietăţi specifice SVG – Atributul class

• Transformări XSLT

– Ca orice fişier XML – restilizare

(13)

(14)

Efecte speciale

Efecte speciale – – gradien gradien ţ ţ i i

• Tranziţii continue de culoare

• Liniari sau radiali

• Pentru fill, dar şi pentru stroke

• Oricâte puncte de oprire

– Culoare – Opacitate

– Redefinibile prin CSS

(15)

Efecte speciale

Efecte speciale – – gradien gradien ţ ţ i i

...

<defs>

<radialGradient id="rubyGradient" gradientUnits="userSpaceOnUse"

cx="100" cy="100" r="90" fx="110" fy="110">

<stop offset="0%" stop-color="#B51010"/>

<stop offset="95%" stop-color="#000"/>

</radialGradient>

...

</defs>

…

<g id=“ruby”>

<circle r="70" cx="100" cy="100" fill="url(#rubyGradient)"

stroke="url(#goldGradient)" stroke-width="15"/>

…

</g>

…

(16)

Efecte speciale

Efecte speciale – – filtre filtre

• Transformări matriceale asupra conţinutului grafic generat

• Majoritatea efectelor incluse în aplicaţiile desktop pentru grafică raster

– Blurs, lighs, composition, flood, offset, turbulence – Any user defined matrix

• 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

(17)

Efecte speciale

Efecte speciale – – filtre filtre

<filter id="embossFilter" filterUnits="userSpaceOnUse" x="90" width="180"

y="275" height="225">

<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>

<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"

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>

(18)

(19)

Efete speciale

Efete speciale – – clip, clip, mask mask

• Clipping – tăierea unui set de elemente SVG după o formă prestabilită

– Forme sau text

– Static sau dinamic

• Masking – Opacitatea unui set de

elemente este influenţată de opacitatea elementelor dintr-un container <mask>

– Generalizează conceptul de clipping

(20)

Anima

Anima ţ ţ ii ii – – SMIL SMIL

• SMIL – specificaţie W3C pentru definirea declarativă a sincronizării animaţiilor şi a clipurilor multimedia

– Synchronized Multimedia Integration Language

• SVG utilizează un subset SMIL pentru declararea animaţiilor

– 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

(21)

Anima

Anima ţ ţ ii ii – – SVGOM SVGOM

• Sunt modificabile proprietăţile

elementelor din arborele DOM ataşat fişierului SVG

– DOM Core – setAttribute(attr, value) – DOM Style – element.style.attr = value – SVGOM – element.attr = value

• Asemănător DHTML

• Funcţii reapelate – setTimeout, setInterval

– Javascript SMIL Library

(22)

Programare

Programare - - SVGOM SVGOM

• Pentru SVG s-a definit un superset de interfeţe DOM – SVG Object Model

• SVG 1.1 – extinde DOM L2 Core

– Asemănător DOM L2 HTML

• Extinde şi DOM L2 Style pentru a include proprietăţile CSS specifice SVG

• SVGOM – o colecţie de interfeţe IDL

(23)

Programare

Programare – – JavaScript JavaScript

• ECMAScript + DOM Core + SVGOM + DOM Style + DOM Events

• E4X? XML Events? DOM Views? DOM Load and Save?

• Animaţii

• Interactivitate

• SVG + AJAX

• SVG pentru interfeţele aplicaţiilor

(24)

Programare

Programare – – Java Java

• Aplicaţii Desktop – JDK + Batik toolkit

– Mai uşor / rapid / estetic decât Swing

– Interfeţe complexe pentru aplicaţii grafice

• Aplicaţii Web – applet-uri + Batik toolkit

– Integrarea cu JavaScript

– Performanţe mai bune pe termen lung – 3D prin SVG

(25)

XBL XBL

• XML Binding Language

• Definirea formei de prezentare şi a

comportamentului interactiv pentru elemente dintr-un spaţiu de nume oarecare

• XBL 1.0 – specificaţie Mozilla

– Nerespectată

• XBL 2.0 – specificaţie în curs de dezvoltare (W3C?)

• Original pentru mapare XHTML

(26)

sXBL sXBL

• W3C Working Draft (15 august 2005)

• Subset al viitorului XBL 2.0, pentru mapare SVG

• Nestandardizat, neimplementat

• Asigură separarea datelor de prezentare

• Şi de comportament!

• Programare declarativă, independentă de

arhitectură, OS, browser, WTK (teoretic)

(27)

XBL + SVG XBL + SVG

• XBL implementat de Firefox (~1.0)

• SVG implementat de Firefox (1.1)

• Funcţional

• Combinat cu XHTML sau XUL

• Exemplu

(28)

Unelte Unelte

• Programming Toolkits

– Apache Batik Toolkit – Java – SVG# & SVG.NET– .NET – Mozilla Gecko

• Editoare

– Din ce în ce mai multe editoare grafice vectoriale exportă SVG (unele şi importă)

– Editoare native – Inkscape, Sodipodi, Sketsa

(29)

Aplica

Aplica ţ ţ ii ii

• Foarte mult accent pe GIS

• Sketsa

• Slidemakers

• SVG Widget Toolkits (Spark)

• SVG Mobile – telefoane mobile

• http://svg.org/special/svg_phones

• ...

(30)

Implementări Implementări

• Adobe SVG Viewer – 3.0, 6.0

• Corel SVG Viewer – abandonat

• Apache Batik – toolkit + viewer Java

• Opera – 8.0 suport pentru SVG 1.1 Tiny

– 9.0 suport pentru scripting

• 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

(31)