My Menu
Main Page
Downloads
Links
News
Search Engines
Documentation
About this Site
Privacy
Accessibility
Site Map
E-Mail Me
SVG: Getting in to It
Having looked a bit at what SVG Graphics are, we can now start to look into their creation with a bit of depth.
Before proceeding, it is recommend that you download one of the freely available SVG Plug-Ins for your Browser or stand-alone products. The graphics will not display properly without it.
Building a SVG Graphic is not rocket-science.
Despite all the mathematics that go on in the background, we the Users and Web-Page Designers, do not need to know any of it, to make SVG work.
All we need to know is that a line is called a LINE, a rectangle is called a RECT and a circle is called a CIRCLE.
SVG Graphics uses the XML programming language. The graphics use code that can be created by hand in a simple text editor, or simplified in more complex graphics programmes.
There are three ways to define SVG in a web documents 1. As a standalone SVG image or document, 2. As an imbedded element in an existing page, or 3. as an XHTML document with a namespace declaration. In our discussion we shall not be dealing with the third method of definition, namely the namespace declaration in the XHTML document.
Standalone Document Structure
The standalone document structure resembles:-
1. <?xml version="1.0" standalone="no"?>
2. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
3. <svg width="300" height="300" x="0" y="0">
4. <!--Your SVG content goes here -->
5. </svg>
Example of Standalone SVG Graphics
From "SVG: The Art is in the Code" Web Reference
In line 3, a <SVG> tag identifies that the graphic will be SVG, and defines its height and width. The X and Y place the image in the browser window, the X=0 places it at the image at the left side of the browser and the Y=0 places it at the top. Line 4 is the main line for insertion of the code. Line 5 </SVG> closes the SVG tag.