SVG コードをオンラインでプレビュー・色変更・軽量化する方法

Claude や ChatGPT で生成した <svg> コードや、SVGRepo・Figma から書き出したベクターアイコンは、テキストエディタだけでは細部の見た目や余白を確認しづらいものです。ブラウザ上でプレビュー・色調整・軽量化・画像書き出しまでを一括で行えるワークフローを活用しましょう。

透過グリッド・明暗背景でリアルタイム確認

SVG ビューアー＆最適化ツールにコードを貼り付けるか .svg ファイルをドロップすると、viewBox からサイズを自動判定して即座に描画されます。グリッド・ライト・ダークの背景を切り替えることで、白背景で見えなくなる線や透過漏れをすぐに発見できます。

コードを書き換えずにドラッグ操作でリアルタイム色変更

複数の <path> に散らばった色コードを手作業で置換する必要はありません。

1. SVG ビューアー＆最適化ツールのプレビュー下部に、検出された HEX カラーが一覧表示されます。
2. カラースウォッチをクリックしてカーソルを動かすと、図形内の該当カラーがリアルタイムに変化します。
3. 配色設計から始めたい場合はカラーピッカーも併用できます。

XML の軽量化と 2x / 4x PNG 出力

軽量化ボタンをクリックすると不要なコメントやメタデータ、空白が削除され、CSS にそのまま貼れる Data URI もワンクリックでコピーできます。スライド資料向けに画像化する際は、2x または 4x 倍率を選んで高解像度 PNG・WebP として書き出せます。別形式への一括変換には画像変換ツールが便利です。