1 / 81

Introduction to SVG (Part 2)

Introduction to SVG (Part 2). Prepared by K.M.SO Department of Computer Science ver. 2 last update: June 2004. Document Structure – Grouping and referencing objects. Grouping Element(1). The 'g' element is the element for grouping and naming collections of drawing elements.

slone
Download Presentation

Introduction to SVG (Part 2)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introduction to SVG (Part 2) Prepared by K.M.SO Department of Computer Science ver. 2 last update: June 2004

  2. Document Structure –Grouping and referencing objects

  3. Grouping Element(1) • The 'g' element is the element for grouping and naming collections of drawing elements. • Enables to execute same operation on all items in the group. • Can be used in conjunction with <desc> and <title> elements to provide description and semantics about the group

  4. Grouping Element(2) • Each group can be given the id attribute for purposes of animation and re-usabilty. • Any ‘g’ element can contain other ‘g’ elements nested within it to an arbitrary depth. • Drawing element that is not contained in a ‘g’ element can be considered as a group of its own.

  5. Simple Grouping <svg width="5cm" height="5cm"> <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>

  6. Another Example (1/3) <svg width="240px" height="240px" viewBox="0 0 240 240"> <g id="house" style="fill: none; stroke: black;"> <desc>House with door</desc> <rect x="6" y="50" width="60" height="60"/> <polyline points="6 50, 36 9, 66 50"/> <polyline points="36 110, 36 80, 50 80, 50 110"/> </g> <g id="man" style="fill: none; stroke: black;"> <desc>Male human</desc> <circle cx="85" cy="56" r="10"/> <line x1="85" y1="66" x2="85" y2="80"/> <polyline points="76 104, 85 80, 94 104" /> <polyline points="76 70, 85 76, 94 70" /> </g> <g id="woman" style="fill: none; stroke: black;"> <desc>Female human</desc> <circle cx="110" cy="56" r="10"/> <polyline points="110 66, 110 80, 100 90, 120 90, 110 80"/> <line x1="104" y1="104" x2="108" y2="90"/> <line x1="112" y1="90" x2="116" y2="104"/> <polyline points="101 70, 110 76, 119 70" /> </g> </svg>

  7. Another Example (2/3) <svg width="240px" height="240px" viewBox="0 0 240 240"> <g id="house" style="fill: none; stroke: black;"> <desc>House with door</desc> <rect x="6" y="50" width="60" height="60"/> <polyline points="6 50, 36 9, 66 50"/> <polyline points="36 110, 36 80, 50 80, 50 110"/> </g> <g id="man" style="fill: none; stroke: black;"> <desc>Male human</desc> <circle cx="85" cy="56" r="10"/> <line x1="85" y1="66" x2="85" y2="80"/> <polyline points="76 104, 85 80, 94 104" /> <polyline points="76 70, 85 76, 94 70" /> </g> <g id="woman" style="fill: none; stroke: black;"> <desc>Female human</desc> <circle cx="110" cy="56" r="10"/> <polyline points="110 66, 110 80, 100 90, 120 90, 110 80"/> <line x1="104" y1="104" x2="108" y2="90"/> <line x1="112" y1="90" x2="116" y2="104"/> <polyline points="101 70, 110 76, 119 70" /> </g> </svg>

  8. Another Example (3/3) <svg width="240px" height="240px" viewBox="0 0 240 240"> <g id="house" style="fill: none; stroke: black;"> <desc>House with door</desc> <rect x="6" y="50" width="60" height="60"/> <polyline points="6 50, 36 9, 66 50"/> <polyline points="36 110, 36 80, 50 80, 50 110"/> </g> <g id="man" style="fill: none; stroke: black;"> <desc>Male human</desc> <circle cx="85" cy="56" r="10"/> <line x1="85" y1="66" x2="85" y2="80"/> <polyline points="76 104, 85 80, 94 104" /> <polyline points="76 70, 85 76, 94 70" /> </g> <g id="woman" style="fill: none; stroke: black;"> <desc>Female human</desc> <circle cx="110" cy="56" r="10"/> <polyline points="110 66, 110 80, 100 90, 120 90, 110 80"/> <line x1="104" y1="104" x2="108" y2="90"/> <line x1="112" y1="90" x2="116" y2="104"/> <polyline points="101 70, 110 76, 119 70" /> </g> </svg>

  9. The use element(1) • 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. • The ‘use’ element cannot reference entire files.

  10. The use element(2) • 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.

  11. The use element(3) <svg width="240px" height="240px" viewBox="0 0 240 240"> <g id="house" style="fill: none; stroke: black;"> <rect x="6" y="50" width="60" height="60"/> <polyline points="6 50, 36 9, 66 50"/> <polyline points="36 110, 36 80, 50 80, 50 110"/></g> <g id="man" style="fill: none; stroke: black;"><circle cx="85" cy="56" r="10"/><line x1="85" y1="66" x2="85" y2="80"/> <polyline points="76 104, 85 80, 94 104" /><polyline points="76 70, 85 76, 94 70" /></g> <g id="woman" style="fill: none; stroke: black;"> <circle cx="110" cy="56" r="10"/> <polyline points="110 66, 110 80, 100 90, 120 90, 110 80"/><line x1="104" y1="104" x2="108" y2="90"/><line x1="112" y1="90" x2="116" y2="104"/><polyline points="101 70, 110 76, 119 70" /> </g> <use xlink:href="#house" x="70" y="100"/> <use xlink:href="#woman" x="-80" y="100"/> <use xlink:href="#man" x="-30" y="100"/> </svg>

  12. The use element(4) • 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.

  13. The defs element(1) • The defs element is a container element for referenced elements. • When SVG elements are drawn into a visual media, the <defs> is not drawn with them.

  14. The defs element(2) <svg> <defs> <g id="house"> ... </g> <g id="man"> ... </g> <g id="woman"> ... </g> <g id="couple"> <use xlink:href="#man" x="0" y="0"/> <use xlink:href="#woman" x="25" y="0"/> </g> </defs> …… <use xlink:href="#house" x="0" y="0" style="fill: #cfc;"/> <use xlink:href="#couple" x="70" y="40"/> <use xlink:href="#house" x="120" y="0" style="fill: #99f;"/> <use xlink:href="#couple" x="190" y="40"/> <use xlink:href="#woman" x="0" y="145"/> <use xlink:href="#man" x="25" y="145"/> <use xlink:href="#house" x="65" y="105" style="fill: #c00;"/> </svg>

  15. References in SVG • 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.

  16. Reuse elements from file <use xlink:href=“AnotherFile.svg#woman” x=“100” y=“200” /> (not supported in newest viewer) Instead, you may try this one: <image xlink:href=“AnotherFile.svg” x=“100” y=“200” width=“100” height=“100”/>

  17. The Symbol element • Unlike the <g> element, a <symbol> is never display. • Symbols can specify viewBox and preserveAspectRatio attributes.

  18. Groups vs Symbols <svg width="200px" height="200px" viewBox="0 0 200 200"> <defs> <g id="octagon" style="stroke: black;"> <polygon points=" 36 25, 25 36, 11 36, 0 25, 0 11, 11 0, 25 0, 36 11"/> </g> <symbol id="sym-octagon" style="stroke: black;" preserveAspectRatio="xMidYMid slice" viewBox="0 0 40 40"> <polygon points="36 25, 25 36, 11 36, 0 25, 0 11, 11 0, 25 0, 36 11"/> </symbol> </defs> <use xlink:href="#octagon" x="40" y="40" width="30" height="30“ style="fill: #c00;"/> <use xlink:href="#octagon" x="80" y="40" width="40" height="60“ style="fill: #cc0;"/> <use xlink:href="#sym-octagon" x="40" y="80" width="30" height="30" style="fill: #cfc;"/> <use xlink:href="#sym-octagon" x="80" y="80" width="40" height="60" style="fill: #699;"/> </svg>

  19. The imageelement(1) • 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. • Main attributes: “x”, “y”, “width”, “height” and “xlink:href”

  20. The imageelement(2) • 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.

  21. The imageelement(3) • Unlike <use>, <image> cannot reference elements inside the SVG document. • One can apply transformations and styles to the <image> element through the matching attributes. • nested transformations • clipping paths • alpha masks • filter effects • template objects and extensibility

  22. Include a JPEG image with SVG (72,92)

  23. Include a JPEG image with SVG <svg width="310px" height="310px" viewBox="0 0 310 310"> <ellipse cx="154" cy="154" rx="150" ry="120" style="fill: #999999;"/> <ellipse cx="152" cy="152" rx="150" ry="120" style="fill: #cceeff;"/> <image xlink:href="kwanghwamun.jpg" x="72" y="92" width="160" height="120"/> </svg>

  24. Activity SVG drawing tools • Jasc webDraw • A free 30-day trial copy is available at • www.jasc.com • (Time: <10mins)

  25. Transformations(1) • A new user coordinate system can be established by specifying transformations in the form of a transform attribute on a group of graphical elements. • The transform attribute transforms all user space coordinates and lengths on the given element and all of its ancestors. • Transformations maybe nested and so have cummulative effect.

  26. Transformations(2) • 2D transformations are represented using 3X3 matrices. • Common transformations: translate(x,y) - establish a new coordinate system whose origin is at (x,y). rotate(a) – rotates the coordinate system by a degrees around the origin. scale(a,b) – scales the coordinate system – x axis by a and y axis by b.

  27. Transformations(3) • Translation Matrix: • Rotation Matrix: • Scaling Matrix:

  28. Transformations(4)

  29. Transformations(5) • SVG allows both to apply transformations as translate, rotate, scale or to apply a detailed transformation matrix. • Transformations in SVG are applied by the ‘transform’ element.

  30. Linear Transformations <svg width="200px" height="200px" viewBox="0 0 200 200"> <g id="square"> <rect x="10" y="10" width="20" height="20" style="fill: none; stroke:black; stroke-width: 2;"/> </g> <use xlink:href="#square" transform="translate(50,50)"/> </svg>

  31. Scale Transformations (1) <svg width="300" height="300"> <g id="square"> <rect x="10" y="10" width="20" height="20" style="fill: none; stroke: black;"/> </g> <use xlink:href="#square" transform="scale(2)"/> </svg>

  32. Scale Transformations (2) <svg width="200px" height="200px" viewBox="0 0 200 200"> <g id="square"> <rect x="10" y="10" width="20" height="20" style="fill: none; stroke: black;"/> </g> <use xlink:href="#square" transform="scale(3, 1.5)"/> </svg>

  33. Sequences of Transformations • tranformation (A, B) != tranformation (B, A) • tansform=“scale(2) translate(30, 20)” is NOT equal to • tansform=“translate(30, 20) scale(2)”

  34. Rotation Transformations Rotate the user coordinate by 45 degree. The center of rotation is the origin (0,0) transform=“rotate(45)” Rotate the user coordinate by 45 degree. The center of rotation is the origin (50,50) transform=“rotate(45, 50, 50 )”

  35. Rotation Transformations <svg width="200px" height="200px" viewBox="0 0 200 200"> <!-- axes --> <polyline points="100 0, 0 0, 0 100" style="stroke: black; fill: none;"/> <!-- normal and rotated square --> <rect x="70" y="30" width="20" height="20" style="fill: gray;"/> <rect x="70" y="30" width="20" height="20" transform="rotate(45)" style="fill: black;"/>; </svg>

  36. Skew Transformations <svg width="200px" height="200px" viewBox="0 0 200 200"> <!-- guide lines --> <g style="stroke: gray; stroke-dasharray: 4 4;"> <line x1="0" y1="0" x2="200" y2="0"/><line x1="20" y1="0" x2="20" y2="90"/> <line x1="120" y1="0" x2="120" y2="90"/> </g> <g transform="translate(20, 0)"> <g transform="skewX(30)"> <polyline points="50 0, 0 0, 0 50" style="fill: none; stroke: black; stroke-width: 2;"/> <text x="0" y="60">skewX</text> </g></g> <g transform="translate(120, 0)"> <g transform="skewY(30)"> <polyline points="50 0, 0 0, 0 50" style="fill: none; stroke: black; stroke-width: 2;"/> <text x="0" y="60">skewY</text> </g></g> </svg>

  37. Activity SVG drawing tools RapidSVG • A professional SVG web site includes RapidSVG download, demo and gallery • http://xstreamsoftware.com/demos_rsvg.htm • (Time: <15mins)

  38. Paths(1) • Paths represent the outline of a shape which can be filled, stroked, used as a clipping path, or any combination of the three. • Paths are described by a set of points. • The geometry of the path is defined in terms of moveto (M m) , lineto (L l), and closepath (Z). • Path is represented in SVG by the ‘path’ element.

  39. Paths(2) • <svg width="4cm" height="4cm" viewBox="0 0 400 400"> <rect x="1" y="1" width="398" height="398" style="fill:none; stroke:blue"/> <path d="M 100 100 L 300 100 L 200 300 z" style="fill:red; stroke:blue; stroke-width:3"/> </svg>

  40. Paths (move to and line to) <svg width="200px" height="200px" viewBox="0 0 200 200"> <g transform="translate(20,20)"> <g style="stroke: black; fill: none;"> <path d="M 10 10 L 100 10"/> <path d="M 10, 20 L 100, 20 L 100,50"/> <path d="M 40 60, L 10 60, L 40 42.68, M 60 60, L 90 60, L 60 42.68"/> </g></g> </svg>

  41. Paths (close path) <svg width="200px" height="200px" viewBox="0 0 200 200"> <g transform="translate(20,20)"> <g style="stroke: black; fill: none;"> <path d="M 10 10, L 40 10, L 40 30, L 10 30, L 10 10"/> <path d="M 60 10, L 90 10, L 90 30, L 60 30, Z"/> <path d="M 40 60, L 10 60, L 40 42.68, Z M 60 60, L 90 60, L 60 42.68, Z"/> </g></g> </svg>

  42. Paths shortcuts • Horizontal line (H h) • Vertical line (V v) • Multiple sets of coordinate <!– 6 paths draw the same diamond --> <path d="M 30 30 L 55 5 L 80 30 L 55 55 Z"/> <path d="M 30 30 L 55 5 80 30 55 55 Z"/> <path d="M 30 30 55 5 80 30 55 55 Z"/> <path d="m 30 30 l 25 -25 l 25 25 l -25 25 z"/> <path d="m 30 30 l 25 -25 25 25 -25 25 z"/> <path d="m 30 30 25 -25 25 25 -25 25 z"/> (30,30)

  43. Elliptical Arc • Specify the elliptical Arc: • (a) x- y-radii two point two possible ellipse • (b) two arcs < 180 degree; • (c) two arcs > 180 degree, • (d) drawn in the direction of incresing negative angle • (e) drawn in the direction of incresing postive angle • (f) x-axis-rotation of ellipse

  44. Elliptical Arc • the paths used to draw the elliptical arcs in section (b) to (e) <path d="M 125, 75 A100,50 0 0,0 225, 125"/><!– b --> <path d="M 125, 75 A100,50 0 0,1 225, 125"/><!– c --> <path d="M 125, 75 A100,50 0 1,0 225, 125"/><!– d --> <path d="M 125, 75 A100,50 0 1,1 225, 125"/><!– e -->

  45. Activity SVG drawing tools Sodipodi • A free (GPL) vector-based drawing program create native svg file format. • http://www.sodipodi.com/ • GTK+ for Windows is required • http://www.dropline.net/gtk/index.php (Time: <15mins)

  46. (x1,y1) current position (x,y) Bezier Curves (1) • Quaratic Bezier Curve: • Q x1 y1 x y • Q or q : command • x1 y1 : control point • x y : end point <path d="M30 100 Q 80 30, 100 100, 130 65, 200 80"/>

  47. (x,y) Reflection of control point Bezier Curves (2) • Smooth Quaratic Bezier Curve: • T x y • T or t : command • (Reflection of previous control point ) • x y : end point <path d="M30 100 Q 80 30, 100 100 T 200 80"/>

  48. Bezier Curves (3) • Cubic Bezier Curve: • C x1 y1 x2 y2 x y • C or c : command • x1 y1 x2 y2 : control points • x y : end point <path d="M40 50 C 10 10, 140 10, 110 50"/>

More Related