Scalable Vector Graphics SVG

Transcription

1 LECTURE 7 Scalable Vector Graphics SVG CS 5513 Multimedia Systems Spring 2009 Imran Ihsan Principal Design Consultant OPUSVII Faculty of Engineering & Applied Sciences

2 What is SVG? SVG stands for Scalable Vector Graphics SVG is used to define vector based graphics for the Web SVG defines the graphics in XML format SVG is a World Wide Web Consortium (W3C) recommendation SVG 1.1 became a W3C Recommendation in January Sun Microsystems, Adobe, Apple, IBM, and Kodak are some of the well known organizations that have been involved in defining SVG. Viewing SVG Files You cannot view SVG files if you do not have an SVG viewer installed. You can download a SVG Viewer as aplug in of browser from Adobe. Slide: 2

3 A Standard SVG Page The following example defines a SVG file. The file must be saved with an.svg extension: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" <svg width="300" height="300" x="0" y="0"> SVG body SVG canvas size and position in browser XML file declaration Document Type Declaration (defines language and syntax allowed). Slide: 3

4 Example <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" <svg width="300" height="300" x="0" y="0"> <text style="fill:red;" y="15">this is SVG.</text> <rect style="fill:blue;" y="50" width="250" height="100"/> SVG Shapes SVG has some predefined shape elements that can be used and manipulated by developers: Rectangle <rect> Circle <circle> Ellipse <ellipse> Line <line> Polyline <polyline> Polygon <polygon> Path <path> Slide: 4

5 The <rect> Tag <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" <svg width="300" height="300" x="0" y="0"> <rect x="5" y="5" width="265" height="165" style="fill:none;stroke:black;stroke-width:2"/> <rect x="15" y="15" width="100" height="50" fill="blue stroke="black" stroke-width="3" stroke-dasharray="9 5"/> <rect x="15" y="100" width="100" height="50" fill="green" stroke="black" stroke-width="3" rx="5" ry="10"/> <rect x="150" y="15" width="100" height="50" fill="red" stroke="blue" stroke-opacity="0.5" fill-opacity="0.3" stroke-width="3"/> <rect x="150" y="100" width="100" height="50" style="fill:red;stroke:blue;stroke-width:1"/> Slide: 5

6 The width and height attributes of the <rect> element define the height and the width of the rectangle. The rx and the ry attributes rounds the corners of the rectangle The style attribute is used to define CSS properties (1st and 5th rectangles). The CSS properties can be set as attributes (the outer and the red rectangles). The CSS fill property defines the fill color of the rectangle (either an rgb value, a color name, or a hexadecimal value). The CSS stroke width property defines the width of the border of the rectangle The CSS stroke property defines the color of the border of the rectangle. The CSS fill opacity property defines the opacity of the fill color (legal range: 0 to 1) The CSS stroke opacity property defines the opacity of the stroke color (legal range: 0 to 1) The CSS properties apply on all other shapes. Slide: 6

7 The <circle> and <ellipse> Tags <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" <svg width="600" height="300" x="0" y="0"> <circle cx="90" cy="110" r="50" fill="rgb(200,100,50)" stroke="blue" stroke-width="10"/> <ellipse cx="250" cy="100" rx="50" ry="10" fill="red"/> <ellipse cx="160" cy="250" transform="rotate(-30)" rx="150" ry="100" fill="none" stroke="blue" stroke-width="20"/> fill colour can be specified by rbg values The cx and cy attributes define the x and y coordinates of the center of the circle. If cx and cy are omitted, the circle's center is set to (0, 0) <circle> The r attribute defines the radius of the circle <ellipse> The rx attribute defines the horizontal radius The ry attribute defines the vertical radius Slide: 7

8 The <line> and <polyline> Tags <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG Stylable//EN" <svg width="500" height="300"> <polyline fill="none" stroke="blue" stroke-width="10" points="50,200,100,200,100,120,150,120,150,200,200,200"/> <line x1="300" y1="200" x2="400" y2="100" stroke = "red stroke-width="5"/> <line x1="300" y1="100" x2="400" y2="200" stroke = "red" stroke-width="5"/> <line> The x1 attribute defines the start of the line on the x axis The y1 attribute defines the start of the line on the y axis The x2 attribute defines the end of the line on the x axis The y2 attribute defines the end of the line on the y axis <polyline> The points attributes defines the x and y coordinates of each points of the polyline Slide: 8

9 The <polygon> Tags The points attributes defines the x and y coordinates of each points of the polygon <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG Stylable//EN" <svg width="500" height="400"> <polygon fill="yellow" stroke="blue" stroke-width="10" points="50,250,100,200,100,120,150,120,150,200,200,250"/> <polygon fill="red" stroke="blue" stroke-width="10" points="350,75 379, , , , , , , , ,161"/> Slide: 9

10 The <path> Tag The <path> tag is used to define a path. The following commands are available for path data: M=moveto L = lineto H = horizontal lineto V = vertical lineto C=curveto S = smooth curveto Q = quadratic Belzier curve T = smooth quadratic Belzier curveto A = elliptical Arc Z=closepath <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG Stylable//EN" <svg width="500" height="400"> <path d="m L z" fill="red" stroke="blue" stroke-width="2"/> Slide: 10

