Web Development Basics Lecture 6 SVG 1 1

Web Development Basics Lecture 6 – SVG 1. 1

Introduction § Scalable Vector Graphics (SVG) § a language for describing two-dimensional graphics in XML § W 3 C standard § Started in 1998 § SVG 1. 0 Recommendation 2001 § SVG 1. 1 Recommendation 2003 § SVG Tiny 1. 2 (Mobile SVG) Rec. 2008 § SVG 1. 1 Second Edition Rec. 2011 § SVG 2. 0 schedule 2014

Introduction § Scalable § increase or decrease uniformly § can grow to a large number of files, a large number of users, a wide variety of applications. § Vector § geometric objects such as lines and curves § Graphics § providing a rich, structured description of vector and mixed vector/raster graphics

Introduction § Three types of graphic objects § Vector graphic shapes § Images § Text § Features § § § § Grouping Styling (CSS or XSL) Composited Transformations Clipping paths Alpha masks Filter effects Template objects Interactive Animations Support for scripting language § Printing § Compression § §

Advantages § All major browser have some level of SVG support § Firefox, IE (>=9), Chrome, Safari and Opera § IE <= 8 need a plugin § SVG compared to raster (bitmap) image Can be created and edited with any text editor Can be searched, indexed and scripted Can be printed with high quality at any resolution Can be zoomed without degradation Can be integrated with other W 3 C standards (CSS, (X)HTML, XSL, DOM, …) § Can be compressed (gzip) § § §

SVG document skeleton <? xml version="1. 0" encoding="UTF-8" standalone="no"? > <!DOCTYPE svg PUBLIC "-//W 3 C//DTD SVG 1. 1//EN" "http: //www. w 3. org/Graphics/SVG/1. 1/DTD/svg 11. dtd"> <svg xmlns="http: //www. w 3. org/2000/svg" version="1. 1"> <title>Image title</title> <desc>This is a template for SVG</desc> <rect x="10" y="10" width="100" height="50" fill="red"/> </svg> § File with. svg extension (or. svgz for gzip compression)

SVG syntax § XML based language (strict) § Tags, attributes (and values) case sensitive. § Tags and attributes in lower letters § Closing one-sided tags § <line x 2="220" y 2="170" /> § Order of elements in reverse. § <svg> <circle r="150"/> <rect width="100" height="50"/> <line x 2="190" y 2="130"/> </svg> § line will be on top, rect in the middle, circle at bottom

