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).
<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.
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.
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.