SVG Tutorial

SVG Tutorial SVG stands for Scalable Vector Graphics.SVG defines graphics in XML format.

Introduction to SVGSVG is a language for describing 2D-graphics and graphical applications in XML.

What you should already knowBefore you continue, you should have some basic understanding of the following:

HTML Basic XML

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 graphics do NOT lose any quality if they are zoomed or resized Every element and every attribute in SVG files can be animated SVG is a W3C recommendation SVG integrates with other W3C standards such as the DOM and XSL SVG is a W3C Recommendation

SVG became a W3C Recommendation 14. January 2003.

SVG History & AdvantagesSun Microsystems, Adobe, Apple, IBM, and Kodak are some of the organizations that have been involved in defining SVG.

Advantages of using SVG over other image formats (like JPEG and GIF) are: SVG files can be read and modified by a large range of tools (e.g. notepad) SVG files are smaller and more compressible than JPEG and GIF images SVG images are scalable SVG images can be printed with high quality at any resolution SVG images are zoomable (and the image can be zoomed without degradation) Text in SVG is selectable and searchable (excellent for making maps) SVG works with Java technology SVG is an open standard SVG files are pure XML

The main competitor to SVG is Flash.The biggest advantage SVG has over Flash is the compliance with other standards (e.g. XSL and the DOM). Flash relies on proprietary technology that is not open source.Look at a directory of SVG enabled software and services.

Viewing SVG FilesAll browsers support SVG files nowadays, except for Internet Explorer, which needs a plug-in. Those are available for free, as for example the Adobe SVG Viewer.

SVG ExampleSVG is written in XML.

SVG ExampleThe following example is an example of a simple SVG file. SVG files must be saved with an .svg extension:<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

1

type="image/svg+xml"codebase="http://www.adobe.com/svg/viewer/install/" /> Note: The codebase attribute points to an URL for the plugin download.

Using the <iframe> TagThe <iframe> tag works in most browsers.

Syntax:<iframe src="rect.svg" width="300" height="100"></iframe>

I Wish....It would be great if we could add SVG elements directly into the HTML code, only by referring to the SVG namespace, like this:<htmlxmlns:svg="http://www.w3.org/2000/svg"><body><p>This is an HTML paragraph</p><svg:svg width="300" height="100" version="1.1" ><svg:circle cx="100" cy="50" r="40" stroke="black"stroke-width="2" fill="red" /></svg:svg></body></html>

SVG <rect>SVG has some predefined shape elements that can be used and manipulated by developers.

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

The following chapters will explain each element, starting with the rect element.The <rect> TagThe <rect> tag is used to create a rectangle and variations of a rectangle shape.To understand how this works, copy the following code into Notepad and save the file as "rect1.svg". Place the file in your Web directory:<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg"><rect width="300" height="100"style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>

</svg>

Code explanation: The width and height attributes of the rect element define the height and the width of the rectangle The style attribute is used to define CSS properties 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

3

The CSS stroke property defines the color of the border of the rectangle

Let's look at another example that contains some new attributes:<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg"><rect x="20" y="20" width="250" height="250"style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9"/></svg>

Code explanation:The x attribute defines the left position of the rectangle (e.g. x="0" places the rectangle 0 pixels from the left of the browser window)The y attribute defines the top position of the rectangle (e.g. y="0" places the rectangle 0 pixels from the top of the browser window)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)

Define the opacity for the whole element:<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg">

<rect x="20" y="20" width="250" height="250"style="fill:blue;stroke:pink;stroke-width:5;opacity:0.9"/>

</svg>

Code explanation:The CSS opacity property defines the opacity value for the whole element (legal range: 0 to 1)

Last example, create a rectangle with rounded corners:<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg"><rect x="20" y="20" rx="20" ry="20" width="250"height="100" style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/></svg>

Code explanation:The rx and the ry attributes rounds the corners of the rectangle

SVG <circle> The <circle> tag is used to create a circle. The <circle> Tag The <circle> tag is used to create a circle.

Copy the following code into Notepad and save the file as "circle1.svg". Place the file in your Web directory:<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

4

SVG <line>The <line> tag is used to create a line.

The <line> TagThe <line> tag is used to create a line.Copy the following code into Notepad and save the file as "line1.svg". Place the file in your Web directory:<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="300" y2="300"style="stroke:rgb(99,99,99);stroke-width:2"/></svg>

Code explanation: 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

SVG <polygon>The <polygon> tag is used to create a graphic that contains at least three sides.

The <polygon> TagThe <polygon> tag is used to create a graphic that contains at least three sides.Copy the following code into Notepad and save the file as "polygon1.svg". Place the file in your Web directory:<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg"><polygon points="220,100 300,210 170,250"style="fill:#cccccc;stroke:#000000;stroke-width:1"/></svg>

Code explanation:The points attribute defines the x and y coordinates for each corner of the polygon

The following example creates a polygon with four sides:<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg"><polygon points="220,100 300,210 170,250 123,234"style="fill:#cccccc;stroke:#000000;stroke-width:1"/></svg>

