SVG part 2

1. SVGpart 2

2. Document structure • Using styles Inline style – example 4.1 Internal style sheets – example 4.2 External style sheets – example 4.3 • the g element, the use element – examples 4.4, 4.5 • The defs element – example 4.6 • The symbol element – example 4.7 • The image element – example 4.8

3. Transformations • translate(<tx> [<ty>]), which specifies a translation by tx and ty. If <ty> is not provided, it is assumed to be zero. • scale(<sx> [<sy>]), which specifies a scale operation by sx and sy. If <sy> is not provided, it is assumed to be equal to <sx>. • rotate(<rotate-angle> [<cx> <cy>]), which specifies a rotation by <rotate-angle> degrees about a given point. If optional parameters <cx> and <cy> are not supplied, the rotate is about the origin of the current user coordinate system. The operation corresponds to the matrix [cos(a) sin(a) -sin(a) cos(a) 0 0]. If optional parameters <cx> and <cy> are supplied, the rotate is about the point (<cx>, <cy>). The operation represents the equivalent of the following specification: translate(<cx>, <cy>) rotate(<rotate-angle>) translate(-<cx>, -<cy>). • skewX(<skew-angle>), which specifies a skew transformation along the x-axis. • skewY(<skew-angle>), which specifies a skew transformation along the y-axis.

4. Transforming the coordinate system • The translate transformation – example 5.1 • The scale transformation – example 5.5., • non-uniform scale – example 5.6, • Sequence of transformations – examples 5.8, 5.10 • The rotate transform – example 5.16 • Scaling around a central point – example 5.19 • The skew x and skew Y transformation – example 5.20

7. Pats • Moveto, lineto, closepath –examples 6.1, 6.2 • Shortcuts – example 6.3 • Elliptic arts – example 6.4 • Bezier curves – examples 6.6, 6.7, 6.10, 6.11

8. Pattern and Gradients

12. Patterns and Gradients • Pattern – objectBoundingBox - examples 7.1, 7.2 • User space 7.3 • Pattern scaled with view Box – example 7.5 • Patterns within patterns – example 7.6 • Two-color linear gradient – example 7.7 • Three-color linear gradient – example 7.8 • Defining vectors for linear gradients – example 7.9 • Radial gradient – examples 7.11, 7.12

13. Text • Glyphs, weight, style, decoration, spacing, – examples 8.1, 8.2 • Text alignment – example 8.3 • Tspan element – example 8.6 • Multiple horizontal and vertical offsets – example 8.9 • Subscript, superscript – example 8.10 • Vertical text – example 8.12 • Multilingual text – example 8.13 • Text along a path – examples 8.16, 8.17

14. Filters • Drop shadow filter – examples 10.1, 10.2 • Glow filter – example 10.3 • Using feMerge element – example 10.4 • Changing brightness – example 10.5 • Gamma adjustment – examples 10.6, 10.7, 10.8 • Diffuse lightening – example 10.9

16. Animating SVG • Animation – example 11.1 • Multiple animation on a single object – example 11.2 • Simple animation on multiple objects –example 11.3 • Synchronization of animations – example 11.4 • Synchronization of animations with offsets – example 11.5 • Repeated animations – examples 11.6, 11.7 • Set element – example 11.8 • Animate color – example 11.9 • Animate transform – example 11.11 • Animation along linear path – examples 11.13, 11.14, 11.15

17. Scripting SVG • Changing attributes of a single object – example 11.18 • Changing attributes of multiple objects – example in MS Explorer - 11.19 • Interaction with HTML pages • Example MS Explorer 12.6, omf.htm