Scalable Vector Graphics Zvi Topol and Yossi Cohn

Download Report

Transcript Scalable Vector Graphics Zvi Topol and Yossi Cohn

Scalable Vector Graphics

Zvi Topol and Yossi Cohn

        

Outline

Introduction Vector Graphics vs Bitmap Graphics Graphic formats and motivation for SVG.

Data types and structural elements.

Text and Basic Shapes Transformations and Paths Animation Other SVG Features Demos 2

Introduction

    Graphics on the Web has many different uses: The WWW contains milliards of pages of data.

Graphics is an important tool to visualize that data (diagrams, illustrations, images, etc) Graphics is also a good means to convey messages: art, advertisements, campaigns It also can be used to create virtual environments and worlds - virtual shops, games, simulators. 3

Introduction(cont ’d)

  There are two main ways to represent graphics on the Web: Bitmapped Graphics - storing the RGB values of each pixel in the image.

Vector Graphics - storing the coordinates of each vectors and the colors in which they are rendered.

Bitmapped Graphics

    Bitmapped images are widely used over the Internet: attached to HTML documents using tag. Main formats: GIF, JPEG, BMP.

Represented in Binary format.

Image processing is done on server side and image is transferred as is to client.

Vector Graphics

    Uses of the power of transformations, coordinate systems, units and vector-based shapes.

Rendering is done on the client side - using local processing power.

Can be represented in both binary and text formats.

Can include Bitmap images 6

Vectors vs Bitmaps(1)

    Size : Vectors cost much less to represent than bitmaps. Example: a diagonal blue line on 640X480 window costs ~3000 bytes with a Bitmap. Same line using Vector Graphics ~20 bytes.

Bitmaps have problems with resolution and colors when viewed and printed on different kinds of screens and printers at different sizes. Transformations can be applied on vectors to solve this problem.

Vectors vs Bitmaps(2)

   Format representation - Bitmaps are binary files, vector based graphics can be represented as text files. Drawing instruction include text, and so are selectable and searchable. Links can be created to any part of a vector based image.

Flexibility - Vectors are much more flexibly to changes (transformations and different text styles).

Vectors vs Bitmaps(3)

   Animation is much simpler using vectors.

Accessibility to editing - easier to edit quickly a textual file than a binary file.

Interactivity – the ease of using scripts allows very good interactivity.

PNG 

Vectors vs Bitmaps(4)

SVG  10

  

Vector Graphics Formats

SVF - Simple Vector Format. Plug-in for CAD drawing representation - 1996. No more development after 1997. Limited, no animation. http://www.softsource.com/svf DWF - Drawing Web Format. Plug-in can be used with Javascript - but with no animation enabled. http://www.autodesk.com/whip/ Flash - Marcomedia’s Vector Graphics Format. The most up to date. Supports full multimedia features. Occupies about 70% of the market. http://www.macromedia.com/software/flash 11

Vector Graphics Formats(2)

   VML - Vector Markup Language - based 2D vector format by Microsoft - not developed after 1998. Limited to one single platform - Microsoft.

http://www.w3.org/TR/NOTE-VML WebCGM - computer graphics metafile for the Web - binary format. Primarily designed to visualize technical and scientific drawings. http://www.w3.org/Graphics/WebCGM VRML - Virtual Reality Modeling Language devoted to 3D, supports 2D as well - complicated for simple presentations. Http://www.web3d.org

Other Vector Graphics Tools

  2D APIs combined with ActiveX - limited to Microsoft platforms.

Java2D - binary program with graphical 2D output - inserted in web pages as applet - platform independent, but requires more than basic scripting programming skills.

Motivation for SVG

       Text based language.

Simple to program.

Takes advantage of existing tools - XML, CSS, XSL.

Powerful graphics capabilities - high performace, full animation support.

Open standard.

Extendable - MathML for instance.

Searchable.

SVG(1)

    SVG is a language for describing 2D vector and mixed vector/raster graphics in XML.

Developed by W3C organization.

Supported by Sun, Adobe and IBM.

Plug-in is required.

SVG(2)

 SVG specification is available in: http://www.w3.org/TR/2000/CR-SVG-20001102/  First draft released: 11/2/1999.

 Current status: Candidate Recommendation meaning that the specification is maturing and is now ready for more widespread implementation testing. 16

 

SVG – Concepts(1)

SVG stands for Scalable Vector Graphics In terms of graphics, scalable means not being limited to single, fixed units.

  In terms of Web scalable means that a particular technology can grow to a large number of files, a large number of users, a wide variety of applications. SVG, being a graphics technology for the Web, is scalable in both senses of the word 17



SVG – Concepts(2)

SVG graphics is scalable to different display resolutions and color spaces.

 The same SVG graphic can be placed at different sizes on the same Web page, and re-used at different sizes on different pages.

 SVG graphics can be magnified to see fine detail, or to aid those with low vision.

SVG Code example(1)

  Valid SVG document: 19

SVG Code example(2)

  Well formed SVG document:

 Can be used in conjunction with and elements to provide description and semantics about the group 26</p> <a id="p27"></a> <p></p> <h3>Grouping Element(2)</h3> <p>Each group can be given the id attribute for purposes of animation and re-usabilty.</p> <p> Any ‘g’ element can contain other ‘g’ elements nested within it to an arbitrary depth.</p> <p> Drawing element that is not contained in a ‘g’ element can be considered as a group of its own.</p> <p>27</p> <a id="p28"></a> <p></p> <h3>Another Example</h3> <p><?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg 20001102.dtd"> <svg width="5cm" height="5cm"> <desc>Two groups, each of two rectangles </desc> <g id="group1" style="fill:red"> <rect x="1cm" y="1cm" width="1cm" height="1cm" /> <rect x="3cm" y="1cm" width="1cm" height="1cm" /> </g> <g id="group2" style="fill:blue"> <rect x="1cm" y="3cm" width="1cm" height="1cm" /> <rect x="3cm" y="3cm" width="1cm" height="1cm" /> </g> </svg> 28</p> <a id="p29"></a> <p></p> <h3>The </h3> <p><i>defs</i></p> <h3>element(1)</h3> <p>The defs element is a container element for referenced elements.</p> <p> When SVG elements are drawn into a visual media, the <defs> is not drawn with them.</p> <p>29</p> <a id="p30"></a> <p></p> <h3>The </h3> <p><i>defs</i></p> <h3>element(2)</h3> <p><svg width="8cm" height="3cm"> <desc>Local URI references within ancestor's ‘defs’ element </desc> <defs> <linearGradient id="Gradient01"> <stop offset="20%" style="stop-color:#39F"/> <stop offset="90%" style="stop-color:#F3F"/> </linearGradient> </defs> <rect x="1cm" y="1cm" width="6cm" height="1cm" style="fill:url(#Gradient01)" /> </svg> 30</p> <a id="p31"></a> <p> </p> <h3>References in SVG</h3> <p>SVG supports two types of references: Local URI reference – the referenced object is found in the same document.  Non-Local URI reference – the referenced object is found in another document.</p> <p> The support of references in SVG makes use of Xlink, Xpointer and XML references.</p> <p>31</p> <a id="p32"></a> <p>  </p> <h3>The </h3> <p><i>use </i></p> <h3>element(1)</h3> <p>The <use>’s purpose is to reuse defined container elements like <svg> and <g> The 'use' element references another element and indicates that the graphical contents of that element is included/drawn at that given point in the document.</p> <p>The ‘use’ element cannot reference entire files.</p> <p>32</p> <a id="p33"></a> <p></p> <h3>The </h3> <p><i>use </i></p> <h3>element(2)</h3> <p>The 'use' element has the attributes x, y, width and height which are used to map the graphical contents of the referenced element onto a rectangular region within the current coordinate system.</p> <p> The effect of a 'use' element is as if the contents of the referenced element were deeply cloned into a separate non-exposed DOM tree which had the 'use' element as its parent and all of the 'use' element's ancestors as its higher-level ancestors. 33</p> <a id="p34"></a> <p></p> <h3>The </h3> <p><i>use </i></p> <h3>element(3)</h3> <p><svg width="10cm" height="3cm" viewBox="0 0 100 30"> <desc>Example Use01 - Simple case of 'use' on a 'rect'</desc> <defs> <rect id="MyRect" width=“5cm" height="1cm"/> </defs> <use x=“1cm" y="1cm" xlink:href="#MyRect" /> </svg> 34</p> <a id="p35"></a> <p></p> <h3>The </h3> <p><i>use </i></p> <h3>element(4)</h3> <p>The <use> element has an important advantage over a simple reference to an element:  It can apply transformations and style sheets over the used element by using the matching attributes of the ‘use’ element.</p> <p>35</p> <a id="p36"></a> <p></p> <h3>The image element(1)</h3> <p>The <image> indicates that the contents of a complete file are to be rendered into a given rectangle within the current user coordinate system  The <image> can refer to raster image files such as PNG or JPEG or to an SVG file.</p> <p> Main attributes: “x”, “y”, “width”, “height” and “xlink:href” 36</p> <a id="p37"></a> <p></p> <h3>The image element(2)</h3> <p>If <image> references a raster image, then the raster image is fitted into the region specified by the x, y, width and height attributes such that the top/left corner of the raster image exactly aligns with coordinate (x,y), and the bottom/right corner of the raster image exactly aligns with coordinate (x+width,y+height).  When <image> references an SVG file, then the 'image' element establishes a new viewport specified by x,y,width,height.</p> <p>37</p> <a id="p38"></a> <p></p> <h3>The image element(3)</h3> <p>Unlike <use>, <image> cannot reference elements inside the SVG document.</p> <p> One can apply transformations and styles to the <image> element through the matching attributes.</p> <p>38</p> <a id="p39"></a> <p></p> <h3>The </h3> <p><i>text </i></p> <h3>element</h3> <p><text> is used to specify text that is rendered with other graphical elements.</p> <p> This means that we can apply transformation, clipping, masking, and so to text.</p> <p> Fonts are as specified in CSS2.</p> <p>39</p> <a id="p40"></a> <h3><text> example</h3> <p><?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg 20001102.dtd"> <svg width="10cm" height="3cm"> <desc>Example text01 - 'Hello, out there' in blue</desc> <text x="2.5cm" y="1.5cm" style="font-family:Verdana; font size:16pt; fill:blue"> Hello, out there </text> </svg> 40</p> <a id="p41"></a> <p></p> <h3>Basic Shapes supported</h3> <p>All basic shapes in SVG are represented as elements, with attributes corresponding to the shape.</p> <p> <rect> , <circle>, <ellipse>, <line>.  <polyline> - defines a set of connected straight lines.</p> <p> <polygon> - defines a closed shape consisting of a set of connected straight line segments.</p> <p> Each shape can be stroked, filled and transformed.</p> <p>41</p> <a id="p42"></a> <p></p> <h3>Rendering Model(1)</h3> <p>SVG content is painted on to a canvas : 2D infinite plain.  Rendering occurs relative to a finite rectangular region of the canvas.</p> <p> This Region is called SVG Viewport.</p> <p> The size of the Viewport (its height and width) is defined as attributes inside the <svg> element.</p> <p>42</p> <a id="p43"></a> <p></p> <h3>Rendering Model(2)</h3> <p>Examples of viewports: 300x200 view port: 150x200 viewport: 43</p> <a id="p44"></a> <p></p> <h3>Rendering Model(3)</h3> <p>SVG uses a "painters model" of rendering: Paint is applied in successive operations to the output device - when the area overlaps a previously painted area the new paint partially or completely obscures the old.</p> <p> Rendering order: First Comes First Painted  Support for 3 types of graphical elements: Shapes, Text, Raster images.</p> <p>44</p> <a id="p45"></a> <p></p> <h3>Coordinate Systems</h3> <p>There are two coordinate systems in SVG:  Viewport coordinate system – positive integer numbers representing pixels.</p> <p> User coordinate system – real numbers, this is the coordinate system as the user sees it.</p> <p> Usually the origin of both coordinate systems are identical and each pixel in the viewport is mapped to one unit in user coordinate system.</p> <p> The </p> <p><i>viewbox </i></p> <p>attribute can be used to change this mapping.</p> <p>45</p> <a id="p46"></a> <p></p> <h3>Transformations(1)</h3> <p>A new user coordinate system can be established by specifying transformations in the form of a </p> <p><i>transform</i></p> <p>attribute on a group of graphical elements.</p> <p> The transform attribute transforms all user space coordinates and lengths on the given element and all of its ancestors.</p> <p> Transformations maybe nested and so have cummulative effect.</p> <p>46</p> <a id="p47"></a> <p></p> <h3>Transformations(2)</h3> <p>2D transformations are represented using 3X3 matrices.</p> <p> Common transformations: translate(x,y) establish a new coordinate system whose origin is at (x,y).</p> <p>rotate(a) – rotates the coordinate system by a degrees around the origin.</p> <p>scale(a,b) – scales the coordinate system – x axis by a and y axis by b.</p> <p>47</p> <a id="p48"></a> <p></p> <h3>Transformations(3)</h3> <p>Translation Matrix:  Rotation Matrix:  Scaling Matrix: 48</p> <a id="p49"></a> <h3>Transformations(4)</h3> <p>49</p> <a id="p50"></a> <p></p> <h3>Transformations(5)</h3> <p>SVG allows both to apply transformations as translate, rotate, scale or to apply a detailed transformation matrix.</p> <p> Transformations in SVG are applied by the ‘transform’ element.</p> <p>50</p> <a id="p51"></a> <p></p> <h3>Paths(1)</h3> <p>Paths represent the outline of a shape which can be filled, stroked, used as a clipping path, or any combination of the three.</p> <p> Paths are described by a set of points.</p> <p> The geometry of the path is defined in terms of </p> <p><i>moveto, lineto, curveto, arc, </i></p> <p>and</p> <p><i>closepath.</i></p> <p> Path is represented in SVG by the ‘path’ element.</p> <p>51</p> <a id="p52"></a> <p></p> <h3>Paths(2)</h3> <p><svg width="4cm" height="4cm" viewBox="0 0 400 400"> <title>Example triangle01- simple example of a 'path' A path that draws a rectangle 52



