SVG最適化
コメントやメタデータなど安全に消せるものだけ削ってSVGを軽くします。アップロード不要、ブラウザ内で処理します。
ツールを準備しています。
ユーザーの評価
まだレビューはありません。このツールを使ったことがあれば、最初のレビューを書いてください。
SVG最適化の詳しい使い方ガイド
使い方と例を確認し、知りたいことはトピックから探せます。
はじめに確認すること
- 消すもの
- コメント、タイトル・説明・メタデータ、エディタ専用の属性と名前空間。
- 空白
- タグの間の空白とインデント(任意)。
- 数値
- 小数点以下の桁数を0〜6から選びます(任意)。
- 残すもの
- id、<style>の中のルール、<script>の中、文字の内容。
- 自己確認
- 描画する要素と属性が同じままかを比べてお知らせします。
- 目で確認
- 小さくする前と後を並べて描きます。
- プレビューの安全性
- 絵としてだけ描くので、SVGの中のスクリプトは実行されません。
- 処理する場所
- ファイルをサーバーに送りません。
SVG最適化の使い方
SVGを入れてください
ファイルをドラッグするか、内容を貼り付けてください。<svg>で始まっていない場合はお知らせします。
何を消すかを選んでください
コメント、タイトル・メタデータ、エディタ情報、空白を、それぞれオン・オフできます。小数点以下の桁数も決めます。
前と後を見比べてください
2つの絵が並んで表示されます。同じかどうかを目で確認してください。ツールも、描画する要素が同じままかを確認して、一緒にお知らせします。
持ち帰ってください
コピーするか、.svgとして保存します。どれだけ小さくなったかと、何をいくつ消したかも書きます。
こんな作業に使えます
消してよいものだけを消します
IllustratorやInkscapeから書き出したSVGには、エディタが使う属性や名前空間、タイトルとメタデータ、インデントが一緒に入っています。これらは絵を描くのに使われないので、消しても見た目の結果は同じです。一方、idやstyleの中のルール、スクリプトは、どこから参照されているか分からないので、そのまま残します。数バイトを減らそうとして絵が変わるほうが、はるかに悪いからです。
変わっていないかを目で確認できます
小さくする前と後を並べて描きます。ツール自身も、描画する要素と属性が同じままかを比べてお知らせしますが、最終的な判断は目で行うのが確実です。プレビューは絵としてだけ描くので、SVGの中にスクリプトがあっても実行されません。
例で結果を確かめる
Inkscapeから書き出したアイコン
inkscape:version、sodipodi:namedview、<title>、インデントが入ったSVGエディタ専用の属性2・タイトル1・コメント1を消して、容量が小さくなる小数点以下の桁数を減らす
cx="60.000000" cy="60.000000" r="50.0000"cx="60" cy="60" r="50"消すものと残すもの
表を左右にスクロールすると続きが見られます。
| 項目 | 処理 | 理由 |
|---|---|---|
| コメント・タイトル・メタデータ | 消します | 絵を描くのに使われません。 |
| エディタ専用の属性 | 消します | Inkscapeなどでだけ使う情報です。 |
| id | 残します | CSS・use・グラデーションが参照することがあります。 |
| <style>の中のルール | 残します | 名前に手を加えると、絵が壊れます。 |
結果が思ったとおりにならないとき
絵が違って見えます
小数点以下の桁数を増やしてみてください。それでも違う場合は、そのSVGを教えていただければ直します。結果は使わず、元のファイルを使ってください。
あまり小さくなりません
すでに整理されたSVGかもしれません。大きなSVGは、ほとんどをパスのデータが占めており、このツールはパスの形そのものは変えません。
SVGではないと表示されます
<svg>で始まる内容か確認してください。画像ファイル(PNG・JPG)は扱いません。
スクリプトが入っていると表示されます
SVGの中に<script>があります。ウェブに公開するときに危険なことがあるので、内容を確認してください。このツールは、その中には手を加えません。
知っておきたい用語
- 名前空間
- xmlnsで宣言する、タグや属性の所属です。エディタ専用のものもあります。
- viewBox
- 絵をどの座標範囲で描くかを決める属性です。
- パス(path)
- d属性に座標を続けて書いて、形を描く要素です。
- 可逆(ロスレス)
- 見た目の結果が変わらない軽量化です。
SVG最適化のよくある質問
なぜもっと小さくしてくれないのですか?
もっと小さくする方法はありますが、絵が変わるリスクも一緒に大きくなります。idを消したり、styleのルールをまとめたりするのが、その例です。このツールは、確実なものだけを消す方針を選びました。
小数点以下の桁数を減らすと、絵が変わりますか?
ごくわずかに変わることがあります。アイコンのような小さな絵は2桁でも十分ですが、大きな絵や精密な曲線は、桁数を増やして、プレビューで見比べてください。
ファイルはサーバーにアップロードされますか?
されません。このブラウザの中だけで処理します。
SVGOほど小さくなりますか?
それよりは小さくなりません。リスクのある処理をあえて行わないためです。その代わり、絵が変わる心配は少なくなります。
複数のファイルを一度に処理できますか?
今は1つずつ扱います。前と後を目で見比べることが肝心なので、1つずつ見るほうが安全です。
アニメーションが入ったSVGも使えますか?
使えます。animateなどの要素とその属性は、そのまま残します。ただし、プレビューで動きまで同じかを確認してください。
