SVG最適化ツール
SVGOでSVGファイルを軽量化します。メタデータや不要なデータを削除し、精度を調整し、IDやviewBoxを保持したまま、最適化の前後を比較できます。
ブラウザー内でローカルに処理されます。ファイルはアップロードされません。
このツールでできること
デザインツールから書き出したSVGファイルには、エディターのメタデータ、コメント、デフォルト値、必要以上に細かい数値が含まれていることがよくあります。このツールは、標準的なSVGオプティマイザーであるSVGOをブラウザー内で実行し、最適化の前後のサイズと、両方のバージョンの視覚的なプレビューを並べて表示するので、見た目が変わっていないことを確認できます。
オプションでは、本当に重要な選択肢を扱えます。画像が引き続き拡大縮小できるようviewBoxを保持する、CSSやJavaScriptから参照されるidやクラス名を保持する、メタデータ・コメント・タイトルを削除する、パスの小数点以下の桁数を選ぶ、スクリプトを取り除く、などです。ファイルがすでに最小限の場合は、バイト数を節約したように見せかけず、その旨をお伝えします。
プレビューはimage要素を通して描画されるため、SVG内のスクリプトがこのページで実行されることはなく、コードはテキストとして表示されます。SVGにスクリプト、イベントハンドラー、foreignObject、外部参照が含まれている場合は、警告が表示されます。何もアップロードされません。
使い方
- 1SVGファイルを追加します。
- 2スクリプトや外部参照に関する警告がある場合は、内容を確認します。
- 3オプションを調整します。結果は自動的に更新されます。
- 4最適化の前後のサイズとプレビューを比較します。
- 5最適化されたコードをコピーするか、.min.svgファイルをダウンロードします。
対応形式
入力・出力ともにSVG(.svg)。
プライバシー
このツールはブラウザー上で動作します。入力されたデータはお使いのデバイス上で処理され、当社のサーバーには送信されません。
制限事項
- 精度を下げるとファイルは小さくなりますが、細かい部分が目に見えて崩れる場合があります。結果を使う前にプレビューを比較してください。
- IDやクラスを削除すると、CSS、JavaScript、<use>の参照が壊れることがあります。これらに依存している場合は「IDとクラスを保持」を有効にしてください。
- viewBoxを削除すると、画像がコンテナに合わせて拡大縮小されなくなります。デフォルトでは保持されます。
- すでに最適化されているファイルはまったく小さくならないことがあり、まれに少し大きくなる場合もあります。
- 対応しているのはSVG画像のみです。SVGに埋め込まれたラスター画像は再圧縮されません。
よくある質問
最適化は可逆(ロスレス)ですか?
デフォルト設定では、画像は同じように見えるはずです。精度を下げる、パスを統合する、タイトルを削除するといった操作はファイルの内容を変更するため、必ずプレビューを比較してください。
SVGが小さくならなかったのはなぜですか?
すでに圧縮済みの可能性があります。小数点以下の桁数を減らすか、不要であればタイトルやメタデータを削除してみてください。
スクリプトを含むSVGファイルを開いても安全ですか?
プレビューにはimage要素を使っており、スクリプトは実行されず、コードはテキストとして表示されます。それでも、信頼できない出所のSVGを自分のページにインラインで置くのは避けてください。「スクリプトを削除」を有効にすると、スクリプトを取り除けます。
「IDとクラスを保持」は何をしますか?
SVGOは通常、使われていないと判断したIDを短縮または削除します。保持すると、CSS、アニメーション、<use>参照のためのフックが維持されます。
関連ツール
ファビコン生成ツール
1枚の画像から、favicon.ico、各サイズのPNG、Apple Touch Icon、Androidアイコン、Webマニフェスト、HTMLタグまでファビコン一式を作成できます。
カラーパレット生成ツール
基準色から配色パターンを生成し、気に入った色をロックして、WCAGコントラストを確認できます。CSS、Tailwind、JSON、PNGでエクスポートも可能です。
OGP画像ジェネレーター
タイトル、ロゴ、背景を組み合わせて1200x630のSNSシェア用画像を作成し、PNGでダウンロードできます。すべてブラウザー内で処理されます。
画像からカラーパレット抽出
あらゆる画像から主要な色を抽出し、16進コードをコピーできます。スポイトで正確なピクセルの色を拾い、パレットとしてエクスポートも可能です。