Scalable Vector Graphics

Boris Ristovski #9238

What is SVG? (1)

SVG stands for Scalable Vector Graphics SVG is used to define vector-based 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

What is SVG? (2)

Every element and every attribute in SVG files can be animated SVG is a World Wide Web Consortium ( (W3C) recommendation ) SVG integrates with other W3C standards such as the DOM and XSL

SVG Example (1)

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="50" r= 40 stroke= black r="40" stroke="black" stroke-width="2" fill="red"/> </svg>

SVG Development History

SVG was developed by the W3C SVG Working Group starting in 1998 g p g Sun Microsystems, Adobe, Apple, IBM, and Kodak are some of the organizations that g have been involved in defining SVG SVG 1.0 became a W3C on 04-09-2001 SVG 1.1 became a W3C on 14-01-2003 SVG Tiny 1 2 became a W3C Candidate 1.2 Recommendation on 10-08-2006 SVG Full 1 2 is W3C Working Draft 1.2

Advantages of using SVG

SVG files can be read and modified by a large range of tools ( g notepad) g g (e.g. p ) SVG files are smaller and more compressible than JPEG and GIF images p g SVG images are scalable SVG images can be printed with high quality at any resolution SVG images are zoomable. Any part of the zoomable image can be zoomed without degradation

Advantages of using SVG

Text in SVG is selectable and searchable ( (excellent for making maps) g p ) SVG works with Java technology SVG is an open standard SVG files are pure XML SVG drawings can be dynamic and interactive The biggest advantage SVG has over Flash is the compliance with other standards (e.g. (e g XSL and the DOM). DOM)

SVG allows
three types of graphic objects:
Vector graphic shapes (e.g. paths consisting of straight lines and curves, and areas bounded by them) curves Raster graphics images (e.g. bitmap / digital i ( bit di it l images) ) Text (Text can be in any XML namespace suitable to the application)

Vector VS Raster graphics

Scripting and animation

SVG drawings can be dynamic and interactive SVG animation can be accomplished by either of two ways: y
through scripting using ECMAScript through declarative markup using SMIL

However, the W3C recommendation for SVG animation explicitly prefers SMIL, rather than ECMAScript, as the standard for animation in SVG

Viewing SVG Files

Native support
Opera web browser (since 8 0) 8.0) Browsers based on the Gecko layout engine version 1 8 (such as Firefox, 1.8 Firefox Camino 1.0 and SeaMonkey suite 1.0) KDE's Konqueror has a fairly complete KDE s SVG plugin called KSVG Apple's Safari browser ported KSVG2 Apple s into WebCore

Viewing SVG Files

Plugin support
In browsers such as Internet Explorer 6 a 6, plugin is needed to view SVG content. y p g The most widely available SVG plugin on the desktop is from Adobe Systems (will discontinue support for Adobe SVG Viewer on 01 01 2008) 01-01-2008) "Renesis SVG Player" from Emia Systems A plugin was once offered from Corel For Safari on Intel machines, Safari must run under Rosetta for the Adobe plugin to work

Support in applications
Inkscape is an open source SVG drawing program Sodipodi is another free/open source SVG editing program, on which Inkscape is based. Ad b Ill t t Adobe Illustrator supports b th th import and t both the i t d export of SVG images. CorelDRAW has an SVG export and import filter filter. Xara Xtreme has an SVG export and import filter in its free/open source Linux version. Microsoft Visio can save files in the SVG format as well as the SVG compressed format p

Compression
If storage space is an issue, SVG images (which are just text files) can be saved with gzip compression, in which case they may be called "SVGZ files". SVGZ files . Because XML contains verbose text, it te ds tends to co p ess very well and these compress e y e a d t ese files can be much smaller than the o g a original.

Mobile Profiles
Because of industry demand, two mobile p profiles were introduced with SVG 1.1:
SVG Tiny (SVGT) SVG Basic (SVGB).

These are subsets of the full SVG standard, mainly intended for user agents with limited capabilities. In particular, SVG Tiny was defined for highly restricted mobile devices such as cellphones, and S G Basic d h ll h d SVG was defined for higher level mobile devices, such as PDAs

Impact on the WWW

A current trend is to build dynamic web sites that behave somewhat like desktop p applications, utilizing JavaScript-driven Dynamic HTML, and in many cases, the Ajax technique to transfer data between the web server and users SVG enhances the capabilities of Ajax, by providing a rich, graphical set of page elements, well beyond those specified by l t ll b d th ifi d b HTML/CSS

SVG Example (2)

