Getting Down with ...

by ...

Lesson n:

Up to this point you have been creating SVG files from scratch with a text editor in typed documents. This is the best way of picking up the basics of using SVG files, but it is unwieldly for creating complicated images, and using visual effects such as gradients and filters. Fortunately, there is an easier way make SVG images: Inkscape. It's a free, open-source vector editing software, that uses .svg files as its native format. I recommend that you download a copy if you haven't already.

Before starting:

Not all changes in Inkscape will transfer smoothly to an SVG file in Xhtml, such as the Blur effect. It may, post-conversion, not render the same in Inkscape as it does in your web editor. There's multiple effects that cause this, but you'll learn yourself as you come across them.

This tells you now how to change the SVG on your original page.

Embedding SVGs as Graphics

Before Firefox 4, the best way to embed SVG files into HTML was to use the <embed> tag. This effectively links in an .svg document from a seperate file. Unfortunately, this tag caused problems, as sometimes the tag would ugly scrollbars to the edge of the .svg document, even when they were unneeded. However, now, to display SVG pictures, you can display them as you would with a .jpg or .png file, which simplifies things immensely.

An example:

<a id=logo href="" title="Sample Title">
<img width=400 height=250 src="/images/logo.svg" ></a>

Also, when using inkscape to create .svg files for internet use, it's better to SAVE AS "plain SVG" files, as these are more compatible.

Embedding Graphics in SVGs

You can also embed images inside your SVGs as you can with HTML. This useful is you want to create image galleries, or combine your SVG code with other conventional image formats. This is done with the handy <image> tag. This tag links in an image from another location or folder.
       id="Sample Image" />

The x and y have different values from the width and height. Try using the image tag yourself, and switching the width and height values. How are variables different?
Here is a rendered example: