Search /
Docfinder:
Advanced search  |  Help  |  Site map
RESEARCH CENTERS
SITE RESOURCES
Click for Layer 8! No, really, click NOW!
Networking for Small Business
TODAY'S NEWS
Where's my gigabit Internet, anyway?
Americans cool with lab-grown organs, but not designer babies
IE6: Retired but not dead yet
Enterprise who? Google says little about Apps, business cloud services in Q1 report
DDoS Attackers Change Techniques To Wallop Sites
Can we talk? Internet of Things vendors face a communications 'mess'
AMD's profitability streak ends at two quarters
Michaels says breach at its stores affected nearly 3M payment cards
Exclusive: Google's Project Loon tests move to LTE band in Nevada
H-1B loophole may help California utility offshore IT jobs
How a cyber cop patrols the underworld of e-commerce
For Red Hat, it's RHEL and then…?
Will the Internet of Things Become the Internet of Broken Things?
Kill switches coming to iPhone, Android, Windows devices in 2015
Israeli start-up, working with GE, out to detect Stuxnet-like attacks
Galaxy S5 deep-dive review: Long on hype, short on delivery
Google revenue jumps 19 percent but still disappoints
Windows XP's retirement turns into major security project for Chinese firm
Teen arrested in Heartbleed attack against Canadian tax site
Still deploying 11n Wi-Fi?  You might want to think again
Collaboration 2.0: Old meets new
9 Things You Need to Know Before You Store Data in the Cloud
Can Heartbleed be used in DDoS attacks?
Secure browsers offer alternatives to Chrome, IE and Firefox
Linksys WRT1900AC Wi-Fi router: Faster than anything we've tested
/

XML worth a thousand pics

Gearhead archive

Last week we were cruel and unusual - we gave you a chunk of Scalable Vector Graphics code but put off explaining it until this week.

Now where were we. . . . The code:

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" "<a href="http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd</A>">

These are standard declarations that declare this is XML and that specify the Document Type Definition. DTD is a set of rules that define elements and attributes of an XML document and spell out how valid documents are structured. In effect, a DTD provides an integrity check on a specific type of XML content.

<svg xml:space="preserve" width="3in" height="3in"> . . . </svg>

This block defines the actual SVG code. Note xml:space="preserve" in the opening tag. Xml:space is a new XML tag attribute that defines whether white space (spaces, tabs and others) should be preserved by the process that parses XML.

If it is set to "preserve" then the white space should be passed through to the application - here, the SVG interpreter.

The parameters width="3in"height="3in" define the window in the document where the rendered SVG will be displayed. So inside the block:

<text style="fill:blue;" y="15">Gearhead was here.</text>

This specifies that the text is to be rendered in blue, in the default font and default font size, with a baseline 15 pixels from the top left corner of the display area (the origin). Next, we get tricky:

<text font-family="serif" font-size=" 12pt" fill="black" x="0" y="0"
transform="rotate(-90) translate(-100, 180) scale(1.5, 1)">
Cool.
</text>

Here we're defining 12 point, black text in the default font in the serif family to read "Cool." We're moving the text down and to the right relative to the origin, rotating it 90 degrees counterclockwise and stretching it by 50% along its original baseline.

This demo shows the basics of text and transformations under SVG. With SVG, there are three basic drawing elements: text, shapes and paths. Shapes include circles, squares and so on, while paths are chains of line segments that can optionally be specified as closed.

You may have already surmised that SVG files, while relatively small, get complex very quickly. Hand coding SVG graphics is not for the faint of heart.

To this end, a number of graphics tools have become available that support SVG images - for example, editors such as Adobe's Illustrator 9.0 and Jasc Software's WebDraw (see the W3C Web page on SVG editor implementations; and a number of viewers, including the Adobe one mentioned last week (see this page for a long list of viewers, many of which are open source and written in Java).

SVG is a standard to watch. Next week, we'll look at dynamic SVG.

Do as you're told: Write to gearhead@gibbs.com.

RELATED LINKS


NWFusion offers more than 40 FREE technology-specific email newsletters in key network technology areas such as NSM, VPNs, Convergence, Security and more.
Click here to sign up!
New Event - WANs: Optimizing Your Network Now.
Hear from the experts about the innovations that are already starting to shake up the WAN world. Free Network World Technology Tour and Expo in Dallas, San Francisco, Washington DC, and New York.
Attend FREE
Your FREE Network World subscription will also include breaking news and information on wireless, storage, infrastructure, carriers and SPs, enterprise applications, videoconferencing, plus product reviews, technology insiders, management surveys and technology updates - GET IT NOW.