<?xml version="1.0" encoding="utf-8" standalone="yes"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="520" height="520"> <style type="text/css"> <![CDATA[text{font-size:362px;font-weight:bold;font-family:Times New Roman, serif} #P0 {fill:#d4a000;stroke:#000;stroke-width:9} {fill:#d4a000;stroke:#000;stroke width:9} #P1 {fill:url(#tl)} #P2 {fill:url(#bl)} #P3 {fill:url(#br)} #P4 {fill:url(#tr)}]]> </style> <defs> <linearGradient id="dk"> <stop/> <stop style="stop-opacity:0" offset="1"/> </linearGradient> <linearGradient id="lt"> <stop style="stop-color:#ffe681"/> <stop style="stop-color:#ffe681;stop-opacity:0" offset="1"/> </linearGradient> <linearGradient x1="136.4" y1="136.4" x2="167.5" y2="167.5" id="tl" xlink:href="#lt" gradientUnits="userSpaceOnUse"/> <linearGradient x1="136.4" y1="383.6" x2="167.5" y2="352.5" id="bl" xlink:href="#lt" gradientUnits="userSpaceOnUse"/> <linearGradient x1="383.6" y1="383.6" x2="352.5" y2="352.5" id="br" xlink:href="#dk" gradientUnits="userSpaceOnUse"/> <linearGradient x1="383.6" y1="136.4" x2="352.5" y2="167.5" id="tr" xlink:href="#dk" gradientUnits="userSpaceOnUse"/> </defs> <path id="P0" d="M260,6.3L 6.3,260L 260,513.7L 513.7,260L 260,6.3z"/> <text y="380" x="200">!</text> <path id="P1" d="M260,12.7L 260,75L 75,260L 12.7,260L 260,12.7z"/> <path id="P2" d="M260,507.3L 260,445L 75,260L 12.7,260L 260,507.3z"/> <path id="P3" d="M260,507.3L 260,445L 445,260L 507.3,260L 260,507.3z"/> <path id="P4" d="M260,12.7L 260,75L 445,260L 507.3,260L 260,12.7z /> id P4 d M260,12.7L 260,12.7z"/> </svg>

SVG In HTML Pages

SVG files can be embedded into HTML documents with the <embed> tag the <object> tag the <iframe> tag

Using the <embed> Tag

The Adobe SVG Viewer recommends that you use the EMBED tag when embedding SVG in HTML pages! However, if you want to create valid XHTML, you cannot use <embed> Th <embed> tag is supported in all major The b d t i t di ll j browsers, and allows scripting

<embed src="rect.svg" width="300 height="100" e bed s c ect s g dt 300 e g t 00 type="image/svg+xml"

pluginspage="http://www.adobe.com/svg/viewer/install/ />

Using the <object> Tag

If you have installed the latest version of Adobe SVG Viewer, SVG files will not work when using the <object> tag The <object> tag is supported in all newer browsers and it does not allow scripting b d d t ll i ti

<object data="rect.svg" width="300" height="100" object data ect s g dt 300 e g t 00 type="image/svg+xml"

codebase="http://www.adobe.com/svg/viewer/install/" />

Using the <iframe> Tag

The <iframe> tag works in most browsers

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

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>

The <rect> Tag

The <rect> tag is used to create a rectangle and variations of a rectangle shape
<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" t l "fill d t k bl k h i ht "100" style="fill:red;stroke:black; stroke-width:5;opacity:0.5"/> </svg>
*The rx and the ry attributes rounds the corners of the rect The

The <rect> Tag

The <circle> Tag

The <circle> tag is used to create a circle
<svg width="100%" height="100%" version="1.1" xmlns http://www.w3.org/2000/svg > xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill " d"/ k id h "2" fill="red"/> </svg> *The r attribute defines the radius of the circle The

The <circle> Tag

The <ellipse> Tag

The <ellipse> tag is used to create an ellipse
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="300" cy="150" rx="200" ry="80" style="fill:rgb(200,100,50); stroke:rgb(0,0,100);stroke-width:2"/> </svg> / *The rx attribute defines horizontal ry vertical radius horizontal,

The <ellipse> Tag

The <line> Tag

The <line> tag is used to create a line
<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>
*The x1 attribute defines the start of the line on the x-axis *The y2 attribute defines the end of the line on the y axis y-axis

The <line> Tag

The <polygon> Tag

The <polygon> tag is used to create a graphic that contains at least three sides
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> xmlns "http://www w3 org/2000/svg"> <polygon points="220,100 300,210 170,250 123,234 points 220,100 123,234" style="fill:#cccccc; stroke:#000000;stroke-width:1"/> / g </svg>
*The points attribute defines the x and y coordinates for each corner of the polygon

The <polygon> Tag

The <polyline> Tag

The <polyline> tag is used to create any shape that consists of only straight lines
<svg width="100%" height="100%" version="1.1" xmlns= http://www.w3.org/2000/svg > 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>
*The points attribute defines the x and y coordinates for each corner of the polyline

The <polyline> Tag

The <path> Tag

The <path> tag is used to define a path
The following example creates a spiral: <svg width="100%" height="100%" version="1.1" xmlns http://www.w3.org/2000/svg > xmlns="http://www.w3.org/2000/svg"> <path d="M153 334 C153 334 151 334 151 334 C151 339 153 344 C164 344 171 339 171 334 C171 322 164 314 C142 314 131 322 131 334 C131 350 142 364 C175 364 191 350 191 334 C191 311 175 294 C131 294 111 311 111 334 C111 361 131 384 C186 384 211 361 211 334 C211 300 186 274 style="fill:white;stroke:red;stroke-width:2"/> </svg>

156 156 156 156 156 156

344 314 364 294 384 274"

The <path> Tag

The <path> Tag

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 h d l A = elliptical Arc Z = closepath

SVG Filters
SVG Filters is used to add special effects to shapes and text. You can use multiple filters on each SVG element. l t
feBlend feColorMatrix feComponentTransfer feComposite p feConvolveMatrix feDiffuseLighting feDisplacementMap feFlood feGaussianBlur feImage feMerge feMorphology feOffset feSpecularLighting feTile feTurbulence feDistantLight fePointLight

SVG Gaussian Blur

An SVG Filter must be defined within a <defs> tag <defs> <filter id="Gaussian_Blur"> <feGaussianBlur in="SourceGraphic" stdDeviation="20"/> </filter> </defs> <ellipse cx= 200 cy= 150 rx="70" ry="40" cx="200" cy="150" rx= 70 ry= 40 style="fill:#ff0000;stroke:#000000; stroke width:2;filter:url(#Gaussian_Blur) /> stroke-width:2;filter:url(#Gaussian Blur)"/>

SVG Gradients - Radial

Linear Gradients

Radial Gradients