SVG 最適化
不要な情報を削ってファイルを軽くする
ブラウザ内で処理
入力
結果
結果
まだ入力されていません
ファイルをドロップするかコードを貼り付けると、ここに結果が表示されます。
viewBox は常に保持されるため、レスポンシブな拡大縮小が壊れることはありません。
Illustrator や Figma から書き出した SVG には、レイヤー名、エディタのメタデータ、誰にも見えないほど細かい小数の座標が入っています。それらを取り除くと、見た目を変えずにファイルが半分程度になるのが普通です。
使い方
- 1 SVG ファイルをドロップするか、コードを貼り付けます。
- 2 必要に応じてオプションを調整します。CSS や JavaScript が ID を参照している場合は、ID の整理をオフにしてください。
- 3 最適化の前後のサイズを比べます。
- 4 最適化されたコードをコピーするかダウンロードします。
よくある質問
最適化すると見た目は変わりますか。
既定の設定では変わりません。唯一目に見えて影響するのは小数桁を下げすぎた場合で、曲線が粗くなります。滑らかな形がカクカクし始めたら、桁数を戻してください。
ID を残すべきなのはどんなときですか。
ファイルの外から参照されているとき全般です。CSS のセレクタ、パスをアニメーションさせる JavaScript、グラデーションやクリップパスなどの内部参照。迷ったら ID の整理はオフのままにしてください。
viewBox は保持されますか。
常に保持されます。削除するとレスポンシブな拡大縮小が壊れるため、他の設定に関係なく手を触れません。