Web Technology @ CCBC

Student driven blog for all things web.

SVG Images 101

Posted by GPC on August 29, 2007

Introduction
SVG (Scalable Vector Graphics) is a language for describing two-dimensional graphics, with possible animation, in XML. The standard specifications for this language can be found here.

Background
To understand why SVG images are useful, we need to first discuss how they differ from bitmap images:

A Bitmap graphic is a representation, consisting of rows and columns of dots (pixels), of an image in computer memory. They do nothing more than archive an image one square at a time. You’ve seen these images everywhere, and have probably created a few yourself. GIF, BMP, JPEG, these are all bitmap image types.

On the other hand a vector graphic is an image made up of individual objects instead of pixels; and these objects are defined by mathematical equations. These equations are rendered on demand, meaning the image is completely generated when you ask for it. SVG images fall into this category, however the mathematical equations are being represented by XML tags.

Features
Since SVG images are plain-text XML code, they can be scaled, manipulated, or even created dynamically on Websites by PHP, ASP, Javascript, and more:

  • Image scaling without pixelation, blur, or compression.
  • Default anti-aliasing.
  • Animation.
  • Future support for XHTML integration through foreign namespaces (SVG code directly in the XHTML page).

And best of all, they can be created easily in professional art programs like Adobe Illustrator and Inkscape (Linux).

Examples
This is the SVG image code of a red circle outlined in blue:

<?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 width="12cm" height="4cm" viewBox="0 0 1200 400"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="600" cy="200" r="100"
fill="red" stroke="blue" stroke-width="10" />
</svg>

This should give you an idea of how the SVG image is written. You can even save this code in a text file, named something like “circle.svg”, and it will actually render in a Web browser as an image!

Resources
If you wish to learn more about how you can create and use SVG images on Websites and more, check out the links below:

SVG at W3CSchools
Basic Shapes in SVG
SVG images in HTML
Dynamic graphs with SVG
SVG at Wikipedia

Advertisements

7 Responses to “SVG Images 101”

  1. vjnoone said

    Awesome write up! this is actually a topic in WEBT 143. Oh yeah, now I know why it sounds familiar! ;~)

  2. stelt said

    maybe you want to add http://svg.startpagina.nl to the list of links

  3. graveyardpc said

    I didn’t know that one, even though it’s half German it’s still a good resource site. Thanks.

  4. graveyardpc said

    Well, I can’t add it to the list. I’m missing editing permission now that the entry is submitted. At least it’s in the comments.

  5. wyattx21 said

    good find!

  6. stelt said

    graveyardpc, it’s not half German, it’s half Dutch (which certainly has similarities)

  7. graveyardpc said

    “Dutch is a West Germanic language spoken by around 23 million people…” So I was pretty close.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: