SVG. Scalable Vector Graphics. 070-SVG: 1 HKU ICOM Multimedia Computing Dr. YIP Chi Lap

Transcription

1 SVG Scalable Vector Graphics 070-SVG: 1

2 SVG SVG: Scalable Vector Graphics A language for describing two-dimensional vector and mixed vector/raster graphics in XML Have profiles for display on mobile phones (SVG Tiny), PDAs (SVG Basic), print (SVG Print), and web browsers Version 1.0 is a W3C recommendation at Version 1.1 is a W3C recommendation at ( 700 pages!) Version 1.2 is a working draft published at SVG: 2

3 SVG: new?! Following discussions are mainly based on SVG 1.0 SVG implementation maturities varies a lot. What s allowed in the specification may not be playable in SVG players in practice. 3GPP platforms often support SVG Always check the specification if you have problems 070-SVG: 3

4 SVG: an overview A language for describing two-dimensional graphics in XML Allows for three types of graphics objects: vector graphic shapes (e.g., paths consisting of straight lines and curves) images text 070-SVG: 4

5 SVG: features Allows manipulation of graphical objects: grouping styling transformation composition Features include: nested transformations clipping paths alpha masks filter effects template objects 070-SVG: 5

6 SVG: design goals SVG stands for Scalable Vector Graphics, an XML grammar for stylable graphics, usable as an XML Namespace Scalable Graphics: not limited to a single fixed pixel size Web: the technology can grow to a large number of files, a large number of users, and a wide variety of applications 070-SVG: 6

7 SVG: more design goals Vector: contain geometric objects such as lines and curves, rather than just a collection of pixels Integration of raster graphic images Client-side rasterization of graphic images Provide raster filter effects Graphics: provide rich, structured description of vector and mixed vector/raster graphics 070-SVG: 7

8 SVG: even more design goals XML: open to implementation without a huge reverse engineering effort Namespace: can be used as one component in a multi-namespace XML application Stylable: use of style sheets for presentation control, flexibility, faster download, and improved maintenance 070-SVG: 8

9 SVG: issues Rendering model Basic data types and interfaces Document structure Styling Coordinate systems, transformation, units Paths Basic shapes Text Painting: filling, stroking, marker symbols Color Gradients and patterns 070-SVG: 9

10 SVG: more issues of concern Clipping, masking, compositing Filter effects Interactivity Linking Scripting Animation Fonts Metadata Backward compatibility Extensibility 070-SVG: 10

11 SVG document: the basic structure <svg> <!-- Possible child elements: desc, title, metadata, defs, path, text, rect, circle, ellipse, line, polyline, polygon, use, image, svg, g, view, switch, a, altglyphdef, script, style, symbol, marker, clippath, mask, lineargradient, radialgradient, pattern, filter, cursor, font, animate, set, animatemotion, animatecolor, animatetransform, color-profile, font-face --> </svg> 070-SVG: 11

12 SVG elements Element desc title g defs symbol use switch Description Text description of an element Text title of an element Container, group elements together Container for referenced elements Define graphical template objects Reuse a template object Conditional processing 070-SVG: 12

13 Graphic elements and basic shapes Element image path marker cursor rect circle ellipse line polyline polygon Description Image (support PNG, JPEG, SVG at least) Outline of a shape Markers, arrowheads, etc. Defines a platform-independent cursor Rectangle, may have rounded corners Circle Ellipse Straight line A set of connected straight lines A close shape made by a set of connected straight lines 070-SVG: 13

14 Rendering-related elements Element style transform color-profile lineargradient radialgradient stop pattern mask clippath Description Embedded style sheet Transformation operations Specifies rendering intent (auto, perceptual, saturation, relative-colorimetric, absolute-colorimetric) Linear gradient for referencing Radial gradient for referencing Defines gradient stop Defines a fill or stroke pattern Defines a mask for compositing Defines a clipping path 070-SVG: 14

15 filter element and its primitives Element filter feflood feturbulence feimage feoffset feconvolvematrix fegaussianblur femorphology fetile fedisplacementmap Description Defines filter primitives (blurring, etc.) Creates rectangle with specified color and opacity Creates image using Perlin turbulence function, allows generation of cloud or marble texture Refers to graphic external to this filter element Offset input image relative to its current position Convolution filter matrix Gaussian blur Morphological operations (erode, dilate) Fills a target rectange with a repeated pattern Spatially displace image pixels 070-SVG: 15

16 Filter: lighting related elements Element fedistantlight, fepointlight, fespotlight fediffuselighting fespecularlighting Description Distant light source Point source of light Spotlight Image opaque, alpha=1 everywhere Image opacity based on light color 070-SVG: 16

17 Filter: blending and color manipulation Element feblend fecomposite femerge femergenode fecolormatrix fecomponenttransfer fefuncr fefuncg fefuncb fefunca Description Composites images using common blending modes (normal, multiply, screen, darken, lighten) Combines images pixel-wise using operations over, in, out, atop, xor, arithematic Merge input image layers Specifies inputs to femerge Apply color matrix transformation Maps color and alpha componentwise Transfer function for the red component Transfer function for the green component Transfer function for the blue component Transfer function for the alpha component 070-SVG: 17

18 Time-related manipulation Element animate set animatemotion animatecolor animatetransform mpath Description Assign scalar values differently at different times Shorthand for animate for assigning nonnumeric values Moves an element along a motion path Modifies a color value over time Modifies transformation attributes over time Defines a motion path by referencing a path 070-SVG: 18

19 Text and font-related elements Element text tspan tref textpath altglyph altglyphdef altglyphitem glyphref font glyph missing-glyph hkern vkern font-face Description Text Adjust text and font properties within text Referenced text Render text along a user-defined path Specifies alternate glyph for text rendering Defines a set of possible glyph substitutions Defines a candidate set of possible glyph substitutions References a glyph in a particular font Defines a font Defines the graphics for a given glyph Defines graphics to use for missing glyphs Horizontally-oriented glyph kerning pair definition Vertically-oriented glyph kerning pair definition Describes font faces (family, style, weight, etc.) 070-SVG: 19

20 Links, active elements and others Element a view script metadata foreignobject Description Linking out of SVG content Define area for linking into SVG content Allows scripting Structured data about data Allow inclusion of a foreign namespace whose graphical content is drawn 070-SVG: 20

21 SVG: discussions Are there similar technologies for Web-based graphics? Are there similar technologies for printed graphics? Why SVG? Why does SVG not cover 3D graphics? 4D? How does the complexity of the SVG specification affect its adoption? 070-SVG: 21

22 SVG: even more discussions Is it possible to specify the followings using SVG? The graphics of a smiley An animation showing a ball moving from left to right An animation with text caption An animation with music accompaniment A Flash movie How to integrate SVG-based graphics and animations with other media types? 070-SVG: 22

23 Next: SMIL 070-SVG: 23