01
svg要素全体を用意する
名前空間とviewBoxを含む文書を入力します。pathだけの断片には描画範囲がないため、完全なSVGの中に入れてから処理してください。
- サンプルで対応する静的文書の形を確認できます。
画像・SVG・アイコン
SVG最適化変更を確認してから適用
静的SVGの整形・圧縮・最適化を行い、候補の見た目を確認してから適用します。
SVG最適化
SVGソース
結果
SVGの処理とプレビューはブラウザー内で行い、外部リソースは読み込みません。
入力または設定が変わりました。結果を作り直してください。
アイコンのコードを開いたら、実際の図形より編集ソフトの情報が長いことがあります。SVG最適化では、消す情報を選び、残るコードを確認しながら納品用のデータを整理できます。
SVG軽量化の結果は削減率だけでは判断できません。プレビューで輪郭を比べ、パス一覧でd属性を確認し、細い線や文字が意図した状態かを確かめてください。
SVG最適化で変更を見比べる
元データと候補を同時に確認できます。
小さなアイコンも指定幅で出力
viewBoxが小さくてもPNGの幅は別に指定できます。縦横比を保って透過画像を書き出すため、背景色の異なる資料や画面にも配置しやすくなります。
適用前に確認したい三つの点
02
座標の変更は必要なときだけ
初期設定ではコメントとメタデータを削除します。数値の丸めとパス最適化は無効です。小数精度は有効にした変換にだけ使われます。
- 手動実行ではCtrl/Cmd + Enterで主操作を実行できます。
03
編集後は候補を作り直す
コードや設定を変えると以前の結果は古くなります。再度処理してから適用や出力を行うことで、別の編集状態の画像を持ち出すのを防げます。
- 適用後の「元に戻す」は入力と出力の両方を復元します。
コード整理から画像出力まで
読める整形と短いマークアップ
2スペースの整形は、グループの階層やfillの継承を追う場面に向いています。圧縮はコンパクトなSVGを出力します。どちらも画像形式は変わりません。文字を含む要素では空白が意味を持つ場合があり、見た目と併せて確認することが大切です。
削除と座標処理を分ける
メタデータ削除とコメント削除を個別に選択できます。SVGOによる数値処理やパス最適化は必要な場合にだけ有効にします。ID、viewBox、title、descは保持するため、通常の整理で識別子や表示範囲、読み上げ用の説明を意図的に落としません。
パスの記述を追跡する
パス一覧ではd属性を、番号や識別子とともに確認できます。複数の輪郭があるアイコンで、どの記述を調べるべきかを絞れます。円や矩形を勝手にパスへ変換せず、制御点のドラッグや図形の結合も行いません。描画そのものの編集はベクターソフトで行ってください。
縦横比を保つ透過PNG
viewBoxまたは対応するピクセル寸法から比率を求め、指定幅のPNGを生成します。幅と高さはそれぞれ4096ピクセル以内、総面積は16777216画素までです。縦長の図は幅が範囲内でも高さの上限で拒否される場合があります。SVGプレビューを確認した後、拡大縮小が必要な用途にはSVGを、固定サイズが必要な用途にはPNGを選べます。
処理できる文書の範囲
- 静的な図形に限定
- script、イベント属性、アニメーション、foreignObject、image、style要素は拒否します。外部参照、埋め込み画像、処理命令、DOCTYPEにも対応しません。一般的な図形、テキスト、グラデーション、文書内の参照は扱えますが、任意のSVGを無害化するツールではありません。
- スタイルと名前空間の制約
- style属性では許可された表示用宣言だけを受け付け、URLは文書内IDへの参照に限定します。任意のXML名前空間には対応せず、編集用metadata内のRDFも対象外です。対応しない編集情報が含まれる場合は、元のソフトで整理してから入力してください。
- 容量・深さ・出力寸法
- 入力はUTF-8で1MiB、テキストとコメントを含む20000ノード、入れ子100階層までです。最適化処理が20秒を超えると停止します。PNG生成には有効なviewBoxか対応するピクセル幅・高さが必要です。相対単位や複雑なCSS寸法では比率を確定できないため、明示的な座標範囲を指定してください。 PNGの幅と高さはそれぞれ4096ピクセル以内で、縦長の図では高さが上限を超える場合があります。
- 表示の完全一致は保証しない
- 小数の丸めやパスの書き換えで細部が変わる場合があります。候補の画像に加えて、最終的な掲載先でも確認してください。SVG最適化は実際のバイト数を表示します。すでに短い手書きのアイコンは、整理してもほとんど小さくならないことがあります。
SVG最適化のよくある質問
見た目は必ず変わりませんか?
必ず同じになるとは保証できません。特に数値の丸めやパス最適化を有効にすると、わずかな座標変更で細い輪郭が変化する場合があります。初期設定では両方を無効にしているので、必要な場合だけ有効にし、使う大きさで比較してください。
IDを削除してもよいですか?
このツールはIDを削除しません。SVGの外側にあるCSSやJavaScriptから参照されている可能性を、単一の文書だけでは確認できないためです。viewBox、title、descも保持し、寸法や説明を保ちながら整理します。
画像を埋め込んだSVGやアニメーションSVGを扱えますか?
対応しません。image要素は外部画像でも埋め込み画像でも拒否し、アニメーションやscriptも受け付けません。一般的な静的図形、テキスト、グラデーションなどを対象とし、別のリソースを読み込まずに確認できる文書に限定しています。
1MBを超えるSVGを最適化できますか?
入力の上限は1MiBです。加えて20000ノードと100階層の制約があり、超えた文書を部分的に処理することはありません。地図などの大きな図形は元の制作ソフトで簡略化するか、大きな資産向けのビルド処理を利用してください。
ファイルはサーバーへ送信されますか?
送信しません。コードの処理と画像の確認はブラウザー内で行い、SVGが参照する外部リソースも読み込みません。ページや処理エンジンの初期読み込みに通信が必要なことと、入力文書を送信することは別です。
正しく処理できない例がありましたか？