SVGビューアー・最適化
SVGコードをリアルタイムプレビューしながら最適化。XML宣言・コメント・メタデータ・Inkscape/Illustrator等のエディタ情報・空グループ・デフォルト属性を自動除去してファイルサイズを削減。削減率も表示されるインストール不要の無料オンラインSVG最適化ツール。
SVGコードの不要データを自動除去して軽量化するツールです。リアルタイムプレビュー付き。
SVGを入力してください...
// 詳細
6種類の最適化オプション
XML宣言削除、コメント削除、メタデータ削除、エディタ情報削除（Inkscape/Illustrator/Sketch）、空グループ削除、デフォルト属性値削除の6つのオプションを個別にON/OFFできます。必要な情報を残しつつ不要なデータだけを除去できます。
リアルタイムプレビュー
入力したSVGコードをリアルタイムでプレビュー表示します。最適化後も表示が崩れていないか視覚的に確認できます。XSSスクリプトは自動除去されるため安全にプレビューできます。
ファイルサイズ比較
最適化前後のファイルサイズと削減率をリアルタイム表示。Inkscape等のエディタで保存したSVGは大量のメタデータを含むため、50%以上の削減も珍しくありません。
// FAQ
- どのSVGエディタのデータに対応していますか？
- Inkscape（inkscape:*、sodipodi:*属性）、Adobe Illustrator（AdobeIllustrator/AdobeSVGViewer名前空間）、Sketch（sketch:*属性）のエディタ固有データに対応しています。これらの不要な属性・要素を自動的に検出して除去します。
- 最適化でSVGの見た目が変わることはありますか？
- 基本的に見た目に影響しないデータのみを除去します。ただし、エディタ固有のレイヤー情報（inkscape:labelなど）は除去されるため、エディタで再編集する場合はレイヤー名が失われる点にご注意ください。
- SVGOとの違いは何ですか？
- SVGOはNode.js上で動作する高度なSVG最適化ツールです。本ツールはブラウザ上で動作し、インストール不要で手軽に使えます。基本的な最適化（メタデータ・エディタ情報・コメント・空要素の除去）に対応しています。
- アニメーションSVGも最適化できますか？
- はい。animate・animateTransform等のアニメーション要素はそのまま保持されます。最適化はメタデータやエディタ情報など表示に不要なデータのみを対象とします。
- 大きなSVGファイルも処理できますか？
- ブラウザ上で処理するため、数百KB程度のSVGであれば問題なく最適化できます。数MB以上の非常に大きなSVGの場合はブラウザの動作が遅くなる可能性があります。
- 最適化したSVGはそのまま使えますか？
- はい。最適化後のSVGは標準的なSVG仕様に準拠しており、Webページへの埋め込みやimgタグでの表示にそのまま使用できます。COPYボタンでクリップボードにコピーできます。
// 使い方
-
SVGコードを入力
SVGコードを入力欄に貼り付けます。SAMPLEボタンでサンプルSVGを試すこともできます。
-
最適化オプションを選択
除去したい項目のチェックボックスをON/OFFします。デフォルトでは全てのオプションが有効です。
-
結果をコピー
プレビューで表示を確認し、「COPY」ボタンで最適化済みSVGをコピーします。サイズ削減率も確認できます。