View SVG § Stand alone (directly in browser) § HTML embedded § <img src="dir/image. svg" alt="alternative"> § <object data="img. svg" type="image/svg+xml"> Your browser don’t support SVG : ( </object> all versions of (X)HTML § <embed src="img. svg" type="image/svg+xml"> HTML 5 only, support scripting § <iframe src="img. svg">Your browser…</iframe> Not in HTML 4/XHTML strict DTD

View SVG § HTML 5 inline … <body> … <svg width="120" height="90"> <!-- SVG markup here. --> </svg> … </body> </html>

View SVG § XHTML inline <? xml version="1. 0"? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xhtml"> <head>…</head> <body> <svg width="120 px" height="90 px" version="1. 1" xmlns="http: //www. w 3. org/2000/svg" xmlns: xlink="http: //www. w 3. org/1999/xlink"> <!-- SVG markup here. --> </svg> </body> </html>

Basic shapes § Line <line> § Take four geometric attributes § x 1, y 1 coordinates for the start point of the line § x 2, y 2 coordinates for the end point of the line § If any omitted, replaced with 0. <line x 1="20" y 1="50" x 2="150" y 2="220" /> § Circle <circle> § Take three geometric attributes § cx, cy coordinates for the center position of the circle § (0, 0) if omitted § r for the radius of the circle <circle cx="120" cy="150" r="70" />

Basic shapes § Rectangle <rect> § Take four geometric attributes § x, y coordinates for the top left corner of the rectangle § (0, 0) if omitted § width, height horizontal/vertical size of the rectangle § Optional rx, ry for rounded corners. <rect x="30" y="70" width="40" height="90" rx="8" /> § Ellipse <ellipse> § Take four geometric attributes § cx, cy coordinates for the center of the ellipse (0, 0) § rx, ry for the x (respectively y) radiuses of the ellipse <ellipse cx="210" cy="135" rx="90" ry="62" />

Basic shapes § Polygon <polygon> and Polyline <polyline> § The polygon closes the shape, polyline keeps the shape open § points attribute § List of points (x, y) separated by space (new line can help clarity) <polygon points="110, 10 80. 3, 40. 75 150, 30" /> <polyline points="100, 30 120, 120 130, 90 170, 40" />

Style § SVG shares many of its styling properties with CSS (2) and XSL § With additional SVG styling properties § Inline styling § style attribute <rect style="fill: red; stroke: black; stroke-width: 2" width="600" height="300"/> § Styling attributes <rect fill="red" stroke="black" stroke-width="2" width="600" height="300"/>

Style – internal <? xml version="1. 0" standalone="no"? > <!DOCTYPE svg PUBLIC …> <svg …> <defs> <style type="text/css"><![CDATA[ rect { fill: red; stroke: black; stroke-width: 2 } ]]></style> </defs> <rect width="600" height="300"/> </svg>

Style – external § In CSS file (my_style. css) rect { fill: red; stroke: black; stroke-width: 2 } § In SVG <? xml version="1. 0" standalone="no"? > <? xml-stylesheet href="my_style. css" type="text/css"? > <!DOCTYPE svg PUBLIC …> <svg …> <rect width="600" height="300"/> </svg>

SVG style – fill § path, text and shapes can be filled (interior color) and stroked (outline (“border”)) § fill with color § § Hexadecimal #ffaa 00 or short #fa 0 rgb(155, 0, 0) also with % rgb(50%, 30%, 100%) Color name e. g. cadetblue or mistyrose Function e. g. gradient, pattern <circle fill="#90 ff 90" … /> <polyline style="fill: rgb(255, 0, 255)" … /> § fill-rule (nonzero, evenodd or inherit) § fill-opacity (0. 0 to 1. 0) <circle fill="thistle" fill-opacity="0. 3" … />

Gradients § <linear. Gradient> and <radial. Gradient> § With nested <stop> <svg …> <defs> <linear. Gradient id="my_grad" y 2="100%"> <stop offset="5%" stop-color="red" /> <stop offset="85%" stop-color="yellow" /> </linear. Gradient> </defs> <rect fill="url(#my_grad)" … /> </svg>

Patterns § fill or stroke an object using a pre-defined graphic object which can be replicated ("tiled") <svg …> <defs> <pattern id="my_pattern"> <rect fill="red" width="10" height="10"/> </pattern> </defs> <circle fill="url(#my_pattern)" … /> </svg>

SVG style – stroke § § § stroke (color or function) stroke-width (% or length) stroke-linecap (butt, round, square or inherit) stroke-linejoin (miter, round, bevel or inherit) stroke-miterlimit (value) stroke-dasharray § Coma separate value (lengths of dashes and gaps) § stroke-dashoffset (% or length) § distance into the dash pattern to start the dash § stroke-opacity <circle stroke="red" stroke-width="2" stroke-dasharray="5, 3"/>

SVG style – marker § <marker> define the shape to be used as head § For line, polygon or path § marker-start, marker-mid, marker-end properties <svg …> <defs> <marker id="my_mark" ref. X="0" ref. Y="5" marker. Width="4" marker. Height="3" orient="auto"> <rect fill="red" width="10" height="10"/> </marker> </defs> <line marker-end="url(#my_mark)" x 2="90" y 2="30" … /> </svg>

Path § <path> represent the geometry of the outline of an object § Define d with § moveto (set a new current point) M (abs) m (rel) § lineto (draw a straight line) L, l, H, h, V or v § curveto (draw a curve using a cubic Bézier) § Cubic Bézier C, c, S or s. Quadratic Bézier Q, q, T or t § arc (elliptical or circular arc) A or a § closepath (close the path (line to last moveto)) Z or z § Compound paths (i. e. , a path with multiple subpaths) are possible to allow effects such as "donut holes" in objects.

Text § Having <text> in the image § x, y position of the text § dx, dy shift the position horizontally/vertically § rotate § x, y, dx, dy, rotate have list of length § text. Length § length. Adjust (spacing or spacing. And. Glyphs) § Style attributes (font-family, font-size, …) § <tspan> modification within the <text> <text x="10, 20, 30" rotate="20" fill="red">Hello <tspan fill="blue" font-weight="bold">There</tspan>!</text>

Text § <tref> access text defined the text in <defs> <svg xmlns: xlink="http: //www. w 3. org/1999/xlink" …> <defs> <text id="my_ref"> Referenced text </text> </defs> <text x="10" y="20" font-size="45" fill="red"> <tref xlink: href="#my_ref"/> </text> </svg>

Text § Text along a path <text. Path> <svg xmlns: xlink="http: //www. w 3. org/1999/xlink" …> <defs> <path id="my_pa" d="M 50, 50 A 100, 50 0 1, 1 160, 110" /> </defs> <text. Path xlink: href="#my_pa" start. Offset="25%" method="stretch" spacing="auto"> Text along a curve : ) </text. Path> </svg>

Transform § the transform attribute apply transformation as define in its list of values (comma or space separated) § matrix(<a> <b> <c> <d> <e> <f>) § translate(<tx> [<ty>]) if ty not present it is 0 § scale(<sx> [<sy>]) if sy not present, same as sx § rotate(<rotate-angle> [<cx> <cy>]) § skew. X(<skew-angle>) § skew. Y(<skew-angle>) <rect transform="scale(2) rotate(45) translate(20)" … />

Grouping and using § Grouping <g> elements to apply styling or transformation or … to all of them. <g fill="red" transform="translate(20, 150)"> <circle … /> <line … /> <g transform="rotate(-35)"> <rect … /> <polygon … /> </g> § To <use> element defined in <defs><rect id="my_rect" … /></defs> <use x="20" y="10" xlink: href="#my_rect" />

Animation § The <animate> element is used to animate a single attribute or property over time. <rect y="10" width="50" height="30" fill="red"> <animate attribute. Type="CSS" attribute. Name="opacity" from="1" to="0" dur="5 s" repeat. Count="indefinite" /> <animate attribute. Name="x" attribute. Type="XML" begin="2 s" dur="9 s" from="300" to="0" /> </rect> § <animate. Motion> to move along a motion path § <animate. Color> transform a color over time § <animate. Transform> animates a transform attribute

And more § § § Filters effects Interactivity Font Clipping, Masking and Compositing Scripting Etc. Be curious

Tools § Inkscape (www. inkscape. org)

Sources § § § http: //www. w 3. org/TR/SVG/ http: //www. w 3. org/TR/SVGTiny 12/ http: //www. w 3. org/Graphics/SVG/ http: //en. wikipedia. org/wiki/Svg http: //www. w 3 schools. com/svg/ http: //www. learnsvg. com/