demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

An Introduction to SVG

svg

Estimated reading time: 2 minutes, 35 seconds

Homer SimpsonI call SVG (Scalable Vector Graphics) “the forgotten image format” as historically it has been under appreciated and under-utilized by the web development community. This is no fault of the format itself, which has been around since 1999; the lack of use has been almost entirely due to poor browser support, most especially from (can you guess?) Internet Explorer.

However, IE9 finally has SVG support built in, and every other browser, including mobile versions, has long understood the format, meaning that SVG can finally have its day. So what is it?

As the acronym suggests, SVG is a vector format. Vector images consist of lines, strokes, and areas filled with color: think of maps, most logos, diagrams, illustrations, and the like. SVG can also be used for fonts.

The primary advantages of SVG are:

  • SVG images are infinitely scalable, without losing quality or resolution. (For example, scale this page while watching the SVG drawing of Homer Simpson above.)

  • SVG is created using XML, so it is free and open (no one entity “owns” the format) – you can create SVG images using a plain text editor like Notepad. For this reason, you’ll often find SVG used in open source or community endeavours: all logos and many diagrams on Wikipedia are in SVG, for example.

  • Because it is vector, the file size tends to be small. (SVG can be compressed even further using gzip).

  • As XML, SVG can be read and manipulated by and other languages, so it can be used for animation, interactivity, and in many other contexts (masking video, as paths for CSS animation, etc).

  • You can display an SVG file by linking to it with an <img /> tag, just as you would a JPEG, GIF or PNG. <object> and <iframe> methods are also supported, as is use of SVG in CSS background images. (You can also use the <svg> tag directly on your web page to create the vector image inline).

If you look at an SVG file in a text editor, you’ll see something like this at the start:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id=Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="612px" height="792px" viewBox="0 0 612 792"  enable-background="new 0 0 612 792" xml:space="preserve">

“But wait!” you’ll say, “This looks just like the opening lines of a full XHTML document!” And you’d be exactly right. It’s just the co-ordinates for drawing shapes and lines in the document that are a little difficult to code by hand: for that reason, it is common to create SVG documents through an application. (Importing, creating, manipulation and export of SVG is well-supported by Adobe Illustrator and Flash, along with other programs).

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.