Animation(1)

SVG supports the ability to change vector graphics over time.

 There are 2 main ways for animating SVG content:  Through SVG animation elements.

 By access to the SVG DOM.

Animation(2)

 SVG is a host language in terms of SMIL Animation and therefore introduces additional constraints and features as permitted by that specification.  It also introduces new extensions compatible with SMIL.

 

Animation Elements

Main animation elements in SVG: ‘animate’ , ‘set’, ‘animateMotion’, ‘animateColor’, ‘animateTransform’.

 Animation introduces the time dimension to the document.

 Time notion in SVG:

document begin, document end.

(When

More SVG Features

 Gradients  Scripting (using scripting languages to handle various events).

 Filter effects (Lighting, Color spaces, etc..).

 Clipping and masking (alpha values).

Linear Gradient:

Examples(1)

Radial Gradient: 57

Filter effects:

Examples(2)

Map Example Moscow Map Example

Demos

Animated Filter Effect 59



Tools for SVG authoring

CSIRO SVG Toolkit : http://sis.cmis.csiro.au/svg/index.html

Corel Draw 10: http://www.corel.com/ PhotoShop http://www.adobe.com/  Various Converters from Other graphical formats to SVG.



Other related W3C groups

SMIL – Synchronized Multimedia Integration Language.

 WIA – Web Accessibility Initiative.