文書構造から始める
SVG はベクター画像のための XML ベースの言語です。svg 要素には、キャンバス上の表示に影響する図形、パス、テキスト、グループ、属性を含められます。下の小さな例には 40 × 40 の viewBox があり、座標 20,20 を中心とする半径 12 の円が描かれています。viewBox は座標系を定めるもので、ページ上で画像が必ず CSS の 40 ピクセルを占めるという宣言ではありません。SVG は XML を基にするため、要素の入れ子や引用符付き属性が重要です。汎用の XML フォーマッターは XML 構造の確認に役立ちますが、SVG フォーマッターは特に svg ルートを検査します。入力を SVG 画像として使うなら後者を選びましょう。
整形して調べ、コピーを圧縮する
整形ツールはインデントと改行を加え、円の要素、塗り色、viewBox を別々に調べやすくします。編集やレビューで役立ちます。SVG の圧縮ツールは書き出す文字列を短くしますが、パスの形状を最適化したり、別の描画を選んだりする画像圧縮ツールではありません。元のソースを保存し、実際の描画環境で結果を比べてください。特に珍しい SVG 機能に対する解析器の対応が限られる場合、短い文字列が常に同じ見た目になるとは限りません。整形や圧縮でエラーが出たら、欠けた XML を推測して補わず、入力を調べてください。
- SVG XML：viewBox と円の要素
- 整形して構造を調べる
- コピーを圧縮し、描画を比較する
描画とアクセシビリティを確かめる
図には、読者や支援技術に必要な文字、ラベル、タイトルが含まれることがあります。ファイルを小さくするためだけに、それらを削除しないでください。SVG はスタイル、リンク、アニメーション、スクリプトも含められるため、整形は信頼できないファイルの無害化にはなりません。外部から受け取った SVG をページに埋め込む前に、用途に合った安全性の確認とサニタイズを行ってください。例の円は構造を示すための単純な図であり、この小さなブラウザー内整形ツールが SVG のあらゆる機能を保持するという意味ではありません。変換後の画像、寸法、代替テキストを比較してください。
座標と埋め込みコンテキストを確認
SVG が小さすぎる、切れている、または何も表示されない場合は、まず viewBox を確認します。四つの数値は表示される座標の長方形を表し、外にある要素は XML として有効でも見えないことがあります。次に埋め込み先での幅と高さを調べてください。CSS が表示サイズを決めている場合もあります。図形の塗りと線も見え方に影響します。整形しても意図した座標は変わりません。短縮した SVG を元ファイルと比べるときは、同じページのスタイルを適用してください。重要な図なら、単独の画像としても、実際のページに埋め込んだ状態でも開いて確認します。
手順を決めて変換結果を検証する
代表的な小さな SVG を埋め込みの整形ツールに入れ、結果が読みやすいか確認します。ファイルが SVG ではない一般の XML なら、XML 用の整形ツールを選んでください。SVG を確認した後、その内容を SVG 圧縮ツールへコピーし、元と圧縮後の両方を残して、ブラウザーで複数の表示サイズを比べます。テキストによる代替情報や操作できる要素があれば、それらも確認してから公開中の画像を差し替えます。ツールはブラウザー内で入力を処理しますが、入力済みの埋め込みリンクを公開すると、その入力は URL のフラグメントから読めます。秘密のソースは公開例に使わないでください。整形はレビューの助けであり、描画テストの代わりにはなりません。