Technologies

 

Introduction to SVG

SVG is a language for describing 2D graphics and graphical applications in 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 World Wide Web Consortium (W3C) recommendation
  • SVG integrates with other W3C standards such as the DOM and XSL

SVG History & Advantages

SVG 1.1 became a W3C Recommendation in January 2003.
Sun Microsystems, Adobe, Apple, IBM, and Kodak are some of the well-known organizations that have been involved in defining SVG.
Advantages of using SVG over other image formats (like JPEG and GIF):

  • 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. Any part of 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 two have a lot of similar features. 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.
The major drawback of SVG at the moment is that no browser fully supports SVG. However, the future of SVG seems bright: Mozilla and Microsoft plan to fully support SVG. Adobe GoLive 5 already supports SVG and the number of SVG editors are growing.
To view SVG files today, you will have to install a plug-in such as the Adobe SVG Viewer.

Viewing SVG Files

You cannot view SVG files if you do not have an SVG viewer installed.
Download an SVG Viewer for FREE from Adobe.

Opera user?

How to get the Adobe SVG Viewer to work with Opera

SVG Example

SVG is written in pure 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"
"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">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>

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 line and the third line refer to the external SVG DTD. The DTD is located at the URL "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 color inside of a shape, so here we set the fill value to red.
The closing </svg> tag closes the root SVG element and the document.

Note: Just like XML, all opening tags must have closing tags, and the closing tag of the root element must be the one to close the file.


SVG Structure

SVG can be defined as a standalone page, as an embedded object, or in an XHTML document with a namespace declaration.

SVG Document Structure

There are three ways of defining SVG in a Web document:

  • as a standalone SVG page
  • as an embedded element
  • in an XHTML document with a namespace declaration

The most powerful method of the three is displaying SVG through the use of namespaces. However, in this section we will only explain the first two methods.

A Standalone SVG Page

The following example defines a standalone SVG file. The file 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">
<svg xmlns="http://www.w3.org/2000/svg"
width="100%" height="100%" x="0" y="0">
  ....
  ....
  ....
</svg>

Since SVG is XML-based most of the search engines will not pick up a standalone SVG page. To solve this problem we can add SVG as an embedded element in an XHTML page.

SVG as an Embedded Element

The following example shows how to embed SVG within an XHTML document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<object data="test.svg" width="500"
height="500" type="image/svg+xml">
<embed src="test.svg" width="500"
height="500" type="image/svg+xml" />
</object>
</body>
</html>

The example above is a straightforward XHTML document.

Notice the use of the <object> and <embed> tags. According to the XHTML standard we should only use the <object> tag, but since Netscape does not support this tag we find it best to use both the <object> and <embed> tags.

By using this method the document will be picked up by search engines. This method also makes it easier to integrate other objects (e.g. sound, music, Flash) on the same web page. I think this method is the preferred one, until SVG is supported by the major browsers.


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"
"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
  • The CSS stroke property defines the color of the border of the rectangle

View example
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)

View example
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)

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

View example

Next
HOME    ::    HOSTING    ::    WEB DESIGN    ::    TUTORIALS    ::    PORTFOLIO    ::    CONTACT US    ::    ABOUT US   ::   FAQ   ::   LOGIN

Your Web Development Company © 2003. All rights Reserved