w3schools
Search W3Schools :  
  
HOME HTML CSS XML JAVASCRIPT ASP PHP SQL MORE...   References Examples Forum About

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.




Altova® MapForce®
Graphical XML Mapping Tool from the Developers of XMLSpy®

Altova MapForce

Need an easy way to get data into XML, or transform XML to another format? MapForce lets you map XML data to/from any combination of XML, database, flat file, Excel 2007, XBRL, or Web services data. Then it transforms data instantly or auto-generates royalty-free data integration code for recurrent conversions.

Download a free, fully functional 30-day trial to experience the following features:
  • Easy-to-use, graphical data mapping interface
  • Instant data transformation
  • XSLT 1.0/2.0 and XQuery code generation
  • Java, C#, and C++ code generation
  • Advanced data processing functions
  • Support for all major relational databases including SQL Server, IBM DB2, Oracle, and more
  • Visual Studio & Eclipse integration

Download a fully-functional trial today!

  Altova MapForce


WEB HOSTING
Best Web Hosting
PHP MySQL Hosting
Top 10 Web Hosting
UK Reseller Hosting
Web Hosting
FREE Web Hosting
Top Web Hosting
Windows Hosting
WEB BUILDING
Download XML editor
FREE Flash Website
FREE Web Templates
Website Monetization
FLIGHT TICKETS
Find the cheapest flight
to any destination now!
EDUCATION
US Web Design Schools
HTML Certification
JavaScript Certification
XML Certification
PHP Certification
ASP Certification
STATISTICS
Browser Statistics
Browser OS
Browser Display
W3Schools.com HOME | TOP | PRINT | FORUM | ABOUT
W3Schools is for training only. We do not warrant the correctness of its content. The risk from using it lies entirely with the user.
While using this site, you agree to have read and accepted our terms of use and privacy policy.
Copyright 1999-2009 by Refsnes Data. All Rights Reserved.