The SVG image format is strange in some ways. You use it like other image formats (PNG, JPEG, etc.) but it technically has more in common with HTML.
The SVG Format
As we have said, the SVG image format is a vector image format created for use on the web (but not limited to the web: it can be used in any context you need a vector image).
The actual format of an SVG file is actually very similar to HTML: they were both created with similar underlying technologies. SVG images are stored as text files, and contain tags and attributes, much like HTML. Let's look again at the SVG image we created in the previous section using JavaScript and Raphaël:
Our JavaScript actually created this SVG code (simplified slightly here for readability) on the web page:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="200" height="100">
<ellipse stroke-width="4" stroke="#999" fill="#0f0"
ry="10" rx="40" cy="20" cx="50"></ellipse>
<text font-family="serif" font-size="14px" fill="#000"
text-anchor="middle" y="50" x="100">
<tspan dy="4.5">I think this is going well.</tspan>
</text>
<rect transform="matrix(0.866,0.5,-0.5,0.866,55.2757,-76.2917)"
stroke="#070" fill="none"
width="40" height="30" x="150" y="50"></rect>
</svg>
You can actually copy-and-paste that code into a text editor, save it as a .svg file and open it as an image.
You can see lots of recognizable things there. There are tags that open and close. The tags have attributes and contain content.
The details aren't important: you won't need to create SVG files like this but hopefully it will help you see why Raphaël works the way it does. For example, the .attr() method is named that way because it literally adds attributes to elements.
If you're exploring the Raphaël reference or some other SVG materials, you may see examples given or explained with SVG code like that.
You can also see a little of what Raphaël is doing to make things easier. For example, when creating the rectangle in that example, our code just specified “rotate 30 degrees” (with 'transform': 'r30'). Raphaël turned that into a “transformation matrix” which is nice, because I didn't want to do whatever calcuation created it.
Editing SVG
Inkscape is a free, open-source, vector graphics editor. It is designed as an SVG editor: the format that it works with by default and best is SVG.
We will generally be creating SVG with JavaScript and Raphaël, but that's really because we're using them as a programming exercise. Most of the time, if you need to create an SVG, Inkscape is a good choice.
As we work with Raphaël to create SVG, you can look back at Inkscape and see a correspondance between what can be done with the two tools. Both can create ellipses, rectangles, text, and so on. This is no accident: even though the work in a very different way, both are fundamentally tools to create SVG images.
You can also take a .svg file created by Inkscape and open it in a text editor. You will see code like the above that represents your image.