SVG <polyline>The <polyline> tag is used to create any shape that consists of only straight lines.

The <polyline> TagThe <polyline> tag is used to create any shape that consists of only straight lines.

6

Copy the following code into Notepad and save the file as "polyline1.svg". Place the file in your Web directory:<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg"><polyline points="0,0 0,20 20,20 20,40 40,40 40,60"style="fill:white;stroke:red;stroke-width:2"/></svg>

SVG <path>The <path> tag is used to define a path.

The <path> TagThe <path> tag is used to define a path.The following commands are available for path data:M = movetoL = linetoH = horizontal linetoV = vertical linetoC = curvetoS = smooth curvetoQ = quadratic Belzier curveT = smooth quadratic Belzier curvetoA = elliptical ArcZ = closepath

Note: All of the commands above can also be expressed with lower letters. Capital letters means absolutely positioned, lower cases means relatively positioned.Copy the following code into Notepad and save the file as "path1.svg". Place the file in your Web directory:<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg"><path d="M250 150 L150 350 L350 350 Z" /></svg>

The example above defines a path that starts at position 250 150 with a line to position 150 350 then from there a line to 350 350 and finally closing the path back to 250 150.The following example creates a spiral:<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg">

<path d="M153 334C153 334 151 334 151 334C151 339 153 344 156 344C164 344 171 339 171 334C171 322 164 314 156 314C142 314 131 322 131 334C131 350 142 364 156 364C175 364 191 350 191 334C191 311 175 294 156 294C131 294 111 311 111 334C111 361 131 384 156 384C186 384 211 361 211 334C211 300 186 274 156 274"

7

style="fill:white;stroke:red;stroke-width:2"/></svg> Complex? YES!!!! Because of the complexity involved in drawing paths it is highly recommended to use an SVG editor to create complex graphics.

SVG FiltersSVG 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!

SVG Gaussian BlurAn SVG Filter must be defined within a <defs> tag.

Gaussian BlurThe <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 nested within a <defs> tag. The <defs> tag is short for definitions and it allows definition of special elements such as filter.Copy the following code into Notepad and save the file as "filter1.svg". Place the file in your Web directory:<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg"><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)"/></svg>

