Here's what I've been working on:
Embedding Scaleable Vector Graphics in Webpages.
Up to this point you have been creating SVG files from scratch with a text editor in .xhtml 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 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.
<a id=logo href="http://www.website.com" title="Sample Title"> <img width=400 height=250 src="/images/logo.svg" ></a>
Wow, how thoroughly have you tested this? I'll talk to you this afternoon, but it seems this could replace the need to use the xhtml 1.1. + svg 2.0 + mathml 2.0 dtd altogether. Would you say that is correct?
ReplyDeleteI still want students to begin their exposure to SVG through editing a text file. I believe it to be the most effective way to drive home the point about what a vector graphic is. When they read that a vector graphic represents an image as a collection of geometric objects, they will *really* know what that means.
Great work! I look forward to talking with you this afternoon.