SVG Kickstart 2: Passing Second Grade Geometry with Flying Colors (and Shapes)
Table of Contents
- SVG KICKSTART TUTORIAL #1
- SVG KICKSTART TUTORIAL #2
- 1. Introduction
- 2. Serving Up A Slice of SVG Pie
- 3. The Shape Of Things And Other Stuff
- 4. Colour Me Stupid
- 5. Basic Shapes And Colours Are Boring!
- 6. Don't Be A Tool, Use A Tool
- 7. Conclusion
6. Don't Be A Tool, Use A Tool
Hehe, you said "tool"...
Up to a point, it's nice to be able to create your graphics by hand using nothing more than a text-editor. However, when we want to move beyond simple rectangles, circles and lines, describing complex shapes becomes a challenge. The SVG <path> element allows users to specify arbitrarily complex shapes but unless you have the ability to visualize multiple Bezier curves and their control points in your mind, you're not going to get very far from basic shapes and colours. SVG paths should be constructed using a graphical drawing program that allows you to sketch your image and then play with each vertex/control point at whim.
There are several well-known SVG editing/drawing programs freely available: Inkscape, Sodipodi (an ancestor of Inkscape) and Sketsa. Inkscape and Sodipodi are both Open Source. Sketsa has an evaluation license and a single user license of $99. Of those three, I consider Inkscape to be the most "feature-complete" as of this writing (July 2005) with lots of active development going on (Google's Summer of Code is sponsoring 4 students this summer). Kiyut also has active releases of Sketsa every couple months. It does not seem like there has been any active development of Sodipodi since Nov 2003 and the author states that "there are no stable sodipodi releases yet" but I could be wrong on what this means. For those with deeper pockets, you may want to spring for the plush Adobe Illustrator or Corel Draw, both of which support output in SVG format.
Personally I have tried Inkscape and after reading through some of their beginner tutorials, I was able to crank out basic images. The below is an example of a conceptual logo for my site done up in 60's "free love" style. It consists of nothing more than two paths:
Here's an example of the Opera logo in SVG. This is a more complicated example using multiple paths and some polygon elements to render the text. Note that SVG supports text elements natively (without having to write paths for each glyph) but we will leave that to a future tutorial:
<<<Prev: 5. Basic Shapes And Colours Are Boring! Next: 7. Conclusion>>>