Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Working with SVG Tools

Tuesday, January 21st, 2014 by Servage

inkscape-editing-svg-icon

Technically, all you need to create SVG graphics is a text editor (and genius visualization skills, as well as heroic patience!), but you’ll be much happier having a graphics program doing it for you. Fortunately, in Adobe Illustrator, you can choose “SVG (svg)” from the Format menu when saving a drawing and ta da—SVG file! If you don’t have Illustrator, try downloading the Inkscape image editor, which is made specifically for SVG (inkscape.org). It is available for Windows, Mac, and Linux. It takes a little getting used to, but you can’t beat the price (free).

Adding SVG to a page

An SVG image can be added to a web page using the object, embed, or iframe elements. HTML5 allows an svg element to be added directly inline as part of the HTML document with no containing element.

As of this writing, the object element pointing to an external .svg file has the best browser support, so I’m using that method in this example.

<!DOCTYPE html>
<html>
<head><title>SVG 4 U</title></head>
<body>

<p>Give SVG a try and see what it can do.</p>
</body>
</html>

The width and height attributes are required for the object to hold the proper amount of space for the image. If it is too small, the image will be clipped. And to prevent confusion, it is recommended that you include the file type (image/svg+xml) so browsers know what to do. Finally, the data attribute points to the .svg file itself.

qq

But wait…there’s more!

Our “SVG 4 U” example demonstrated SVG used for a static illustration, but SVG has more to offer.

Animation

SVG includes transform and transition features (the same used in CSS3), so any part of an SVG image can be animated using SVG syntax alone.

This code causes a black rectangle to contract and expand by 50% in a two-second loop.

<rect width="150" height="150" fill="black">
<animate attributeName="width" values="0%;50%;0%" dur="2s"
repeatCount="indefinite" />
<animate attributeName="height" values="0%;50%;0%" dur="2s"
repeatCount="indefinite" />
</rect>

Scriptable

Because all of the parts of an SVG file are in XML and are part of the DOM (the structured collection of objects in the document), you can use JavaScript to add behaviors like animation to SVG drawings. You could also use JavaScript to dynamically draw images based on user input in real time, such as generating a chart or graph that reflects values entered into a form. Cool stuff, and certainly beyond the scope of this chapter.

Style-able (if that’s a word)

You can also use CSS to affect the appearance of elements in SVG images.

Accessible

The content of an SVG image is available in an XML file, so it is potentially more accessible than the canvas element, which exists as an abstract grid of pixels. You can also add a title and description in the svg element.

Browser support

Just when we were having so much fun, I had to go and mention “browser support”! Actually, the news isn’t all bad. As I write this, the current version of every major browser, both desktop and mobile, has basic support for SVG images. And the situation has probably already improved by the time you are reading this.

Resources for further reading

W3 Schools

Site Point

Working with SVG Tools, 4.0 out of 5 based on 4 ratings
Categories: Guides & Tutorials

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.