SVG最適化
静的SVGのファイルを選ぶか、コードを貼り付けて最適化します。前後の表示・コード・容量を比べ、結果をコピー・SVGで保存できます。
できること
SVGの容量を整理
コメントや編集ソフトの付加情報、数値表現などを整理します。
前後を確認して保存
表示・コード・容量を見比べ、最適化後のSVGをコピー・保存できます。
使い方
SVGを入力する
SVGファイルを1枚選ぶか、コードを貼り付けます。
必要なら設定を調整
詳細設定で小数精度や削除する情報を確認します。通常は初期値から試せます。
表示と容量を見比べる
最適化を実行し、見た目とコード、容量の変化を確認します。
最適化したSVGを保存
結果のコードをコピーするか、SVGファイルとしてダウンロードします。
こんなときに便利
ロゴやアイコンを軽くする
Web掲載前のSVGを整理し、表示と容量のバランスを確認します。
編集用の情報を整理
制作ソフトの付加情報やコメントを、必要に応じて除いて保存します。
SVGを最適化するときの確認点
付加情報と表示は別のもの
編集ソフトの情報やコメントを削除できます。タイトルや説明などは保持する設定です。
小数精度で形が変わる場合
座標などの小数を丸めると、細かな輪郭や位置が変わる場合があります。処理前後を比較してください。
掲載先のCSSや参照も確認
IDやviewBoxは保持しますが、コードは整理されます。外部CSSなどで使っている場合は、実際の掲載先でも見た目を確認してください。
対象は静的なSVG
スクリプトや外部参照、埋め込み画像、アニメーションを含むSVGは対象外です。SVG内で完結する参照は使えます。
よくある質問
必ずファイルサイズが小さくなりますか？
すでに整理されたSVGなどでは、容量が変わらない場合や増える場合もあります。結果の容量を見て判断してください。
見た目は同じままですか？
小数精度などの設定によって変わる場合があります。処理前後のプレビューと掲載先の表示を確認してください。
元のコードも確認できますか？
結果の「最適化前のコード」を開くと、今回の処理前の内容を確認できます。
ファイルの扱い
- 入力
- UTF-8の静的SVGを使います。元ファイルは上書きしません。
- 出力
- 最適化したSVGコードと、.min.svgのファイル。