入力SVG
最適化後の出力
元のサイズ
0 バイト
最適化後
0 バイト
削減率
0.00%
プレビュー
SVG最適化について
SVGファイルはテキストベースのXMLなので、不要な記述を整理するだけで画質を落とさず大きくサイズを削減できます。このツールは不要なマークアップを削除し、値を正規化して、Web配信に適した軽いベクター画像にします。
SVG最適化の完全ガイド
無料オンラインSVG最適化ツール
不要なメタデータ、コメント、エディター固有の属性、余分な空白を削除して、SVGファイルをオンラインで最適化できます。SVGはテキストベースのため、小さな整理でも見た目の品質を下げずに大きなファイルサイズ削減につながります。この最適化処理はすべてブラウザ内で実行されるため、ファイルはプライベートに保たれます。
SVGファイルとは？
SVG（Scalable Vector Graphics）は、ロゴ、アイコン、チャート、UIイラスト、レスポンシブなグラフィックに使われるXMLベースの画像形式です。JPEGやPNGのようなラスター形式と異なり、図形が数学的に定義されるため、どのサイズに拡大してもピクセル化しません。
SVGを最適化する理由
ページ表示を高速化: SVGファイルを小さくすると転送量が減り、ページ速度とユーザー体験が向上します。
Core Web Vitalsを改善: SVGがファーストビューにある場合、アセットサイズの削減はLargest Contentful Paintなどの速度指標改善に役立ちます。
ソースコードを整理: エディター固有の属性やメタデータを削除すると、コードベース内でSVGを保守しやすくなります。
見た目の品質を維持: 構造的な整理により、表示結果を変えずにバイト数を削減できます。
このSVG最適化ツールが削除するもの
マークアップの整理
- XMLコメント
- metadata、title、descriptionタグ
- 要素間の余分な空白
- viewBoxがある場合の不要なwidth/height
エディター固有の不要情報
- Inkscapeの名前空間属性
- Sodipodiのメタデータ属性
- その他ツール生成の非表示属性
- 過剰な数値精度
小数精度について
SVGのpathやtransformの値には、次のような長い小数が含まれることがあります: 12.3456789。精度を2桁または3桁に減らすと、見た目の正確さを保ちながら大きくサイズを削減できることがよくあります。小さなアイコンなら1-2桁で十分な場合が多く、複雑な曲線では3-4桁を試してください。
このツールの使い方
- アップロードまたは貼り付け: SVGファイルまたはマークアップを入力パネルに追加します。
- オプションを選択: コメント削除、メタデータ削除、空白の圧縮などの整理オプションを有効にします。
- 精度を設定: 必要な品質に合わせて小数精度を選びます。
- 最適化: 最適化を実行して、整理されたSVG出力を生成します。
- 統計を確認: 元のサイズ、最適化後のサイズ、削減率を比較します。
- コピーまたはダウンロード: 最適化済みSVGをデプロイ用に書き出します。
SVG最適化のベストプラクティス
必ず元ファイルを保管: 複雑なアートワークでは、強めの整理を行う前に元のSVGを保存しておきましょう。
レスポンシブ表示にはviewBoxを使用: 適切な viewBox を保持すると、SVGはデバイスを問わず安定して拡大縮小できます。
最適化後に確認: アイコンやロゴを複数のサイズで確認し、形状が正確に保たれていることを確認します。
重要なSVGはインライン化: ファーストビューのアイコンでは、SVGをインライン化すると追加リクエストを減らし、体感速度を改善できます。
シンプルなパスを優先: 複雑すぎるpathデータはファイルを肥大化させます。可能であれば書き出し時にベクターを簡略化しましょう。
SVGのよくある用途
- Webサイトのロゴやブランドマーク
- ナビゲーションや操作アイコン
- ランディングページのイラスト
- データ可視化やチャート
- ダッシュボード向けUIグラフィック
- メールで使いやすいベクター画像
- デザインシステムのアイコンライブラリ
- Progressive Web Appのアセット
- マーケティングキャンペーン用ビジュアル
- ドキュメントに埋め込むグラフィック
プライバシー重視のSVG最適化
SVG最適化はすべてブラウザ内でローカルに実行されます。ファイルがアップロード、保存、第三者へ送信されることはありません。