When Things Go Wrong
Inevitably, at some time during your use of SVG, things go wrong. Particularly during your first efforts to hand-code or to tweak by hand some code that was generated by a vector drawing package, you might find things going visibly awry. In this chapter, I describe an approach to keep serious errors to a minimum, discuss symptoms of commonly occurring errors, and show you an approach to diagnosing and solving problems that you might inadvertently create.
I hope that you don't get the wrong idea from this chapter and come away with the impression that SVG is impossibly complex. It isn't. However, things can go wrong in a number of ways, particularly in the learning phase. Being aware of them and of the solutions might save you time and increase the fun you have creating SVG images.
Avoiding Problems by Using Good Coding Practice
I suggest that you change, particularly during your early attempts at hand coding, only one thing at a time, whether that is adding an element, altering an attribute, or adding or refining some animation.
Let me repeat that: Change only one thing at a time when you are learning SVG coding. It helps your sanity!
If you change more than one thing at a time and you move from having an SVG image that is displayed correctly to one that isn't displayed as you want or, worse, isn't displayed at all, diagnosing and fixing can be quite a tussle. In the interest of sparing yourself avoidable frustration, change one thing at a time and view the result in an SVG viewer after each step.
This is good advice when you are working with the code for complex images too. You can make lots of potential tweaks that can cause problems. You might, in a flight of creative fancy, change five or ten things, one after the other, without checking the effect, and then find that the nice image is now broken and that you can remember only nine of the ten things you tweaked.
You get the idea. Work logically and systematically-it saves time and frustration in the long run.
Use an XML-aware editor
One aid to avoiding problems when coding SVG is to use an XML-aware editor. You can craft, on Windows systems, SVG images in the simplest text editor, like Notepad. However, I suggest that you think seriously about obtaining an XML-aware text editor.
An XML-aware text editor provides two simple but important aids. You can typically check to see whether the SVG document is well formed. In other words, the XML-aware text editor identifies whether your code conforms to the XML rules, and, if it doesn't, the editor identifies the line on which your first syntax error exists.
Often in parallel with the ability to check for well-formedness, an XMLaware text editor also has a color-coding facility for your code. If you omit quotation marks on an attribute or forget the closing angled bracket on an element, you have some assistance by means of an unusual color pattern in identifying exactly where the problem is.
One XML-aware text editor I like is XML Writer. It is by no means the most sophisticated XML editor around, although it does the simple, basic things well and without fuss. My strongest recommendation is that, for a basic everyday tool, it doesn't get in the way. Further information on XML Writer
is available from http://www.xmlwriter.com/. A 30-day free evaluation version is usually available.
Many other XML editors are available that also have evaluation downloads. For further options, take a look at http://www.xmlsoftware.com or a similar site, for a list of XML tools. Some HTML editors, such as Allaire Homesite, can provide color coding, but without the ability to check XML well-formedness, they are of limited help.
Of course, an XML-aware editor doesn't solve all your problems. For example, covering over your nice image with a plain rectangle is perfectly legal, although not sensible. The editor doesn't point out that if you intended for the rectangle to be the background, but forgot about the SVG painter's model and placed the rectangle late in the document, it covers up something else. Nor does the editor prevent you from trying to place white text on a white background.
Construct visual components
Just as making one change and testing the effect is sensible, constructing complex SVG images and documents as visual components is helpful. If you have created and tested an SVG visual component, you know that the component was working and, assuming that you pasted it into the correct part of the document, is unlikely to have caused the problem. Because yon might have imported a text component with black text to display on your nice, new black background, however, it is always possible that the component is indeed the problem.