introduction to svg (part 2) prepared by k.m.so department of computer science ver. 2 last update:...

Introduction to SVG (Part 2)

Prepared by K.M.SODepartment 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.

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

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.

Simple Grouping<svg width="5cm" height="5cm">

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>

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>

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>

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.

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.

The use element(3)<svg width="240px" height="240px" viewBox="0 0 240 240">

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.

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.

The defs element(2)<svg>

<g id="couple"> <use xlink:href="#man" x="0" y="0"/> <use xlink:href="#woman" x="25" y="0"/></g></defs>……

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.

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”/>

The Symbol element

Unlike the <g> element, a <symbol> is never display.

Symbols can specify viewBox and preserveAspectRatio attributes.

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>

The image element(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”

The image element(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.

The image element(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

Include a JPEG image with SVG

(72,92)

Include a JPEG image with SVG

viewBox="0 0 310 310">

<image xlink:href="kwanghwamun.jpg"

x="72" y="92" width="160" height="120"/> </svg>

Jasc webDraw– A free 30-day trial copy is available at – www.jasc.com

(Time: <10mins)

Activity

SVG drawing tools

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.

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.

Transformations(3)

Translation Matrix:

Rotation Matrix:

Scaling Matrix:

Transformations(4)

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.

Linear Transformations

<rect x="10" y="10" width="20" height="20"

style="fill: none; stroke:black; stroke-width: 2;"/>

</svg>

Scale Transformations (1)

style="fill: none; stroke: black;"/>

</svg>

Scale Transformations (2)

viewBox="0 0 200 200">

style="fill: none; stroke: black;"/>

</svg>

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)”

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 )”

Rotation Transformations

transform="rotate(45)" style="fill: black;"/>;

</svg>

Skew Transformations<svg width="200px" height="200px" viewBox="0 0 200 200">

<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="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>

RapidSVG– A professional SVG web site includes RapidSVG

download, demo and gallery– http://xstreamsoftware.com/demos_rsvg.htm

(Time: <15mins)

Activity

SVG drawing tools

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.

Paths(2) <svg width="4cm" height="4cm" viewBox="0 0 400 400">

Paths (move to and line to)<svg width="200px" height="200px"

viewBox="0 0 200 200">

<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>

Paths (close path)<svg width="200px" height="200px"

viewBox="0 0 200 200">

<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>

Paths shortcuts

Horizontal line (H h) Vertical line (V v) Multiple sets of coordinate<!– 6 paths draw the same diamond -->

(30,30)

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

Elliptical Arc

the paths used to draw the elliptical arcs in section (b) to (e)

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)

Activity

SVG drawing tools

Bezier Curves (1)

Quaratic Bezier Curve: Q x1 y1 x y

Q or q : command x1 y1 : control point x y : end point

(x1,y1)

current position

Bezier Curves (2) Smooth Quaratic Bezier Curve: T x y

T or t : command (Reflection of previous control point )

x y : end point

Reflection of control point

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

Bezier Curves (4)

Smooth Cubic Bezier Curve: S x2 y2 x y

C or c : command x2 y2 : control points (x1 y1 from reflection of

previous control point )

x y : end point

<path d="M30 100 C 50 30, 70 50, 100 100

S 150 40, 200 80“ />

Reflection of control point

SVGEditor– A online SVG web drawing tool demonstration– http://www.resource-solutions.de/svgeditor/

SVG viewBox– An example explores zooming with viewbox.– http://www.resource-solutions.de/svg/index.html

(Time: <10mins)

Activity

SVG drawing tools

Patterns Pattern is a graphic object that is replicated

horizontally and vertically to fill another object. patternUnits

objectBoundingBox

userSpaceOnUse

patternContentUnits

Tiles Pattern spaced by objectBoundingBox

<pattern id="tile" x="0" y="0" width="20%" height="20%"

patternUnits="objectBoundingBox"><path d="M 0 0 Q 5 20 10 10 T 20 20"

style="stroke: black; fill: none;"/>

<path d="M 0 0 h 20 v 20 h -20 z"

style="stroke: gray; fill: none;"/>

</pattern>

</defs>

style="fill: url(#tile); stroke: black;"/>

</svg>

Tiles Pattern spaced by userSpaceOnUse

