The first time you sign into developerWorks, a profile is created for you. Select information in your developerWorks profile is displayed to the public, but you may edit the information at any time. Your first name, last name (unless you choose to hide them), and display name will accompany the content that you post.

All information submitted is secure.

The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerworks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

All information submitted is secure.

My developerWorks:

My notifications:

Sign out

Select a language:

Scalable Vector Graphics (SVG)

Express vector graphics in XML form

Contributors: W3C

Summary: Use Scalable Vector Graphics (SVG), a vector graphics language, to describe two-dimensional vector graphics. Discover what's included in the SVG feature set, and learn about its relationship to Document Object Model (DOM), Cascading Style Sheets (CSS), XHTML, and more.

Date: 25 Apr 2007 (Published 06 Feb 2007)
Level: Intermediate

Activity: 2735 views
Comments:

Use Scalable Vector Graphics (SVG), a vector graphics language, to describe two-dimensional vector graphics. Discover what's included in the SVG feature set, and learn about its relationship to Document Object Model (DOM), Cascading Style Sheets (CSS), XHTML, and more.

Scalable Vector Graphics (SVG) 1.1 [W3C Recommendation] is a language for describing two-dimensional graphics. It is primarily a vector graphics language, though some raster graphics features are available. SVG has the remarkable ambition of providing a practical and flexible graphics format that's represented in the notoriously verbose XML, and it has been quite successful in this. SVG's feature set includes nested transformations, clipping paths, alpha masks, raster filter effects, template objects, and, of course, extensibility. SVG also supports animation, zooming and panning views, a wide variety of graphic primitives, grouping, scripting, hyperlinks, structured metadata, CSS, a specialized DOM superset, and easy embedding in other XML documents. Some of the design choices in SVG have been mildly controversial, including the fact that vector paths are expressed as space-delimited lists of numbers within individual attributes, but in the main SVG have been one of the most widely and warmly embraced XML applications. The specification has been translated to several languages.

SVG 1.1 is modularized in a similar fashion to XHTML 1.1+. This modularization allows for extension of SVG, and even reduction of SVG, as practiced in Mobile SVG Profiles: SVG Tiny and SVG Basic [W3C Recommendation], which define reduced sets of SVG modules that are suitable for mobile phones and personal digital assistants (PDAs). SVG 1.2 [in development] looks to add a whole spectrum of new tools that would make SVG a full-blown application platform in addition to a graphics format.

Resources

Learn SVG through practical browser examples in Uche Ogbuji's tutorials Create vector graphics in the browser with SVG (developerWorks, June 2006) and Dynamic SVG features for browsers (developerWorks, August 2006).
The tutorial Introduction to Scalable Vector Graphics by Nicholas Chase offers many examples (developerWorks, March 2004).
The SVG Wiki, a collaborative resource index and discussion page, is a public clearinghouse for all manner of information on the language.
ZVON's SVG reference serves as a map of element relationships, with some examples.
Read about other XML standards: Index of XML standards.
Participate in any of several XML-centered forums: XML zone discussion forums.
Get involved in the developerWorks community: developerWorks blogs
Find out how you can become an IBM-Certified Developer in XML and related technologies at IBM XML certification.
See the developerWorks XML Zone for a wide range of technical articles and tips, tutorials, standards, and IBM Redbooks at XML technical library.
Stay current with technology in these sessions: developerWorks technical events and webcasts.
Build your next development project with trial software available for download directly from developerWorks: IBM trial software

Comments

Close [x]

Help: Update or add to My dW interests

What's this?

This little timesaver lets you update your My developerWorks profile with just one click! The general subject of this content (AIX and UNIX, Information Management, Lotus, Rational, Tivoli, WebSphere, Java, Linux, Open source, SOA and Web services, Web development, or XML) will be added to the interests section of your profile, if it's not there already. You only need to be logged in to My developerWorks.

And what's the point of adding your interests to your profile? That's how you find other users with the same interests as yours, and see what they're reading and contributing to the community. Your interests also help us recommend relevant developerWorks content to you.

View your My developerWorks profile

Return from help

Close [x]

Help: Remove from My dW interests

What's this?

Removing this interest does not alter your profile, but rather removes this piece of content from a list of all content for which you've indicated interest. In a future enhancement to My developerWorks, you'll be able to see a record of that content.

View your My developerWorks profile

Return from help

static.content.url=http://www.ibm.com/developerworks/js/artrating/

SITE_ID=1

Zone=XML

ArticleID=193486

SummaryTitle=Scalable Vector Graphics (SVG)

publish-date=04252007