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
(Part 2)

Style Sheets

SVG uses ordinary Cascading Style Sheet syntax, so if you're at home with CSS styles you'll be right at home with styles for SVG. Notice in this case, we've got two style selectors to choose from:

.redbox{fill:#FF0000;}
.whitewords{font-family:Times-Bold;font-size:36;fill:#FFFFFF;}

In our "redbox" style, we've set one property: the fill color, which is red. The default color space in SVG is RGB, and the default way of specifying an RGB color is in hexadecimal notation with two hex bytes per color channel. So #FF0000 represents an RGB value in which red has been cranked up full blast while the other two channels have been zeroed out.

In the "whitewords" style, we've set a number of properties, including not only the typeface (the 'font-family' property) but the font size (36 points) and the fill color (all channels turned on full blast, thus white). Any words drawn in this style will have white letters, which will obviously stand out nicely against a colored background (but would be invisible against a white background).

The Drawing Code

The code that results in stuff getting drawn onscreen looks like this:

<g>
<rect class="redbox" x="10" y="0" width="460" height="50" />
<text class="whitewords" x="20" y="40">This site is powered by SVG.</text>
</g>

Within the grouping ('g') tags, we have two objects: a rectangle, and a text block.

The rectangle uses our "redbox" style (defined earlier) and has its top left corner located at [10,0] in screen coordinates. (Note: In SVG, the default coordinate system has the origin in the upper left corner of the browser window and the 'y' axis increasing in the downward direction. But this configuration can be customized to almost anything you want.) The width of the rectangle is given as 460 pixels and the height as 50 pixels. (All units are in pixels by default, unless you specify some other unit scheme.) Notice that attribute names are plain, but attribute values are always inside double quotes. Also notice the XML way of closing off the rect tag, with a forward slash and greater-than sign.

The text block is given a style of "whitewords" and an initial x-y position of [20,40], which puts the beginning of the first letter 20 pixels in from the left edge of the window and 40 pixels down from the top. Since the type is 36 points high, and the rectangle it sits in is 50 pixels high, this effectively puts the text baseline 10 pixels up from the bottom edge of the rectangle yet leaves at least 4 pixels of "headroom" above the tallest letters.

Incidentally, in case you're wondering, SVG is fairly flexible about attribute ordering. You could just as well put the class attribute after the x-y position attributes (or randomly order the height, width, x, y, and class attributes for the rectangle); it wouldn't matter at all for correct parsing of the file.

One final thing to make careful note of is that in SVG, objects are drawn in the order listed. Therefore, if you want your text to be drawn on top of the rectangle (and not the other way around), you do have to list the text last. But that only makes sense, doesn't it?

Zoomable Text

The little graphic we just made won't win any design awards, but it will certainly show off SVG's native graphics capabilities in terms of on-the-fly rescalability. If you have one of the free SVG viewers I mentioned last time, such as IBM's SVGView software for Windows, you should be able to zoom in or zoom out on this little graphic to your heart's content; and at any magnification, the text will be correctly antialiased (unless you turn off antialiasing manually). Also, the text remains searchable by search engines even though it's a stroked and filled component of a piece of vector art. (It hasn't been decomposed into ASCII-less "outlines.")

If we want, we could insert a transform attribute into the top <g> tag in order to scale, rotate, reflect, or shear the entire graphic (i.e., both the rectangle and the enclosed words) as one, making it draw anywhere on the page, in any angular orientation, at any size. For even more fun, we could write JavaScript code that alters the rectangle's fill color in response to "onmouseover" events, creating an instant rollover effect. Or we could hook the transform just mentioned to an "onclick" handler and make the entire logo rotate in 5-degree increments in response to mouse clicks. The possibilities are (as they say) pretty much endless.

For more information on Scalable Vector Graphics, be sure to visit W3C's SVG pagealong with the resources at SVG Central. And don't forget. Something Very Good lies just ahead.

Kas Thomas runs the Acroforms site, and is an accomplished author, programmer, and expert on light aircraft maintenance and operation.

[ Click here if you missed the first part of this article ]

This article first appeared in November, 1999.

If SVG sounds interesting, don't miss WDVL's coverage of SVG!

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:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info

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

Solutions

Whitepapers and eBooks

Intel Whitepaper: Comparing Two- and Four-Socket Platforms for Server Virtualization IBM Solutions Brief: Go Green With IBM System xTM And Intel HP eBook: Simplifying SQL Server Management IBM Contest: Are You the Next Superstar? Join the "Search for the XML Superstar" Contest to Find Out Microsoft PDF: Top 10 Reasons to Move to Server Virtualization with Hyper-V Microsoft PDF: Six Reasons Why Microsoft's Hyper-V Will Overtake Vmware Microsoft Step-by-Step Guide: Hyper-V and Failover Clustering Intel PDF: Quad-Core Impacts More Than the Data Center Intel PDF: Virtualization Delivers Data Center Efficiency Go Parallel Article: PDC 2008 in Review Microsoft PDF: Top 11 Reasons to Upgrade to Windows Server 2008 Avaya Article: Communication-Enabled Mashups: Empowering Both Business Owners and IT Intel Whitepaper: Building a Real-World Model to Assess Virtualization Platforms

PDF: Intel Centrino Duo Processor Technology with Intel Core2 Duo Processor Microsoft Article: Build and Run Virtual Machines with Hyper-V Server 2008 Go Parallel Article: Q&A with a TBB Junkie IBM Whitepaper: Innovative Collaboration to Advance Your Business Internet.com eBook: Real Life Rails IBM eBook: The Pros and Cons of Outsourcing Internet.com eBook: Best Practices for Developing a Web Site IBM CXO Whitepaper: The 2008 Global CEO Study "The Enterprise of the Future" Avaya Article: Call Control XML in Action - A CCXML Auto Attendant IBM CXO Whitepaper: Unlocking the DNA of the Adaptable Workforce--The Global Human Capital Study 2008 Adobe Acrobat Connect Pro: Web Conferencing and eLearning Whitepapers HP eBook: Guide to Storage Networking MORE WHITEPAPERS, EBOOKS, AND ARTICLES

Webcasts

Attend the IBM Service Management World Tour--Register now! Video: Intel Launches Data Center Efficiency Initiative Intel Podcast: Talking vPro Go Parallel Video: Intel(R) Threading Building Blocks: A New Method for Threading in C++ HP Video: Is Your Data Center Ready for a Real World Disaster? Microsoft Partner Portal Video: Microsoft Gold Certified Partners Build Successful Practices HP On Demand Webcast: Virtualization in Action

Go Parallel Video: Performance and Threading Tools for Game Developers Rackspace Hosting Center: Customer Videos Intel vPro Developer Virtual Bootcamp HP Disaster-Proof Solutions eSeminar HP On Demand Webcast: Discover the Benefits of Virtualization MORE WEBCASTS, PODCASTS, AND VIDEOS

Downloads and eKits

IBM e-Kit: Reduce Complexity and Cost with BladeCenter Amyuni Download: PDF & XPS Engine for Your .NET and ActiveX Applications Acresso Download: Try InstallShield 2009 Microsoft Download: Silverlight 2 SDK Access Crystal Reports for Eclipse Basic Edition (Free) 30-Day Trial: SPAMfighter Exchange Module

IBM Energy Efficiency e-Kit Shows You How to Reduce Costs Red Gate Download: SQL Toolbelt Iron Speed Designer Application Generator Microsoft Download: Silverlight 2 Developer Runtime (Windows) MORE DOWNLOADS, EKITS, AND FREE TRIALS

Tutorials and Demos

VMware Online Virtualization Forum: Learn about the benefits of a virtual infrastructure, network with industry experts--Register today! Demo: Dual-Core Intel Itanium 2 Processor IBM IT Innovation Article: Green Servers Provide a Competitive Advantage

Microsoft Article: Making Designer/Developer Collaboration a Reality MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES

Contact the WebDeveloper.com® staff

Last modified: Friday, 22-Aug-2008 13:46:15 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