11 Another Example <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG Stylable//EN" <svg width="100%" height="100%"> <path d="m C C C C C C C Note: A SVG editor should be C used to draw such complex shape! C C C C " style="fill:white;stroke:red;stroke-width:2"/> Slide: 11

12 SVG Gradients A gradient is a smooth transition from one color to another. In addition, several color transitions can be applied to the same element. There are two main types of gradients in SVG: Linear Gradients Radial Gradients <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG Stylable//EN" <svg width="100%" height="100%"> <defs> <lineargradient id="orange_red" x1="0%" y1="0% x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1"/> <stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:1"/> </lineargradient> </defs> <ellipse cx="200" cy="190" rx="85" ry="55" style="fill:url(#orange_red)"/> Slide: 12

13 Example 1 The id attribute of the <lineargradient> tag defines a unique name for the gradient The fill:url(#orange_red) property links the ellipse element to the gradient The x1, x2, y1, y2 attributes of the <lineargradient> tag define the starting and ending position of the gradient The color range for a gradient can be composed of two or more colors. Each color is specified with a <stop> tag. The offset attribute is used to define where the gradient color begin and end. Slide: 13

14 Example 2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG Stylable//EN" <svg width="100%" height="100%"> <defs> <lineargradient id="rainbow" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:red; stop-opacity:1"/> <stop offset="14%" style="stop-color:orange; stop-opacity:1"/> <stop offset="28%" style="stop-color:yellow; stop-opacity:1"/> <stop offset="43%" style="stop-color:green; stop-opacity:1"/> <stop offset="57%" style="stop-color:cyan; stop-opacity:1"/> <stop offset="71%" style="stop-color:blue; stop-opacity:1"/> <stop offset="85%" style="stop-color:purple; stop-opacity:1"/> </lineargradient> </defs> <ellipse cx="200" cy="190" rx="85" ry="55 style="fill:url(#rainbow)"/> <rect x="400" y="135" width="170" height="110 style="fill:url(#rainbow)"/> Slide: 14

15 Radial Gradients <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG Stylable//EN" <svg width="100%" height="100%"> <defs> <radialgradient id="grey_blue" cx="50%" cy="50%" r="50% fx="50% fy="50%"> <stop offset="0%" style="stop-color:rgb(200,200,200); stop-opacity:0"/> <stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:1"/> </radialgradient> </defs> <ellipse cx="230" cy="200" rx="110" ry="100" fill="url(#grey_blue)"/> The cx, cy and r attributes define the outermost circle and the fx and fy define the innermost circle The color range for a gradient can be composed of two or more colors. Each color is specified with a <stop> tag. The offset attribute is used to define where the gradient color begin and end Slide: 15

16 SVG Filters SVG Filters is used to add special effects to shapes and text. The available filters in SVG are: feblend fecolormatrix fecomponenttransfer fecomposite feconvolvematrix fediffuselighting fedisplacementmap feflood fegaussianblur feimage femerge femorphology feoffset fespecularlighting fetile feturbulence fedistantlight fepointlight fespotlight You can use multiple filters on each SVG element! Slide: 16

17 The <filter> Tag The <filter> tag is used to define an SVG filter. The <filter> tag has a required id attribute which identifies which filter will be applied to the graphic. The <filter> tag must be must be defined within a <defs> tag. Slide: 17

18 Gaussian Blur <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG Stylable//EN" <svg width="100%" height="100%"> <defs> <filter id="gaussian_blur"> <fegaussianblur in="sourcegraphic" stddeviation="3" /> </filter> </defs> <ellipse cx="200" cy="150" rx="70" ry="40" style="fill:#ff0000;stroke:#000000; stroke-width:2;filter:url(#gaussian_blur)"/> The id attribute of the <filter> tag defines a unique name for the filter The filter:url(#gaussian_blur) property is used to link an element to a filter. The # character must be used. The filter effect is defined with the <fegaussianblur> tag. The fe prefix is used for all filters The stddeviation attribute of the <fegaussianblur> tag defines the amount of the blur The in="sourcegraphic" part defines that the effect is created from the whole image Slide: 18

19 Advanced Filter <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG Stylable//EN" <svg width="100%" height="100%"> <defs> <filter id="myfilter" filterunits="userspaceonuse"> <fegaussianblur in="sourcealpha" stddeviation="4" result="blur"/> <feoffset in="blur" dx="4" dy="4" result="offsetblurredalpha"/> <fespecularlighting in="blur" surfacescale="5" specularconstant="0.9" specularexponent="20" lightcolor="white" result="specularout"> <fedistantlight azimuth="135" elevation="30"/> </fespecularlighting> <fecomposite in="specularout" in2="sourcealpha" operator="in result="specularout"/> <fecomposite in="sourcegraphic" in2="specularout operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litpaint"/> <femerge> <femergenode in="offsetblurredalpha"/> <femergenode in="litpaint"/> </femerge> </filter> </defs> <g style="font-size:75;fill:red;fill-opacity:1"> <text x="50" y="90" style="filter:url(#myfilter)"> Filtered</text> <text x="50" y="180" >Normal</text> </g> Slide: 19