Welcome to Scribd. Sign in or start your free trial to enjoy unlimited e-books, audiobooks & documents.Find out more
Standard view
Full view
of .
Look up keyword
Like this
0 of .
Results for:
No results containing your search query
P. 1
SVG Tutorial

SVG Tutorial

Ratings: (0)|Views: 159|Likes:
Published by api-19921804

More info:

Published by: api-19921804 on Dec 03, 2009
Copyright:Attribution Non-commercial


Read on Scribd mobile: iPhone, iPad and Android.
download as DOC, PDF, TXT or read online from Scribd
See more
See less





SVG Tutorial
SVG stands for Scalable Vector Graphics.
SVG defines graphics in XML format.
Introduction to SVG
SVG is a language for describing 2D-graphics and graphical applications in XML.
What you should already know
Before you continue, you should have some basic understanding of the following:
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 & Advantages
Sun 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 Files
All 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 Example
SVG is written in XML.
SVG Example
The 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"

<svg width="100%" height="100%" version="1.1"
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>

View example (only for SVG-enabled browsers)
(To view the SVG source, open the example and right-click in the example window. Select "View Source".)
Code explanation:

The first line contains the XML declaration. Notice the standalone attribute! This attribute specifies whether
the SVG file "stands alone", or contains a reference to an external file.
standalone="no" means that the SVG document has a reference to an external file - in this case, the DTD.
The second and the third line refer to the external SVG DTD. The DTD is located at
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd". The DTD resides at the W3C and it contains all
allowable SVG elements.
The SVG code begins with the <svg> element, which consists of the opening <svg> tag and the closing
</svg> tag. This is the root element. The width and height attributes set the width and height of the SVG
document. The version attribute defines the SVG version to be used and the xmlns attribute defines the
SVG namespace.
The SVG <circle> element is used to create a circle. 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). The r attribute defines
the radius of the circle.
The stroke and stroke-width attributes control how the outline of a shape appears. We set the outline of the
circle to a 2px wide, black "border".
The fill attribute refers to the color inside a shape. We set the fill color to red.
The closing </svg> tag closes the root SVG element and the document.

Note: All opening tags must have closing tags!
SVG in HTML Pages

SVG files can be embedded into HTML documents with the <embed> tag, the <object> tag, or the <iframe>
Below you should see three different methods on how to embed SVG files into HTML pages.

Using the <embed> Tag
The <embed> tag is supported in all major browsers, and allows scripting.

Note: 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> - The <embed> tag is not listed in any HTML specification.


<embed src="rect.svg" width="300" height="100"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

Note: The pluginspage attribute points to an URL for the plugin download.
Tip: Internet Explorer supports an additional attribute, wmode="transparent", that let the HTML page
background shine through.

Using the <object> Tag
The <object> tag is an HTML4 standard tag and is supported in all newer browsers. The disadvantage is
that it does not allow scripting.
Note: If you have installed the latest version of Adobe SVG Viewer, SVG files will not work when using the
<object> tag (at least not in Internet Explorer)!

<object data="rect.svg" width="300" height="100"
codebase="http://www.adobe.com/svg/viewer/install/" />

Note: The codebase attribute points to an URL for the plugin download.
Using the <iframe> Tag
The <iframe> tag works in most browsers.
<iframe src="rect.svg" width="300" height="100">
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:<html
<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 <rect>
SVG has some predefined shape elements that can be used and manipulated by developers.
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 following chapters will explain each element, starting with the rect element.
The <rect> Tag

The <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"
<svg width="100%" height="100%" version="1.1"
<rect width="300" height="100"

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)

You're Reading a Free Preview

/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->