Database Journal: The Knowledge Center for Database Professionals

find a web host with:
CGI Access DB Support NT Servers UNIX Servers Telnet Access advanced search

internet.com Internet News Internet Investing Internet Technology Windows Internet Tech. Linux/Open Source Web Developer ECommerce/Marketing ISP Resources ASP Resources Wireless Internet Downloads Internet Resources Internet Lists International EarthWeb Career Resources Search internet.com Advertise Corporate Info Newsletters E-mail Offers

internet.commerce Be a Commerce Partner

Learning How to Code SVG:
Scalable Vector Graphics

Scalable Vector Graphics will let you draw graphics using inline code...and it's efficient!

Last week we got a quick glimpse at some of the power and promise contained in the World Wide Web Consortium's latest XML-derived webdoc standard, the soon-to-go-primetime SVG (Scalable Vector Graphics). We noted that contrary to what the name implies, SVG is not merely a graphics engine but rather a fully CSS-compliant, Unicode-ready document standard with all the power of XML, Cascading Style Sheets, and stroked/filled vector graphics contained in one flexible, easy-to-use XML tagset. Plus, like any good markup language these days, SVG adheres to the Document Object Model, which means every element inside an SVG doc is reachable from JavaScript. This, in turn, opens the door to scriptable animation, while also putting a moveto( )/lineto( ) graphics engine at the disposal of JavaScript programmers.

This week I want to show you what real, working SVG code looks like, and at the same time, make good on my earlier promise that you don't need anybody's fancy SVG authoring software to create SVG docs, because in actuality, any ordinary text editor will do. Without further fuss, let's take a look inside a small (yet fully functional) SVG file designed to produce a graphic similar to the one shown below:

The complete code for this image looks like this:

1 <?xml version="1.0" encoding="iso-8859-1"?>
2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 12August 1999//EN" "http://www.w3.org/Graphics/SVG/SVG-19990812.dtd">
3 <svg xml:space="preserve" width="1000" height="1000" >
4 <style type="text/css">
5 .redbox{fill:#FF0000;}
6 .whitewords{font-family:Times-Bold;font-size:36;fill:#FFFFFF;}
7 </style>
8 <g>
9 <rect class="redbox" x="10" y="0" width="460" height="50" />
10 <text class="whitewords" x="20" y="40" >This site is powered by SVG.</text>
11 </g>
12 </svg>

Before we walk through the code, I want to remind you that this file can constitute its own standalone Web page (for any browser that can recognize the mime-type 'image/svg'), or it can be incorporated into any HTML page using the <embed> tag. When embedded in an HTML file, the graphic is drawn inline, at that point in the file, the same way a JPEG or GIF image is.

Code Walkthrough

The opening line of the SVG file, beginning with '?xml version="1.0"...', identifies this as an XML file encoded in ASCII (that's what the reference to iso-8859-1 means). The second line, which starts with !DOCTYPE, gives version information and the URL where the Document Type Definition can be found.

The rest of the file is inside <svg></svg> tags. The opening <svg> tag gives the image's overall dimensions (which can be cropped or overridden from the embedding HTML page), along with information on how to treat whitespace characters. (In this instance, spaces are preserved rather than, say, collapsed.)

If you look at the remaining code, you'll see that it's really in two chunks: a chunk surrounded by <style></style> tags, and a chunk shrouded in <g></g> tags. The first segment represents style information, obviously. The second grouping is where the drawable elements occur.

[ Click here to move to the next part of this article ]

Fast Jump to Anywhere on WebDeveloper.com®:
Home Contact Us Free Newsletter News Site Map --------------------- ActiveX Advanced HTML Animated GIFs Browse by Category CGI/Programming Database Connectivity Design & Graphics Developers' Forum (BBS) Downloads Dr. Website ® E-Commerce HTML/Authoring Tools Intranet/Groupware Java JavaScript Library Multimedia News Opinions Product Reviews Refresh Daily: Editorial Column Security Servers & Server Tools Site Design & Graphics Site Management Tutorials VRML Web Developer Product Awards The XML Files ----RELATED SITES---- Browserwatch.com Java Boutique The JavaScript Source PC Webopaedia ScriptSearch Search Engine Watch Web Developer's Journal Web Developer's Virtual Library WebReference.com

---

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers

Solutions

Whitepapers and eBooks

Microsoft Article: New Date Data Types with SQL Server 2008 IBM CXO Whitepaper: The 2008 Global CEO Study - The Enterprise of the Future. Internet.com eBook: Becoming a Better Project Manager Nokia Whitepaper: Improving Performance Across Platforms with Qt and Multithreading

Microsoft Partner Portal: Helping Customers in a Down Economy Internet.com eBook: Web Development Frameworks for Java Internet.com eBook: Developing a Content Management System Strategy MORE WHITEPAPERS, EBOOKS, AND ARTICLES

Webcasts

Microsoft Video: Quick Start Your Windows Azure Development Microsoft Partner Portal Video: Microsoft Gold Certified Partners Build Successful Practices

HP On Demand Webcast: Grid Computing Meets Business MORE WEBCASTS, PODCASTS, AND VIDEOS

Downloads and eKits

Microsoft Download: Silverlight 2 SDK 30-Day Trial: SPAMfighter Exchange Module Iron Speed Designer Application Generator

Microsoft Download: Silverlight 2 Developer Runtime (Windows) Amyuni Download: PDF and XPS Engine for Your .NET and ActiveX Applications MORE DOWNLOADS, EKITS, AND FREE TRIALS

Tutorials and Demos

Microsoft Article: RIA Apps For Python and Ruby Developers--Made Possible With Silverlight 2 Access Silverlight Hosting Resources Microsoft Article: Getting Started with Silverlight for Eclipse

Internet.com Hot List: Get the Inside Scoop on the Hottest IT and Developer Products MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES

Contact the WebDeveloper.com® staff

Last modified: Friday, 22-Aug-2008 13:46:16 EDT

Refresh Daily
Join Editor-in-Chief David Fiedler and find truth, justice, and a clue or two.

[ Site Map ] ActiveX / VBscript Animated GIF Archive Browsers CGI / Perl Database Connectivity E-Commerce HTML-Advanced: DHTML, CSS HTML / Site Authoring Tools Intranet/Groupware Java JavaScript Multimedia: Audio / Video / Streaming Technologies Opinions Refresh Daily: Editorial Column Security Servers & Server Tools Site Design / Graphics Site Management / Marketing / Log File Analysis VRML / 3D XML