SCALABLE VECTOR GRAPHICS

Transcription

1 SCALABLE VECTOR GRAPHICS

2 VECTOR GRAPHICS? Contrary to raster/bitmap images (pixel description) Graphics are described using mathematical/geometrical primitives 2D objects: lines, curves, circles, rectangles, text or 3D equivalent: meshes, nurbs, spheres, Better suited for simple geometrical shapes, not for natural images, and when the scene is not complex Formats: SVG, VML, AI, PS, PDF, Flash Properties: Can be scaled without pixel artifacts Trade-oᇈ image quality vs. rendering cost (Client-side rendering vs. server-side rendering)

3 VECTOR GRAPHICS PROPERTIES ZOOMABILITY Source: wikipedia.org

4 VECTOR GRAPHICS PROPERTIES SCALABILITY Total PNG 25x37 / 1,55 Ko 5x75 / 3,89 Ko 1x15 / 9,89 Ko 15,33 Ko SVG - any resolution - 5,93 Ko SVGZ - any resolution - 1,54 Ko

5 Initial ecosystem: HTML 4.1: 1999 CSS 1. (2nd ed.): 1996 XML 1. (2nd ed.): 1998 SVG A BIT OF HISTORY Initial competing technologies: VML (Microsoft) and PGML (Adobe) SVG 1. (21) SVG 1.1 (211) New ecosystem: tight integration with HTML 5 CSS 3 SVG 2 (216, Candidate Recommendation)

6 WHAT IS SVG? XML standard for 2D Vector Graphics - Including text & fonts - With speciᇈc drawing, layout, positioning rules With support for: - Styling (using CSS), - Animations (using JavaScript or SMIL), - Scripting (using JavaScript) - Interactivity (using JavaScript & DOM Events), - Raster images (PNG, JPG) - Multimedia (audio, video) Examples SVG WoW Snap SVG animations

7 Textual vs. binary Easier to hand write Larger ᇈle size if not compressed Easier to search, crawl, index Better Accessibilty Native vs. Plugin Ability to translate text in a page Easier to style Easier to script Easier to integrate with HTML SVG VS. FLASH

8 SVG BENEFITS/DRAWBACKS FROM XML Beneᇈt: SVG documents can be handled by generic XML tools Syntax veriᇈcation, validation Modiᇈcation using JS/DOM Transformations using XSLT Drawback: Verbose Some attributes are hard to read XML requires diᇈcult syntax (simpliᇈcations in SVG 2)

9 SVG BASIC EXAMPLE <svg xmlns=" viewbox=" 5 6" version="1.1"> <rect x="1" y="1" width="4" height="2" fill="yellow" stroke="black" stroke width="3"/> <rect x="1" y="35" rx="1" ry="5" width="4" height="2" fill="salmon" stroke="black" stroke width="3"/> <circle cx="1" cy="1" r="8" fill="orange" stroke="navy" stroke width="1"/> </svg>

10 SVG EXAMPLE WITH GROUP <svg xmlns=" viewbox=" 5 6" version="1.1"> <rect x="1" y="1" width="4" height="2" fill="yellow" stroke="black" stroke width="3"/> <g> <rect x="1" y="35" rx="1" ry="5" width="4" height="2" fill="salmon" stroke="black" stroke width="3"/> <circle cx="1" cy="1" r="8" fill="orange" stroke="navy" stroke width="1"/> </g> </svg>

11 Internet Media Type (a.k.a. MIME Type) image/svg+xml File Extensions:.svg.svgz when compressed using GZIP SVG FILES

12 AUTHORING TOOLS Your favorite text editor! Commercial tools Adobe: Illustrator, EdgeCode, Edge Animate, Dreamweaver Microsoft: Visio CorelDraw Open Source Software Inkscape (GUI editor, Free, Open Source) SVG Edit (editor in the browser) Flash to SVG/HTML5 Converters Google Swiᇈy Mozilla Shumway SVG Cleaners Inkscape: Save as «Plain» or «Optimized» SVG Scripts for cleaning: scour,

13 BASIC SHAPES Graphical Primitives <rect> - Anchored on its top left corner (x, y) - Possible rounded corners (rx, ry) <circle> <ellipse> - Anchored on its center Point/Coordinate-based primitives - <line>, <polygon>, <polyline> - <path> : complex curves

