Hi Elven SVG friends! I've been working with SVG for about 4 months and was excited to find SVG Elves. I hope you enjoy this article/tutorial...I'd love feedback.
Shapes in SVG
SVG comes with 6 basic shape elements (<rect>, <circle>, <ellipse>, <line>, <polyline>, and <polygon>), each of which have different attributes. Here are all the attributes of each shape element:
<rect x="5" y="40" width="120" height="140">
<circle cx="25" cy="40" r="35">
<ellipse rx="150" ry="100" cx="150" cy="120">
<line x1="100" y1="300" x2="300" y2="100">
<polyline points="20,355 150,355 170,305" > - typically open shapes
<polygon points="20,355 150,355 170,305"> - typically closed shapes
At work we use Adobe Illustrator to create our shapes and vector-based designs and then use the Illustrator SVG plugin for exporting to SVG. It is a pretty seemless process. In Illustrator I add Javascript rollovers and other actions to the SVG code and then after outputting it I tweak it.
Send me questions and I'll try to get back to you. Pretty soon I'm going to do an another article for SVG Elves on designing SVG in Illustrator!
I can't wait for the Elf Workshop to actually work ;) so that I can create and share some of my designs with you guys. SVG Elves is great!
