SVGビューアー・最適化

// SVGビューアー・最適化に関するよくある質問

どんな時に SVG 最適化が必要ですか？

Webサイトに SVG アイコン・ロゴ・イラストを埋め込む前に必ず通しておきたい処理です。Inkscape や Illustrator で書き出したSVGはそのままだとファイルサイズが数倍〜10倍以上に膨らんでいることがあり、ページ表示速度に影響します。最適化すればサイズを50〜80%削減できることが多く、Webサイトの表示改善に直接効きます。

どのSVGエディタのデータに対応していますか？

**Inkscape**（inkscape:* や sodipodi:* の属性）、**Adobe Illustrator**（AdobeIllustrator/AdobeSVGViewer 名前空間）、**Sketch**（sketch:* 属性）の3つの主要エディタが出力する不要データに対応しています。これらのエディタで書き出したSVGを、そのまま貼り付けるだけで軽量化できます。

最適化で見た目が変わってしまうことはありますか？

基本的に見た目に影響しないデータだけを除去するので、変わることはほとんどありません。ただし「エディタ情報削除」を有効にすると、Inkscapeのレイヤー名などが失われるため、後でエディタで再編集するときに管理しにくくなる可能性があります。編集用と配布用でSVGを分けておくのが安全です。

どのくらいファイルサイズが減りますか？

元のSVGの状態次第ですが、Inkscape のデフォルト設定で保存したSVGなら 50-80% 削減されることが多いです。Illustrator の「WebとデバイスのSVGとして保存」オプションを使わずに書き出したファイルは、特に大きな削減が見込めます。削減前後のサイズと削減率が画面に表示されるので、効果を確認しながら使えます。

SVGOと比べてどうですか？

SVGO は Node.js で動作する高機能なコマンドラインツールで、より高度な最適化ができます。本ツールはブラウザ完結で「インストール不要・気軽に使える」利点があり、基本的な最適化（メタデータ・エディタ情報・コメント・空要素の除去）はカバーしています。SVGOほど強力ではないですが、日常用途には十分です。

アニメーションSVGも最適化できますか？

はい、`<animate>`・`<animateTransform>` 等のアニメーション要素は保持されます。最適化対象はあくまで「表示に不要なメタデータ」だけなので、SVGアニメーションの動作は影響を受けません。安心してアニメ付きSVGも軽量化できます。

大きなSVGファイルでも処理できますか？

数百KB程度までなら快適に動作します。数MB以上の非常に大きなSVG（詳細な地図データや複雑なイラスト等）はブラウザの動作が遅くなる可能性があります。その場合はNode.js版のSVGOなどCLIツールの併用がおすすめです。

最適化したSVGはそのままWebサイトで使えますか？

はい、標準的なSVG仕様に準拠しているので、`<img src="...">`・`<object>`・HTML内直接埋め込み・CSSの`background-image`など、あらゆる用途で使えます。COPYボタンでコピーして、そのままファイルに保存・貼り付けが可能です。

見えない要素（空グループ等）が消えるのは大丈夫？

はい、空グループ（`<g></g>` の中身が空）や、実際には何も描画しない要素を消しても、見た目には影響がありません。むしろ、それらが残っているとブラウザの描画処理が無駄に発生するため、パフォーマンス面でもプラスになります。

貼り付けたSVGコードはサーバーに送信されますか？

いいえ、すべての処理はブラウザ内で完結します。SVGコードもプレビューもサーバーに送信されません。未公開のロゴデータ・機密性のあるイラスト・社内アイコンなども安心して最適化できます。