14 Line segments Bézier Curves Cubic (C) Cubic Symetrical (S) Quadratic (Q) Quadratic Symetrical (T) SVG CURVES Catmull-Rom Curves (in SVG 2) Dotty.svg

15 Start-point, end-point + arc parameter SVG ARCS

16 SVG PATH

17 SVG uses speciᇈc elements for text Diᇈerent from HTML - No ᇈowing text - No paragraph Graphical primitives as others - Can be ᇈlled, stroked, TEXT IN SVG SVG Text elements <text> - Renders characters on a single line <tspan> - Used to change the style of some characters on a line With additional CSS text properties - font size, <textpath> - Draws a text along a path (ex: legend on a river)

18 VIEWING SVG GRAPHICS: VOCABULARY

19 POSITIONING SVG: COORDINATE SYSTEMS SVG Canvas Coordinate System X-axis right-wards, Y-axis downward Origin usually corresponding to the top-left corner of the viewbox Local Coordinate Systems Origin: typically top-left or center of a shape Intermediate Coordinate Systems Transformation of a local coordinate system using <g> elements Units for positioning and transformations Default arbitrary unit - Mapped to physical units based on viewbox - Possible to use units from CSS: cm, px, em, No precision limit

20 EXAMPLE OF LOCAL COORDINATE SYSTEMS Graphics <path stroke="black"d="m 1 1 L 2 2"/> Text <text x="" y="1" font size="8 fill="red >Doing text</text>

21 SVG & CSS TRANSFORMATIONS Initially deᇈned in SVG 1.1 Now jointly developed with CSS - Also applicable to HTML elements Basic 2D Concepts Representation of an aᇈne transformation of 2D coordinates using a 3x3 matrix Matrix is speciᇈed using the transform attribute: - Some shortcut for scale, rotate, translate, skewx, skewy - Possibility to use a diᇈerent origin for transformation using transform origin Matrices can be speciᇈed at diᇈerent level in the graphics tree (equivalent to matrix multiplication) CSS Transformations (2D/3D) Apply transformation matrix to an element - Same principle as SVG transforms Selected using CSS Selectors Declare using CSS syntax

22 SVG & CSS TRANSFORMATION EXAMPLE <svg xmlns=" <g transform="translate(1, 1)"> <! equivalent to matrix(1,,, 1, 1, 1 <rect width="1" height="1" fill="blue" /> </g> </svg> <svg xmlns=" <style>.container { transform: translate(1px, 1px); } </style> <g class="container"> <rect width="1" height="1" fill="blue" /> </g> </svg>

23 SVG RENDERING MODEL Individual graphical element rendering Drawing operations in order - Fill then stroke (or stroke then ᇈll), using the paint-order attribute - Then markers - Then ᇈlters - Then clip - Then mask Then group rendering (a.k.a. compositing, blending,...)

