開発 へ戻る
SVG 最適化 — 不要属性削除でサイズ削減

SVG 最適化 — 不要属性削除でサイズ削減

SVGO で SVG を最小化し、Before / After のファイルサイズ・削減率を表示します。数値の精度、id 属性 / `<title>` / `<desc>` の除去などをオン/オフで調整可能。viewBox は安全のためデフォルトで保持。Web フォントやコンポーネントに埋め込む前のクリーンアップに。すべてブラウザ内で処理し、SVG は外部に送信されません。

開発画像整形

使い方

SVG をテキストエリアに貼り付けるか、`.svg を選択` から読み込みます。数値の精度や id 属性 / `<title>` / `<desc>` の除去オプションを必要に応じて調整し、「最適化を実行」を押すと SVGO がブラウザ内で最適化を行います。Before / After のサイズ・削減率が表示され、結果はコピーまたは .svg ダウンロードで他のエディタに渡せます。すべてブラウザ内で完結し、SVG は外部に送信されません。

よくある質問

SVG はサーバーに送信されますか?
いいえ。SVGO をブラウザ内で動かして最適化しています。Web フォントに埋め込む前の社内アイコンや、未公開デザインのアセットも安全に処理できます。
削減率はどれくらいになる?
コンテンツによりますが、Figma / Sketch / Illustrator から書き出した SVG は 30〜70% 程度縮むのが普通です。元から手書きで最小限の SVG (Iconify など) は 5〜15% にとどまります。
viewBox はなぜ保持がデフォルト?
viewBox を消すと width / height が明示されていない場合に表示が崩れます。SVGO のデフォルトでは安全のため removeViewBox は無効になっており、本ツールもそれに従います。CSS で width / height を完全に制御する自信があるときだけオフにしてください。
数値の精度を下げると何が変わる?
パス座標などの小数桁を丸めます。1〜2 桁まで下げると目に見えて滑らかさが減ることがあるので、ロゴ・アイコンは 3 桁、イラスト系は 2 桁、極小サイズで使うアイコンなら 1 桁、と用途に応じて調整してください。
id 属性を消しても大丈夫?
外部 CSS / JS / `<use>` で参照されていない単体アイコンなら大丈夫です。複数 SVG を同じページに埋め込む場合や、`<use>` でシンボル参照する場合は id が必須なので残してください。
対応してない属性 (Inkscape の sodipodi: 等) は?
SVGO のデフォルトプリセットが Inkscape / Adobe Illustrator 固有の名前空間 (sodipodi:, inkscape:, adobe:) を除去します。表示には影響しません。

類似のツール

favicon / アイコン生成 — 16〜512px を一括出力

favicon / アイコン生成 — 16〜512px を一括出力

1 枚の画像から Web サイト / PWA / Apple Touch / Android Chrome 用のアイコン (16〜512px の PNG) と、マルチサイズの favicon.ico を一括生成して ZIP でダウンロードします。Canvas でリサイズ、ICO バイナリも自前で構築するので、画像は一切外部に送信されません。

画像生成リサイズ
バーコード生成 — JAN / EAN / UPC / CODE128 / CODE39

バーコード生成 — JAN / EAN / UPC / CODE128 / CODE39

数字や文字列を 1 次元バーコード (JAN-13 / EAN-13・JAN-8 / EAN-8・UPC-A・CODE128・CODE39・ITF・Codabar/NW-7・MSI) に変換し、PNG / SVG として保存できます。バーの太さ・高さ・色・余白や、下部の数字表示の有無を細かく調整可能。チェックディジットの検証も自動で行います。生成はすべてブラウザ内で完結し、入力した値が外部に送信されることはありません。

開発生成画像
HTML サニタイズ — XSS 防御 (script / on* / javascript:)

HTML サニタイズ — XSS 防御 (script / on* / javascript:)

DOMPurify でユーザー投稿 HTML から XSS 攻撃ベクター (script 要素・on* イベントハンドラ・javascript: URL・data: URL の不正利用・iframe など) を取り除きます。厳格 / 標準 / 許容の 3 モードでプロファイルを切替可能。CMS や掲示板に渡す前のサニタイズ、Markdown→HTML 変換結果の安全化、ブログ移行時のレガシー HTML 清掃などに。すべてブラウザ内で完結し、HTML は外部に送信されません。

開発セキュリティ整形
IPv6 整形 — 圧縮 / 展開 / リバース DNS / 種別判定

IPv6 整形 — 圧縮 / 展開 / リバース DNS / 種別判定

IPv6 アドレス (::1 / 2001:db8::1 / fe80::1%eth0 / [::1]:8080 など) を解析して、RFC 5952 準拠の圧縮形・全 8 群を展開した正規化形・ip6.arpa 形式のリバース DNS 名・16 進連結・2 進展開を一覧表示。ループバック / リンクローカル (fe80::/10) / ユニークローカル (fc00::/7) / マルチキャスト (ff00::/8) / グローバルユニキャスト (2000::/3) / IPv4-mapped (::ffff:0:0/96) / 文書化用 (2001:db8::/32) などのカテゴリも自動判定。IPv4-mapped は IPv4 アドレスへ自動逆引き。ゾーン ID (%eth0) と角括弧表記にも対応。すべてブラウザ内で処理、外部送信なし。

開発整形