<pattern id="tile" x="0" y="0" width="20%" height="20%"

patternUnits="userSpaceOnUse"><path d="M 0 0 Q 5 20 10 10 T 20 20"

style="stroke: black; fill: none;"/>

<path d="M 0 0 h 20 v 20 h -20 z"

</pattern>

</defs>

</svg>

Tiles Pattern spaced by patternContentUnits

<pattern id="tile” patternUnits="objectBoundingBox”

patternContentUnits="objectBoundingBox"

x="0" y="0" width=".2" height=".2"><path d="M 0 0 Q .05 .20 .10 .10 T .20 .20"

style="stroke: black; fill: none; stroke-width: 0.01;"/>

<path d="M 0 0 h 0.2 v 0.2 h-0.2z"

style="stroke: black; fill: none; stroke-width: 0.01;"/>

</pattern></defs>

style="fill: url(#tile); stroke: black;"/></g>

</svg>

Tiles Pattern scaled with viewBox

<defs>

<pattern id="tile" patternUnits="userSpaceOnUse"

x="0" y="0" width="20" height="20"

viewBox="0 0 150 150"><path d="M30 100 C 50 50, 70 20, 100 100, 110, 130, 45, 150, 65, 100"

style="stroke: black; stroke-width: 5; fill: none;"/>

</pattern>

</defs>

style="fill: url(#tile); stroke: black;"/></svg>

Linear Gradient:

Radial Gradient:

Gradients

Gradients LinearGradient (two-color)

preserveAspectRatio="xMinYMin meet">

<defs>

</linearGradient>

</defs>

style="fill: url(#two_hues); stroke: black;"/>

</svg>

Gradients LinearGradient (three-color)

preserveAspectRatio="xMinYMin meet">

<defs>

</linearGradient>

</defs>

style="fill: url(#three_hues); stroke: black;"/>

</svg>

Gradients LinearGradient (w/ direction x1 y1 x2 y2)

</linearGradient>

<linearGradient id="right_to_left” xlink:href="#three_stops"

x1="100%" y1="0%" x2="0%" y2="0%"/>

<linearGradient id="down" xlink:href="#three_stops"

x1="0%" y1="0%" x2="0%" y2="100%"/>

<linearGradient id="up" xlink:href="#three_stops"

x1="0%" y1="100%" x2="0%" y2="0%"/>

<linearGradient id="diagonal" xlink:href="#three_stops"

x1="0%" y1="0%" x2="100%" y2="100%"/>…...

Gradients

Gradients radialGradient

<defs>

</radialGradient>

</defs>

style="fill: url(#three_stops); stroke: black;"/>

Gradients Setting limits for a radialGradient

<defs>

<radialGradient id=”center_origin”

cx=“0” cy=“0” r=“100%”>

</radialGradient> </defs>

style="fill: url(# center_origin); stroke: black;"/>

Gradients Setting focal point for a radialGradient

<defs>

<radialGradient id=”focal_set”

cx=“0” cy=“0” fx=“30%” fy=“30%” r=“100%”>

</radialGradient> </defs>

style="fill: url(#focal_set); stroke: black;"/>

Gradients speadMethod ( pad, repeat, reflect )<svg width="400px" height="200px" viewBox="0 0 400 200"> preserveAspectRatio="xMinYMin meet">

<defs>

</radialGradient>

<radialGradient id="padded" xlink:href="#three_stops"

spreadMethod="pad"/>

</defs>

CGUI toolkit– object oriented ECMAScript library to create SVG based Custom

GUI elements inside a web browser

– http://homepage.usask.ca/~ctl271/cgui/index.shtml

(Time: <10mins)

Activity

SVG tools

The text element

<text> is used to specify text that is rendered with other graphical elements.

This means that we can apply transformation, clipping, masking, and so to text.

Fonts are as specified in CSS2.

<text> example

<desc>Example text01 - 'Hello, out there' in blue</desc>

<text x="2.5cm" y="1.5cm" style="font-family:Verdana;

font-size:16pt; fill:blue"> Hello, out there </text>

</svg>

Text placement and outlining

viewBox="0 0 200 200">

<path d="M 20 10, 20 120 M 10 30 100 30

M 10 70 100 70 M 10 110 100 110"

style="stroke: gray;"/>

