FIRST CH TOOLS LOCAL PROCESSING — ファイルはサーバーに送信されません EN

FIRST CH TOOLS / 画像 / 47 SVG OPTIMIZER

SVG最適化＆data URI化

IllustratorやFigmaから書き出したSVGには、編集ソフトの覚え書きが大量に残っています。このツールは SVGO でそれを落とし、Before / After を並べて見た目が変わっていないことを確かめながら軽くします。CSSの background-image にそのまま貼れるエンコード済みのdata URIも同時に出るので、アイコン1つのために外部ファイルを増やさずに済みます。最適化はこのページの中だけで動き、ファイルがサーバーへ送られることはありません。

SVGを入れる
ここに .svg をドラッグ&ドロップ またはクリックしてファイルを選択

Figmaは「Copy as SVG」、Illustratorは「SVGとして保存」または「書き出し形式」で出したものをそのまま貼れます。

最適化の設定
3

viewBox は消しません（消すと拡大縮小できなくなるため）。桁数はアイコンなら2〜3、地図やイラストは3〜4が目安です。0にすると形が崩れることがあるので、必ず下の Before / After で確かめてください。

How to Use

  1. SVGを入れる書き出した .svg をドラッグ&ドロップするか、コードをそのまま貼り付けます。読み込んだ瞬間に最適化が走ります。
  2. Before / After を見比べる削減率と、左右のプレビューを確認します。見た目が変わっていたら小数点の桁数を上げ、外部から参照しているIDがあるなら「ID・クラス名を整理する」を外します。
  3. 使う形で持ち出すファイルとして置くなら .svg をダウンロード、CSSに埋め込むなら background-image の行をコピーします。

About This Tool

最適化はこのページの中だけで動きます。最適化には SVGO v4.1.0（MIT）のブラウザ向け配布物を同梱して使っています。SVGOはNode用のツールとして知られていますが、公式に dist/svgo.browser.js というブラウザ用のビルドが配られており、これをそのまま読み込んでいます。したがってビルドサーバーもアップロードも無く、社外に出せない支給素材やクライアントのロゴでも、そのまま端末内で処理できます。

何が削られるのか。既定の設定（preset-default）が落とすのは、編集ソフトが書いたメタデータ・コメント・<?xml> 宣言・使われていない定義・空のグループ・効かない属性、そして過剰な小数点の桁です。あわせて、形の同じ図形を <path> に統一し、パスの座標を相対指定へ詰め直し、色を短い表記（#ffffff → #fff、#ff0000 → red）に置き換えます。1回で終わらせず、変化が無くなるまで繰り返します（multipass）。書き出したままのSVGなら、だいたい30〜60%小さくなります。

消さないものを決めています。viewBox は削りません（消すと表示先の大きさに合わせて拡大縮小できなくなり、CSSの背景に使ったときに困ります）。<title> も既定では残します（スクリーンリーダーが読む部分ですが、SVGOの既定では消えます）。<desc> は、編集ソフトが書いた「Created with Sketch.」のような定型文だけを落とし、自分で書いた説明はそのままにします。逆に <script> と on… のイベント属性は既定で削除します。支給されたSVGは、埋め込まれたスクリプトの隠れ場所として珍しくありません——<img> で表示するぶんには動きませんが、HTMLに直接貼り込むと自分のコードと同じ権限で動きます。アニメーションのために必要なら、チェックを外せば残せます。

data URI は3つの形で出します。CSSの background-image に使うなら、base64 より URLエンコードのほうが小さくなります（base64は元の約1.33倍に膨らむのに対し、SVGは記号の少ないテキストなのでエンコードで増える分が小さいためです）。しかも中身がテキストのまま読めるので、あとから色だけ書き換えることができます。このツールのURLエンコード版は、属性の囲みを ' にして url("…") に収め、そのうえで encodeURIComponent で全部エンコードしてから安全な文字（空白・=・:・/）だけを戻しています。base64版は、記号を通したくない場所のために添えています。汎用のファイル→Base64変換は Base64 & Data URI変換 にあります。

gzip後のサイズも出しています。実際の配信ではサーバーがgzip（またはBrotli）で圧縮するため、利用者が待つのはこちらの数字です。SVGは繰り返しの多いテキストなのでgzipがよく効き、生のファイルサイズほどの差にはなりません。それでも最適化しておく意味は、gzip後でも差が残ることと、data URIとしてCSSやHTMLに埋め込んだときは、そのぶんが毎回本体に乗ることにあります。

画像そのものを軽くするなら 画像→WebP一括変換・画像→AVIF変換、寸法を変えるなら 画像リサイズ＆クロップ、SVGで書き出せるQRコードは QRコード生成 にあります。faviconのSVGを作るなら faviconジェネレーター と組み合わせてください。

思ったより小さくならないとき

中身が写真（ラスター画像）

SVGの中に <image> でPNGやJPEGが埋め込まれていると、その部分はただのbase64の塊です。SVGOは画素に触れないので、いくら設定を変えても縮みません。写真は WebP や AVIF で別に書き出し、SVGにはベクターの部分だけを残してください。

写真をトレースしたパス

画像トレースで作ったSVGは、点が数万個あることがあります。桁数を落とせば多少は縮みますが、そもそもベクターにする対象ではない可能性が高いです。ファイルが1MBを超えるようなら、元の画像をラスターのまま使うほうが速くなります。

フォントを埋め込んでいる

@font-face でフォントをdata URIとして抱えているSVGは、絵よりフォントのほうが重くなります。文字をアウトライン化する（パスに変換する）か、フォントはページ側で読み込んでSVGからは外してください。

すでに最適化済み

アイコンライブラリから取ってきたSVGは、配布前に最適化されていることがほとんどです。削減率が数%なら、それ以上は削るところがありません。元のファイルをそのまま使ってください（無理に桁数を下げると形が崩れます）。

IDが消えて壊れた

グラデーション・クリップパス・フィルタは url(#id) でIDを参照しています。SVGOはファイル内の参照は追跡して残しますが、外から参照しているID（スプライトの <use href="#icon-x">、CSSやJSで掴んでいる要素）までは分かりません。その場合は「ID・クラス名を整理する」を外してください。

Other Tools