Sams Teach Yourself SVG in 24 Hours

Coding with Basic Elements

Although WYSIWYG tools ease the development of complex artwork, they generally produce code that, though sound and correct, isn't necessarily what an engineer would like it to be. For instance, in Adobe Illustrator, every shape (such as a square, oval, or freeform path) is exported as a path. Though logical for freeform paths, basic shapes become rather confusing to interpret when seen in the form of several abstract points in path data.

Whenever possible, and whether handled by a designer or engineer, it will behoove you to replace basic shapes produced as path elements with their appropriate SVG elements. Though this may seem a bit fussy, consider the amount of time you may spend reviewing your code. If you encounter ...