<text x="20" y="30">Simplest Text</text>

<text x="20" y="70" style="stroke: black;"> Outlined/filled</text>

<text x="20" y="110" style="stroke: black;

stroke-width: 0.5; fill: none;">Outlined only</text></svg>

Text weight, style, decoration and spacing

viewBox="0 0 350 200">

<text x="120" y="20" style="font-style:italic;">italic</text>

<text x="20" y="60" style="text-decoration:underline;">under</text>

<text x="200" y="60" style="text-decoration:line-through;">through</text>

<text x="20" y="90" style="word-spacing: 10pt;">more word space</text>

<text x="20" y="120" style="word-spacing: -3pt;">less word space</text>

<text x="20" y="150" style="letter-spacing: 5pt;">wide letter space</text>

<text x="20" y="180" style="letter-spacing: -2pt;">narrow letter space</text>

</svg>

Text Alignment

<text x="100" y="30" style="text-anchor: start">Start</text>

<text x="100" y="60" style="text-anchor: middle">Middle</text>

</svg>

The tspan element

Switch among

<tspan style="font-style:italic">italic</tspan>

, normal, and

</text></svg>

Text on a Path

<defs>

<path id="curvepath"

d="M30 40 C 50 10, 70 10, 120 40 S 150 0, 200 40"

</defs>

Following a cubic Bézier curve.

</textPath>

</text>

Clipping to a Path<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN“ "http://www.w3.org/TR/2001/REC-SVG- 20010904/DTD/svg10.dtd"><svg width="200" height="200" viewBox="0 0 200 200"><defs><g id="cat"><circle cx="42" cy="57" r="30" style="stroke: black; fill: none;"/><circle cx="33" cy="48" r="3" style="stroke:black; fill:#999999;"/><circle cx="51" cy="48" r="3" style="stroke:black; fill:#999999;"/> <g id="whiskers"><line x1="45" y1="57" x2="81" y2="51" style="stroke: black;"/><line x1="45" y1="57" x2="81" y2="62" style="stroke: black;"/> </g><use xlink:href="#whiskers" transform="scale(-1 1) translate(-84 0)"/><polyline points="64.8 37.2, 54 6, 42 27, 30 6, 19.2 37.2“ style="stroke: black; fill: none;"/><polyline points="21 66, 27 72, 57 72, 62 66“ style="stroke: black; fill: none;"/> <path d="M 45 54 L 39 54 A 3 6 0 0 0 45 54“ style="stroke: black; fill: #cccccc;"/></g>

Masking a Graphic<svg width="350" height="200" viewBox="0 0 350 200"><defs>

Masking a Graphic (2)

Unmasked image Masked image

Masking a Graphic (3)<svg width="350" height="350" viewBox="0 0 350 350">

<defs>

</radialGradient>

style="fill: url(#fade);"/>

</mask></defs>

<image xlink:href="kwanghwamun.jpg" x="72" y="92“ width="160" height="120"

style="mask: url(#fademask);"/></svg>

Treebuilder.de– pipes Game

– SVG CrashDown

– Connect

– http://www.treebuilder.de/games.asp

(Time: <10mins)

Activity

SVG Games

Summary

Grouping and Use elements Image Transformations:

- translation, rotation, scaling, skew, sequences

Paths, Elliptical Arc, Bezier Curves Patterns and Gradients Text weight, style, placement and outlining, decoration and spacing Text on a Path Clipping to a Path Masking

end of day 2

introduction to svg (part 2) prepared by k.m.so department of computer science ver. 2 last update:...

Documents

the packages svg svg-extract -...

interoperability.blob.core.windows.netinteroperability.blob.core.windows.net/web/ms-svg/[ms...

svg essencial

svg lighting

svg unternehmensflyer

svg diamond private equity iii plc - rns submit · svg...

introduction -...

the packages svg svg-extract -...

svg super versatile gas burner -...

[ms-svg]: internet explorer scalable vector graphics (svg...

index svg...

make it, shake it, break it€¦ · web speech api demo 40....

scalable vector graphics (svg) specification · 1999. 7....

svg reference

svg valve gate - mastip hot runner solutions svg valve gate

svg in fritzing: a case study - svg open

svg & inkscape

die reduktion von zucker, fett und energie in ... · family...

photos of svg

html5 and svg