SVG最適化
SVG Optimiser
編集ソフトの残骸を取り除き、変換をまとめ、座標の桁を丸めて、描画結果を並べて比べます。
デザインツールから保存したSVGは、エディタのメタデータと、誰もほどかなかった変換の並びと、小数第7位まで書かれた座標を抱えています。それを全部取り除くのは簡単で、難しいのは絵が変わったかどうかを知ることです。だからここは、バイト数だけでなく差分の表示を出します。
SVG を置いてください
下のマークアップを直接編集してもかまいません。何もアップロードしません。
マークアップを編集
使い方
SVGを置くか、マークアップを貼ります
打ちながら最適化するので、ファイルを貼る使い方も、その場で直す使い方もできます。
精度を決めます
24単位のviewBoxなら、小数2桁は100倍に拡大しても100分の1ピクセルです。1桁を切ると、アイコンが目に見えてずれはじめます。
差分の表示を確かめます
最適化後のファイルを元の上に差分モードで重ねます。真っ黒なら描画結果は同一で、光っているところが動いたピクセルです。
SVGかデータURIをコピーします
ここのデータURIはBase64ではなくURLエンコードなので、元ファイルに対して33%ではなくおよそ10%増で済みます。
よくある質問
「titleを削除」が、なぜ初期状態で切ってあるのですか
`<title>`がインラインSVGのアクセシブルな名前だからです。消して浮くのは30バイトほどで、代わりにスクリーンリーダーを使う人にとって、名前のあったアイコンが名前のないアイコンになります。
最適化したらアイコンが少しずれました
そのviewBoxに対して精度が低すぎます。viewBoxが小さいと1単位が絵の大きな割合を占めるので、小数1桁への丸めが目に見えて動かします。差分の表示が真っ黒になるまで精度を上げてください。
パスのデータも短くしてくれますか
数値を丸め、純粋な平行移動を焼き込み、それで何バイト減ったかを報告します。コマンドをより短い等価の書き方に置き換えることはしません。それは曲線の種類を変える処理で、パス最適化が本物のバグを持ち込むのはそこだからです。
ここから渡せます
ファビコン生成
Favicon Generator
ICO・各サイズのPNG・Appleタッチアイコン・ウェブマニフェストを一式で作り、貼り付けるHTMLも添えます。
SVGをPNGに変換
SVG to PNG
SVGを好きな倍率でPNG・JPEG・WebPに描き出し、背景は透明のままにも塗りつぶしにもできます。
画像をSVGに（ベクター化）
Image to SVG
ビットマップを、写真よりロゴや線画に向いた調整でSVGのパスに起こします。
QRコード作成
QR Code Generator
URL・テキスト・Wi-Fi・vCard・決済文字列のQRを、誤り訂正レベル・ロゴ・SVG書き出し付きで作ります。
次の一手
このツールが出したものをそのまま受け取れる道具です。
ファビコン生成
Favicon Generator
ICO・各サイズのPNG・Appleタッチアイコン・ウェブマニフェストを一式で作り、貼り付けるHTMLも添えます。
SVGをCSSデータURIに
SVG to CSS Data URI
SVGをCSS背景用のデータURIに符号化し、必要な文字だけをエスケープして短く保ちます。
SVGパス編集
SVG Path Editor
パスデータを絶対・相対コマンドで書き換え、移動・拡大・回転・向きの反転を加え、バウンディングボックスとプレビューを表示します。
SVGをPNGに変換
SVG to PNG
SVGを好きな倍率でPNG・JPEG・WebPに描き出し、背景は透明のままにも塗りつぶしにもできます。
背景透過（切り抜き）
Background Remover
平坦な背景や単色の背景をOKLabでキーイングして透過PNGにし、縁はブラシで直せます。
EXIF情報の削除
EXIF Remover
画素には手を触れずに、カメラ・GPS・編集履歴のメタデータだけを写真から消します。