SVG

1. SVG Scalable Vector Graphics Example 11-19

2. SVG • Scalable. In terms of graphics, scalable means not being limited to a single, fixed, pixel size. 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 • Vector. Vector graphics contain geometric objects such as lines and curves. SVG gives control over the rasterisation process. SVG also provides client-side raster filter effects. • Graphics. SVG fills a gap in the market by providing a rich, structured description of vector and mixed vector/raster graphics; it can be used standalone, or as an XML namespace with other grammars.

4. Introduction • SVG is a language for describing two-dimensional graphics in XML. SVG allows for three types of graphic objects: vector graphic shapes (e.g., paths consisting of straight lines and curves), images and text. Graphical objects can be grouped, styled, transformed and composted into previously rendered objects. The feature set includes nested transformations, clipping paths, alpha masks, filter effects and template objects.

5. Introduction • SVG drawings can be interactive and dynamic. Animations can be defined and triggered either declaratively (i.e., by embedding SVG animation elements in SVG content) or via scripting.

6. Definitions • Basic shape. Standard shapes which are predefined in SVG as a convenience for common graphical operations. 'rect', 'circle', 'ellipse', 'line', 'polyline', 'polygon'. • Canvas: a surface onto which graphics elements are drawn, which can be real physical media such as a display orpaper or an abstract surface such as a allocated region of computer memory. • Clipping path: a combination of 'path', 'text' and basic shapes which serve as the outline of a 1-bit mask, where everything on the "inside" of the outline is allowed to show through buteverything on the outside is masked out.

7. Definitions • Container element: An element which can have graphics elements and other container elements as child elements. Specifically: 'svg', 'g', 'defs' 'symbol', 'clipPath', 'mask', 'pattern', 'marker', 'a' and 'switch'. • Current innermost SVG document fragment. The XML document sub-tree which starts with the most immediate ancestor 'svg' element of a givenSVG elementcurrent SVG document fragment. The XML document sub-tree which starts with the outermost ancestor 'svg' element of a given SVGelement, with the requirement that all container elements between the outermost 'svg' and this elementare all elements in the SVG language

8. Definitions • Current transformation matrix (CTM): Transformation matrices define the mathematical mapping from one coordinate system into anotherusing a 3x3 matrix using the equation [x' y' 1] = [x y 1] * matrix. The current transformation matrix • (CTM) defines the mapping from the user coordinate system into the viewport coordinate system. • Fill: The operation of painting the interior of a shape or the interior of the character glyphs in a text string. • Font: A font represents an organized collection of glyphs in which the various glyph representations will sharea common look or styling such that, when a string of characters is rendered together, the result is highlylegible, conveys a particular artistic style and provides consistent inter-character alignment and spacing.

9. Definitions • Glyph: A glyph represents a unit of rendered content within a font. Often, there is a one-to-one correspondencebetween characters to be drawn and corresponding glyphs (e.g., often, the character "A" is renderedusing a single glyph), but other times multiple glyphs are used to render a single character (e.g., use ofaccents) or a single glyph can be used to render multiple characters (e.g., ligatures). Typically, a glyph isdefined by one or more shapes such as a path, possibly with additional information such as renderinghints that help a font engine to produce legible text in small sizes. • Graphics element: One of the element types that can cause graphics to be drawn onto the target canvas. Specifically: 'path','text', 'rect', 'circle', 'ellipse', 'line', 'polyline', 'polygon', 'image' and 'use'. • Graphics referencing element: A graphics element which uses a reference to a different document or element as the source of itsgraphical content. Specifically: 'use' and 'image'.

10. Definitions • Local URI reference: A Uniform Resource Identifier [URI] that does not include an <absoluteURI> or <relativeURI> and thusrepresents a reference to an element within the current document. • Mask: a container element which can contain graphics elements or other container elements which define a setof graphics that is to be used as a semi-transparent mask for compositing foreground objects into thecurrent background. • Non-local URI reference: A Uniform Resource Identifier [URI] that includes an <absoluteURI> or <relativeURI> and thus(usually) represents a reference to a different document or an element within a different document. • Paint: A paint represents a way of putting color values onto the canvas. A paint might consists of both colorvalues and associated alpha values which control the blending of colors against already existing colorvalues on the canvas. SVG supports three types of built-in paint: color, gradients and patterns.

11. Definitions • Presentation attribute: An XML attribute on an SVG element which specifies a value for a given property for that element. • Property: A parameter that helps specify how a document should be rendered. A complete list of SVG's propertiescan be found in Property Index. Properties are assigned to elements in the SVG language either bypresentation attributes on elements in the SVG language or by using a styling language such as CSS. • Shape: A graphics element that is defined by some combination of straight lines and curves. Specifically: 'path','rect', 'circle', 'ellipse', 'line', 'polyline', 'polygon'. • Stroke: The operation of painting the outline of a shape or the outline of character glyphs in a text string.

