2013年6月18日火曜日

svg画像のソースを整形

xmlファイルの整形(インデントや改行の整理)には色んな方法があります。 その中で、svg画像のソースを整形する方法の1つをメモ。 普段のブラウザにfirefoxを使っているなら、svgソースの整形にも使えます。

やり方は簡単で、firefoxにsvg画像を表示してから「ctrl+a」で全選択。 右クリックメニューで「選択した部分のソースを表示」を選ぶだけです。 表示されたソースは整形されているのでコピー&ペーストをしましょう。

firefoxは何も選択せずに「ページのソースを表示」をするとパース前のソースが、何か選択してから「選択した部分のソースを表示」をするとパース後のソースが表示されます。 svg画像の場合、パース後のソースは見やすくインデントされているのでソースの整形に使えます。

注意点としては、

  • 「ctrl+a」で全選択しても見た目に変化は無い。ちゃんと選択されていれば右クリックメニューが変わるので確認。
  • xml宣言が消える。必要な場合は自分で追加すること。
  • firefoxが解釈できなかった要素がどうなるかは不明。
  • インデントのカスタマイズはできない。

ちなみに、パース後のソースがどうなるかはファイルの種類によって違うようです。 例えば、htmlの場合は省略されたタグがどう補完されたかを見る事ができます。 しかし、レイアウトにも影響するためか空白は整理してくれないようです。