24 FILLING PROPERTIES fill A uniform/solid color - srgb color space or ICC color proᇈle - Extensions in SVG 2 Color Module - Syntax: rgb(int[ 255], int[ 255], int[ 255 rgb([ 1]%, [ 1]%, [ 1]%); black, white A linear or radial gradient - Also used in CSS - Extensions to Gradient Meshes in SVG 2 A pattern - Extensions to hatches in SVG 2 fill opacity Transparency used for alpha-blending fill rule When a graphical primitive selfintersects

25 stroke Same syntax/values as fill including gradients, pattern, stroke opacity Same as ᇈll-opacity but only on the stroke - Can be combined stroke width Centered around the mathematical/geometrical outline New attribute in SVG 2. to control the position of the stroke stroke dasharray stroke dashoffset stroke linejoin stroke linecap STROKING PROPERTIES

26 SVG MARKERS Draws a symbol at some speciᇈc locations of a given graphical primitive Initially for point-based graphical primitives (path, line, polygon ) - Extended to all primitives (rect, circle, ) in SVG 2. Initially at speciᇈc positions: start, end, middle - To be extended to any position (%)

27 SVG & CSS CLIPPING AND MASKING Initially deᇈned in SVG 1.1 Now jointly developed with CSS - Also applicable to HTML elements Goals Clipping: cut parts of graphics or images out Masking: progressively show parts of graphics or images Attribute/properties: clip path clip rule mask opacity Element: clippath

28 CLIPPING AND MASKING EXAMPLES

29 MASKING SYNTAX <radialgradient id="gradient1" > <stop offset="." stop color="black"/> <stop offset=".5" stop color="white"/> <stop offset="1" stop color="black"/> </radialgradient> <mask id="ma"> <ellipse cx="5%" cy="39%" rx="2%" ry="25%" fill="url(#gradient1)"/> </mask> <image xlink:href='image.jpg' y="1%" x="26%" width="5%" height="65%" mask="url(#m

30 CLIPPING SYNTAX <rect x="322" y="" height="2" width="2" fill="url(#g)"/> <clippath id="cp"> <ellipse cx="335" cy="25" rx="7" ry="25"/> <ellipse cx="335" cy="8" rx="9" ry="25"/> <path d="m A M A " clip rule </clippath> <image xlink:href='image.jpg' y="" x="2" width="35%" height="4%" clip path="url

31 Initially deᇈned in SVG 1.1 Now jointly developed with CSS - Applicable to HTML elements SVG & CSS FILTERS Goal Advanced manipulations of graphics at the pixel level after/during rasterizing (Photoshop-like eᇈects) Ex: Blur, Color manipulations, image manipulations Elements <filter> containing a sequence of ᇈlter primitives: - feblend, feflood, fecolormatrix, fecomponenttransfer, fecomposite, feconvolvematrix, fecustom, fediffuselighting, fedisplacementmap, fedropshadow, fegaussianblur, feimage, femerge, femorphology, feoffset, fespecularlighting, fetile, feturbulence, feunsharpmask Attributes enable background, filter, flood color, flood opacity, lighting color

32 <filter id="a"> <fegaussianblurstddeviation="1"/> </filter> <rect x="42%" y="1%" width="16%" height="25%" fill="white" filter="url(#a)" /> FILTER EXAMPLE (1)

33 FILTER EXAMPLES <filter id="edge"> <feconvolvematrixorder="3" kernelmatrix=" " /> </filter> <image x="465" xlink:href="p17.jpg" width="15" height="175" filter="url(#edge)" /> Demo:

34 USING SVG WITH OTHER WEB STANDARDS SVG in HTML HTML in SVG SVG with CSS SVG with JavaScript

35 SVG IN HTML Older versions of browsers: <embed>, <object> Latest version: <html> <body> <div> <img src="image.svg"> <! no interactivity, javascript > <iframe src="triangle.svg" width="5" height="5" > <! separate javascript <! same javascript > <svg xmlns=" width="8px" height="6px" viewbox=" 8 6"> </svg> </div> </body> </html>

36 Use of SVG <foreignobject> element HTML IN SVG <svg xmlns=" width="8px" height="6px" viewbox=" 8 6"> <foreignobject width="1" height="1"> <body xmlns=" <p> </p> </body> </foreignobject> </svg>

37 div { background image: url(test.svg); } SVG IN CSS STYLING WITH SVG Background images

38 CSS IN SVG STYLING SVG Like in HTML using <style> elements using style attributes using the XML <?xml stylesheet?> processing instruction <?xml version="1." standalone="no"?> <?xml stylesheet type="text/css" href="style.css"?> <svg xmlns=" version="1.1" width=".." height=".." viewbo <! SVG content > </svg>

39 Canvas VECTOR GRAPHICS & JAVASCRIPT functiondrawpicture(){ var canvas= document.getelementbyid('example'); var context=canvas.getcontext('2d'); context.fillstyle="rgb(,255,)"; context.fillrect (25, 25, 1, 1); context.fillstyle="rgba(255,,,.6)"; context.beginpath(); context.arc(125,1,5,,math.pi*2,true); context.fill(); context.fillstyle="rgba(,,255,.6)"; context.beginpath(); context.moveto(125,1); context.lineto(175,5); context.lineto(225,15); context.fill(); } Canvas vs. SVG or Canvas + SVG Rendering performances Rendering quality: Anti-aliasing

40 SVG-based framework D3.js Raphael.js Processing.js SVGWeb Snap SVG Canvas-based Frameworks Canvg Fabric.js JAVASCRIPT FRAMEWORKS

41 LINKS OpenStreetMaphttp://openstreetmap.fr/ OpenClipArthttp://openclipart.org/