12. Definitions • SVG canvas: the canvas onto which the SVG content is rendered. • SVG document fragment: The XML document sub-tree which starts with an 'svg' element. An SVG document fragment canconsist of a stand-alone SVG document, or a fragment of a parent XML document enclosed by an 'svg'element. When an 'svg' element is a descendant of another 'svg' element, there are two SVG documentfragments, one for each 'svg' element. SVG viewport: the viewport within the SVG canvas which defines the rectangular region into which SVG content is rendered. • Text content element: One of SVG's elements that can define a text string that is to be rendered onto the canvas. SVG's textcontent elements are the following: 'text', 'tspan', 'tref' and 'textPath'.

13. Definitions • Transformation: A modification of the current transformation matrix (CTM) by providing a supplemental transformationin the form of a set of simple transformations specifications (such as scaling, rotation or translation)and/or one or more transformation matrices. • Transformation matrix: Transformation matrices define the mathematical mapping from one coordinate system into anotherusing a 3x3 matrix using the equation [x' y' 1] = [x y 1] * matrix. • URI Reference: A Uniform Resource Identifier [URI] which serves as a reference to a file or to an element within a file.

14. Definitions • User coordinate system: In general, a coordinate system defines locations and distances on the current canvas. The current usercoordinate system is the coordinate system that is currently active and which is used to define howcoordinates and lengths are located and computed, respectively, on the current canvas. • User space: A synonym for user coordinate system.

15. Recourses • http://www.adobe.com/svg/viewer/install/main.html • batick • Blackboard • http://www.adobe.com/svg/viewer/install/main.html examples

16. Initialization • <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd"> <svg width="21cm“ height="13.5cm"> <title>MegaMall Handbill</title> <desc> Handbill for the fictitious MegaMall</desc> <!-- graphic specifications go here --> </svg> • 1.14 examples

17. Coordinates Unit / Meaning • Em: a unit equal to the current font size • Ex: the x-height, usually the height of a lower case letter x • Px: pixels (the default) • Pt: points (one point = 1/72 inch) • Pc: picas (one pica = 1/6 inch) • Cm: centimeters • Mm: millimeters • In: inches Chapter 2 examples

18. Adding Graphic Elements • adding the red-bordered rectangle with the light blue interior. • <svg id="body" width="21cm" height="13.5cm" viewBox="0 0 210 135"> • <title>Example 1</title> • <desc> Rectangle with red border and light blue interior.</desc> • <rect x="10" y="20" width="150" height="70" fill="#eeeeff" stroke="red" stroke-width="1" /> • </svg>

19. Transformation • <svg id="body" width="21cm" height="13.5cm" viewBox="0 0 210 135"> • <title>Example 2</title> • <desc> Rectangle with red border and light blue interior, with (intended) gray shadow rectangle.</desc> • <rect x="10" y="20" width="150" height="70" fill="#eeeeff" stroke="red" stroke-width="1" /> <rect x="10" y="20" width="150" height="70" transform="translate(3, 3)" fill="#999999" stroke="#999999" stroke-width="1" /> • </svg>

20. Basic Shapes - Lines • <line x1="start-x" y1="start-y" x2="end-x" y2="end-y"> • stroke-width • stroke Color: "aqua", "black", "blue", "fuchsia", "gray", "green", "lime", "maroon", "navy", "olive", "purple", "red", "silver", "teal", "white", and "yellow“, #rrggbb • stroke-opacity • stroke-dasharray • Example 3.1, 3.2, 3.3, 3.4, 3.5,

21. Basic Shapes - Rectangles • Example 3.6 Rounded Rectangles • Example 3.8

22. Basic Shapes - Circles and Ellipses • Example 3.9

23. Basic Shapes - The polygon Element • Example 3.10 Filling Polygons That Have Intersecting Lines SVG has two different rules for determining whether a point is inside a polygon or outside it. The fill-rule has a value of either "nonzero" or "evenodd". Depending on the rule you choose, you get a different effect. Example 3.11 uses the rules to fill two diagrams of the star, as shown in Figure 3.12.

24. Explanation of the Fill Rules • The "nonzero" rule determines whether a point is inside or outside a polygon by drawing a line from the point in question to infinity. It counts how many times that line crosses the polygon's lines, adding one if the polygon line is going right to left, and subtracting one if the polygon line is going left to right. If the total comes out to zero, the point is outside the polygon. If the total is nonzero (hence the name) the point is inside the polygon. • The "evenodd" rule also draws a line from the point in question to infinity, but it simply counts how many times that line crosses your polygon's lines. If the total number of crossings is odd, then the point is inside; if even, then the point is outside.

25. Basic Shapes - The polyline Element • Example 3.13 CAUTION: It's best to set the fill property to "none" when using <polyline>; otherwise, the SVG viewer attempts to fill the shape, sometimes with startling results like those in Figure 3.14

26. Basic Shapes - Line Caps and Joins • When drawing a <line> or <polyline>, you may specify the shape of the endpoints of the lines by setting the stroke-linecap style property to one of the values "butt", "round", or "square". • Example 3.15: Values of the stroke-linecap attribute • Example 3.16: Values of the stroke-linejoin attribute