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.
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.
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="http://www.website.com" title="Sample Title">
<img width=400 height=250 src="/images/logo.svg" ></a>
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. <image
xlink:href="http://www.yoursite.com/images/SampleImage.jpg"
x="100"
y="100"
width="400"
height="400"
id="Sample Image" />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?