使い方
- icon.svg12 KB
SVG を入れる（コードも可）
- icon.svg12 KB → 4 KB
中身を診断し、SVGO で軽くする
- icon.svg最適化した SVGicon.png幅を指定
PNG・WebP・Base64 などに変換
SVG ファイルをドロップするか「ファイルを選択」で追加します（複数可）。コードを貼り付けて「貼り付けたコードを追加」でも読み込めます。「サンプルで試す」で動きを確認できます。
「診断」タブで、サイズ・viewBox・要素数・埋め込み画像・フォント参照と、script・on* 属性・外部参照・iframe など SVG 以外の要素の検出結果を確認します。必要なら「除去した版」を保存します。
「最適化」タブで viewBox・ID・小数の桁数などを決め、前後のバイト数を見ながら SVG を軽量化して保存します。
「変換」タブで PNG・WebP（幅または倍率・背景を指定）、データ URI、Base64、CSS の background、React（JSX）に変換します。
「整形」タブでインデント付きの整形や 1 行化を行い、コピーまたは保存します。
できること
画像として見るから、スクリプトが動かない
プレビューは SVG を画像（blob: URL の img）として表示します。この方法ではスクリプトは実行されず、外部ファイルも読み込まれません。背景（市松・白・黒）と 100〜400% の拡大を切り替えられます。
危険な要素の検出と「除去した版」
script 要素、on* 属性、javascript: URL、http(s) などの外部参照、foreignObject、iframe・object・embed・XHTML など SVG 以外の要素、CSS の @import・外部 url()、ENTITY 宣言、href を書き換えるアニメーションを一覧にします。「除去した版」は DOMPurify（SVG 用の許可リスト方式）で、検出した項目と外部への参照を取り除いた SVG です。すべての攻撃を防ぐ保証はしません。
SVGO で軽量化し、前後のバイト数を表示
定番の SVGO（バージョン固定）で軽量化します。viewBox・ID を残すか、width / height を外すか、小数の桁数（0〜8）を選べます。複数のファイルは ZIP にまとめて書き出せます。
PNG・WebP・コードへの変換
幅（px）か倍率と背景を指定して PNG・WebP に、SVG 本文をデータ URI・Base64・CSS の background・React（JSX）に変換できます。JSX では class → className、stroke-width → strokeWidth などの属性名を変換します。
読み込み・変換とも端末の中だけ
ファイルもコードも外部へ送りません。SVG のコードがページの HTML に直接挿入されることもありません。
こんなときに
- デザイナーから受け取った SVG を、サイトに載せる前に軽量化したい
- ダウンロードした SVG に script や外部参照が入っていないか、開く前に調べたい
- SVG のロゴを PNG（2 倍・3 倍）や WebP にして、SVG が使えない場所へ貼りたい
- アイコンを CSS の background やデータ URI、React のコンポーネントとして使いたい
- エディタが出力した読みにくい 1 行の SVG を整形して確認したい
対応形式
入力
出力
対応状況
| 機能 | 対応 | 補足 |
|---|---|---|
| 安全なプレビュー（背景切替・100〜400% 拡大） | 対応 | — |
| サイズ・viewBox・要素数・埋め込み画像・フォント参照・外部参照の一覧 | 対応 | — |
| script・on* 属性・javascript: URL・外部参照・foreignObject・SVG 以外の要素の検出と除去 | 対応 | 検出する項目は診断タブに列挙したものです。これ以外の問題がないことの保証ではありません |
| SVGO による軽量化（viewBox・ID・小数の桁数） | 対応 | — |
| PNG・WebP への変換（幅・倍率・背景） | 対応 | 1 辺 8192 px・4,000 万画素まで。WebP は対応ブラウザのみ |
| データ URI・Base64・CSS background・React（JSX）への変換 | 対応 | — |
| コードの整形・1 行化 | 対応 | — |
| アニメーション（SMIL / CSS）の書き出し | 非対応 | PNG・WebP は静止画 1 枚です。軽量化で動きが変わる場合があるため、結果は必ず確認してください |
| テキストのアウトライン化（文字を図形にする） | 非対応 | 画像に変換するときの文字は、お使いの端末にあるフォントで描かれます。Web フォントは反映されません |
| 外部ファイル（画像・フォント・CSS）を読み込んだ変換 | 非対応 | 外部参照は変換時に読み込みません。埋め込み（data:）の画像は使えます |
| ラスター画像（PNG・JPG）から SVG へのトレース | 非対応 | — |
制限・注意事項
- 1 ファイル 2 MB・合計 10 MB・20 個までです。
- PNG・WebP の出力は 1 辺 8192 px・4,000 万画素までです。
- 画像への変換では、診断で見つかった script・外部参照などを取り除いた SVG を使います。
- 軽量化・整形でアニメーションや text 内の空白の扱いが変わる場合があります。結果をプレビューで確かめてください。
- SVG をページに直接埋め込んで使う場合は、サーバー側でも必ず無害化してください。このツールの「除去した版」は、利用者が自分で確認するための補助です。
- スマホ・タブレットでも読み込み・確認・変換はできますが、コードを読みながら診断項目や軽量化の設定を見比べる作業は PC の方が確実です。
プライバシーと安全性
SVG の読み込み・診断・軽量化・変換はすべてお使いのブラウザの中で行います。ファイルやコードはサーバーへ送信・保存されません。解析の内容や元ファイル名を計測に含めることもありません。
よくある質問
SVG を最適化（圧縮）すると見た目は変わりますか？
SVG に script が入っているか確認できますか？
SVG を PNG に変換するときの大きさはどう決まりますか？
変換した PNG の文字がフォントの違いで崩れます
SVG をデータ URI や React のコンポーネントに変換できますか？
アップロードした SVG はサーバーに送られますか？
関連ツール
画像形式変換
先に変換先の形式を選び、画像をドロップするだけで一括変換。形式ごとの画質やロスレス WebP、透過部分の背景色、出力ファイル名まで指定でき、画像はサーバーへ送信されません。
カラー変換・コントラスト・パレット（Color Studio）
色を 1 つ入力するだけで、HEX・RGB・HSL・HWB・OKLCH・CMYK（概算）へ即時変換。背景色との WCAG コントラスト比を AA/AAA で判定し、補色・トライアドなどの配色や 50〜950 の OKLCH スケールを作って、CSS 変数や Tailwind 設定として書き出せます。色はこの端末の外へ送信されません。
favicon・PWA・SNS画像一式生成
1 枚の画像（または文字・絵文字）から、favicon.ico・apple-touch-icon・Android/PWA 用・maskable・OGP 画像と、manifest・head に貼るコードまでまとめて作れます。実寸のぼやけ確認つきで、画像はブラウザの外へ出ません。
画像圧縮
画像をドロップするだけで、画質を保ったまま一括で軽量化。WebP・AVIF への変換やリサイズ、圧縮前後の見比べもできます。画像はサーバーへ送信されません。
Font Viewer・比較・収録文字確認
フォントのファイルをドロップすると、名前・グリフ数・収録文字（JIS 水準・常用漢字などの収録率）を調べ、好きな文字列でプレビューできます。複数のフォントの比較や、WOFF2・WOFF への変換、指定した文字だけのサブセットも可能です。すべてブラウザ内で処理し、フォントは送信されません。
画像一括リサイズ
無料で、画像をまとめてドロップし、幅・長辺・枠への切り抜きなど好きな方法で一括リサイズできます。画像の px（ピクセル数）は幅か長辺の数値で変えます。1 枚から 320・640・1280 のように複数サイズを一度に作り、srcset の HTML までコピーできます。画像はサーバーへ送信されません。
最終更新: