svgの簡易エディタを作ってみた

現在ちょこちょこと修正している「svg要素の基本的な使い方まとめ」で，サンプルコードを編集するための機能を追加してみた．

簡易svg動作確認ツール


svgを手でガリガリ書いているうちに単純な記述ミスが致命的な問題を引き起こすことがわかり，改めて文法チェックの必要性を痛感した．文章が長くなると自ずとsvg要素の間隔も広くなりがちなんだが，埋め込みsvgではある場所の記述ミスがあさってのsvg要素で問題を引き起こすのだ．先の使い方まとめではこの罠にどっぷりと浸かってしまったため，問題箇所の洗い出しに手間取り，一時はぶん投げちまおうかとも考えたが，それでは芸がない．そこでなるべくエラーを見つけやすくするにはどうすればいいかと考え，xhtml5に埋め込んでエラーを洗い出してしまえばいいとの結論に至った．html5の構文における懐の広さはsvgと非常に相性が悪いのだ．

このツールではsvgのコードを編集すると，それをhtml5とxhtml5の両方にsvgを埋め込み，その動作の違いを確認できるようにした．html5では構文ミスがあった場合svgの描画を諦めてしまうが，xhtml5では問題箇所を示してくれるため大変具合が良い．animate要素やfilter要素等，手書きでsvgを編集する必要がある場合はxmlの構文解析機能を利用すると大分作業効率が上がるものと思う．