Code explanation:The id attribute of the <filter> tag defines a unique name for the filter (the same filter can be used by many elements in the document)The filter:url(#Gaussian_Blur) property is used to link an element to a filter. The # character must be used when linking to the filters id

8

The filter effect is defined with the <feGaussianBlur> tag. The fe prefix is used for all filtersThe stdDeviation attribute of the <feGaussianBlur> tag defines the amount of the blurThe in="SourceGraphic" part defines that the effect is created from the whole image

Another example with a different stdDeviation:<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg"><defs><filter id="Gaussian_Blur"><feGaussianBlur in="SourceGraphic" stdDeviation="20"/></filter></defs><ellipse cx="200" cy="150" rx="70" ry="40"style="fill:#ff0000;stroke:#000000;stroke-width:2;filter:url(#Gaussian_Blur)"/></svg>

SVG Gradients - LinearAn SVG Gradient must be defined within a <defs> tag.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 Linear Gradients

The <linearGradient> tag is used to define an SVG linear gradient.The <linearGradient> tag must be nested within a <defs> tag. The <defs> tag is short for definitions and it allows definition of special elements such as gradients.

Linear gradients can be defined as horizontal, vertical or angular gradients: Horizontal gradients are created when y1 and y2 are equal and x1 and x2 differ Vertical gradients are created when x1 and x2 are equal and y1 and y2 differ Angular gradients are created when x1 and x2 differ and y1 and y2 differ

Copy the following code into Notepad and save the file as "linear1.svg". Place the file in your Web directory:<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg"><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)"/></svg>

Code explanation:The id attribute of the <linearGradient> tag defines a unique name for the gradientThe fill:url(#orange_red) property links the ellipse element to the gradient

9

The x1, x2, y1,y2 attributes of the <linearGradient> tag define the starting and ending position of the gradientThe 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 endView example (Horizontal gradient)Another example:<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="orange_red" x1="0%" y1="0%" x2="0%" y2="100%"><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)"/></svg>

VG Gradients - RadialAn SVG Gradient must be defined within a <defs> tag.

Radial GradientsThe <radialGradient> tag is used to define an SVG radial gradient.The <radialGradient> tag must be nested within a <defs> tag. The <defs> tag is short for definitions and it allows definition of special elements such as gradients.Copy the following code into Notepad and save the file as "radial1.svg". Place the file in your Web directory:<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg"><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"style="fill:url(#grey_blue)"/></svg>

Code explanation:The id attribute of the <radialGradient> tag defines a unique name for the gradientThe fill:url(#grey_blue) property links the ellipse element to the gradientThe cx, cy and r attributes define the outermost circle and the fx and fy define the innermost circleThe 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

View exampleAnother example:<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg">

10

<defs><radialGradient id="grey_blue" cx="20%" cy="40%" 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"style="fill:url(#grey_blue)"/></svg>

SVG ExamplesViewing SVG FilesAll browsers support SVG files nowadays, except for Internet Explorer, which needs a plug-in. Those are available for free, as for example the Adobe SVG Viewer.

Viewing SVG SourceTo view the SVG source, open the example and right-click in the example window. Select "View Source".

SVG Examples

SVG ShapesA rectangleA rectangle with opacityA rectangle with opacity 2A rectangle with rounded cornersA circleAn ellipseThree ellipses on top of each otherTwo ellipses

A lineA polygon with three sidesA polygon with four sidesA polylineA pathA spiral

SVG FiltersA feGaussianBlur filterAnother feGaussianBlur filterA feBlend filterA feColorMatrix filterA feComponentTransfer filterA feOffset filterfeOffset, feFlood, feComposite, feMerge, and feMergeNode

A feMorphology filterFilter 1Filter 2Filter 3Filter 4Filter 5Filter 6

SVG Gradients

Grad linear (horizontal gradient)Grad linear (vertical gradient)

11

Grad radialGrad radial 2

SVG MiscAdd an <a> element to a rectangle. The rectangle will act as a hyperlinkUse a JavaScript to create an a element when the user clicks on a circle Rectangle that repeatedly fade away over 5 secondsAnimate the x, y, width, and height attributes of a rectangle and change the color of the rectangle

Three rectangles that will change color Text that will move along a motion pathText that will move, rotate and scale along a motion pathText that will move, rotate and scale along a motion path + a rectangle that will "grow" and change color

SVG Elements ReferenceThe SVG elements from the W3C Recommendation (SVG Version 1.1).

SVG ElementsThe links in the "Element" column point to attributes and more useful information about the specific element.

Element Description

a Defines a hyperlink

altGlyph Allows control over glyphs used to render particular character data (e.g. for music symbols or Asian text)

altGlyphDef Defines a set of glyph substitutions (e.g. for music symbols or Asian text)

altGlyphItem Defines a candidate set of glyph substitutions (e.g. for music symbols or Asian text)

animate Animates an attribute or property over time

animateColor Specifies a color transformation over time

animateMotion Causes an element to move along a motion path

animateTransform Animates a transformation attribute on an element

circle Defines a circle

clipPath

color-profile Specifies a color profile description

cursor Defines a platform-independent cursor

definition-src Defines a separate font definition resource

defs A container for referenced elements

desc A text-only description for elements in SVG - not displayed as part of the graphics. User agents may display the text as a tooltip

ellipse Defines an ellipse

12

feBlend SVG filter. Composites two objects together using different blending modes

feColorMatrix SVG filter. Applies a matrix transformation

feComponentTransfer SVG filter. Performs component-wise remapping of data

feComposite SVG filter.

feConvolveMatrix SVG filter.

feDiffuseLighting SVG filter.

feDisplacementMap SVG filter.

feDistantLight SVG filter. Defines a light source

feFlood SVG filter.

feFuncA SVG filter. Sub-element to feComponentTransfer

feFuncB SVG filter. Sub-element to feComponentTransfer

feFuncG SVG filter. Sub-element to feComponentTransfer

feFuncR SVG filter. Sub-element to feComponentTransfer

feGaussianBlur SVG filter. Performs a Gaussian blur on the image

feImage SVG filter.

feMerge SVG filter. Creates image layers on top of each other

feMergeNode SVG filter. Sub-element to feMerge

feMorphology SVG filter. Performs a "fattening" or "thinning" on a source graphic

feOffset SVG filter. Moves an image relative to its current position

fePointLight SVG filter.

feSpecularLighting SVG filter.

feSpotLight SVG filter.

feTile SVG filter.

feTurbulence SVG filter.

filter Container for filter effects

13

font Defines a font

font-face Describes the characteristics of a font

font-face-format

font-face-name

font-face-src

font-face-uri

foreignObject

g A container element for grouping together related elements

glyph Defines the graphics for a given glyph

glyphRef Defines a possible glyph to use

hkern

image

line Defines a line

linearGradient Defines a linear gradient

marker

mask

metadata Specifies metadata

missing-glyph

mpath

path Defines a path

pattern

polygon Defines a closed shape that consists of a set of connected straight lines

polyline Defines a set of connected straight lines

radialGradient Defines a radial gradient

rect Defines a rectangle

14

script Container for scripts (e.g., ECMAScript)

set Sets the value of an attribute for a specified duration

stop

style Allows style sheets to be embedded directly within SVG content

svg Defines an SVG document fragment

switch

symbol

text

textPath

title A text-only description for elements in SVG - not displayed as part of the graphics. User agents may display the text as a tooltip

tref

tspan

use

tspan

use

view

vkern

By: DataIntegratedEntity22592Source: http://w3schools.com/svg/default.asp

15

SVG Tutorial

Documents

Transcript of SVG Tutorial