SVG編集ツール

1. SVGファイルをドラッグ＆ドロップするか、SVGコードを貼り付けて読み込みます（Ctrl+Vでの貼り付けにも対応）。
2. プレビュー上の図形をクリックすると、塗り・線・線幅・不透明度・角丸・テキストを個別に編集できます。移動・拡大縮小・回転・複製・削除も可能です。
3. 「使用中の色」の色チップをクリックすると、同じ色を一括変更できます。単色化・currentColor化・線幅統一もワンクリックです。
4. ワンクリック修正プリセットで、軽量化・安全化・レスポンシブ化・viewBox修正・余白削除・正方形化などを実行できます。
5. SVG診断で問題点を確認し、「修正する」ボタンでそのまま修正できます。
6. 実サイズプレビューで16px〜128pxの表示やダークモードでの見え方を確認できます。
7. コードエディターで直接編集し、「コードを反映」でプレビューと同期できます。
8. HTML・CSS背景・Data URI・Base64・React JSX・Vue・symbol/use・WordPress用コードに変換してコピー、またはSVG・PNG・WebP形式でダウンロードします。

SVGとはどんな画像形式か

SVG（Scalable Vector Graphics）は、XMLで記述されるベクター画像形式です。PNGやJPEGのようにピクセルの集まりで画像を表現するのではなく、「どこにどんな図形を描くか」という指示をテキストで記述するため、どれだけ拡大しても画質が劣化しません。ロゴ・アイコン・図解・グラフなど、輪郭のはっきりした画像に適しています。

SVGはテキストベースであるため、コードを直接編集して色やサイズを変更でき、CSSやJavaScriptとの連携も可能です。一方で、書き出し元のソフト（IllustratorやInkscapeなど）によっては不要なメタデータが大量に含まれていたり、viewBoxが設定されていなかったりと、Webでそのまま使うには手直しが必要なケースが多くあります。このツールは、そうした「手元にあるSVGをWebで使える状態に仕上げる」ことに特化しています。

viewBoxの役割と固定サイズの問題

viewBoxはSVGの表示領域（座標系）を定義する属性で、「x y 幅 高さ」の4つの値で構成されます。viewBoxが設定されていれば、SVGはどんなサイズで表示しても内容が自動的にスケールします。逆にviewBoxが無いと、CSSでサイズを指定しても中身が拡大されず見切れる、といった問題が起こります。

また、svgタグに固定のwidth・height属性が付いていると、CSSでのサイズ制御より優先されてレイアウトが崩れる原因になることがあります。Webで使うSVGは「viewBoxあり・固定width/heightなし」の状態にしておくと、CSSから自由にサイズを制御できます。このツールでは「viewBoxを自動修正」「レスポンシブ化」のプリセットで、これらをワンクリックで整えられます。

SVGの軽量化で削れるもの

デザインソフトから書き出されたSVGには、表示に不要なデータが多く含まれています。代表的なものは、コメント、metadata要素、エディタ専用の名前空間属性（sodipodi・inkscapeなど）、使われていないid属性、冗長な空白・改行です。これらを削除しても見た目は一切変わらないため、軽量化の第一歩として安全に実行できます。

ファイルサイズが小さくなるとページの読み込みが速くなり、Data URIとしてCSSに埋め込む場合のコストも下がります。このツールの「Web用に軽量化」プリセットは、これらの不要データの削除と空白圧縮・色表記の短縮をまとめて行い、削減量を変更前後のサイズ比較で確認できます。

SVGの安全性（script混入とXSS）

SVGはXML文書であるため、script要素やonclickなどのイベント属性を含めることができます。悪意のあるSVGをそのままサイトに埋め込むと、XSS（クロスサイトスクリプティング）攻撃の入り口になる恐れがあります。WordPressが標準でSVGアップロードを許可していないのはこのためです。

配布素材や外部から受け取ったSVGを使う場合は、script要素・イベント属性・外部参照を除去してから使うのが安全です。このツールでは読み込み時に基本的なサニタイズを行うほか、「WordPress用に安全化」プリセットでより徹底した除去ができます。SVG診断でもscript混入や外部参照の有無を確認できます。

currentColorとコード変換の活用

SVGのfillやstrokeにcurrentColorを指定すると、HTML側のCSSのcolorプロパティで色を制御できるようになります。ホバー時の色変更やダークモード対応が1つのSVGで済むため、アイコン運用の定番テクニックです。ただしCSSのbackground-imageとして使う場合はcurrentColorが効かない点に注意が必要です。

編集を終えたSVGは、使う場所に合わせた形式へ変換すると実装がスムーズです。HTMLに直接貼るインラインSVG、CSSのbackground-image用にエンコードしたData URI、ReactのJSX（stroke-width→strokeWidthなどの属性変換が必要）、Vueテンプレート、同じアイコンを繰り返し使うためのsymbol/use形式など、このツールはそれぞれの形式への変換とコピーに対応しています。

アクセシビリティ対応

意味のある画像として使うSVGには、title要素とrole="img"を設定すると、スクリーンリーダーが内容を読み上げられるようになります。逆に装飾目的のSVGにはaria-hidden="true"を設定して読み上げ対象から外すのが適切です。このツールのアクセシビリティ設定では、画像の役割を選ぶだけで適切な属性が付与されます。

Webサイト制作では、配布素材のアイコンをサイトのブランドカラーに一括変更し、軽量化してからインラインSVGとして埋め込む、という流れを一画面で完結できます。currentColor化しておけば、CSSだけでホバー色やダークモード色を切り替えられます。

WordPress運用では、外部から入手したSVGを「WordPress用に安全化」で無害化し、WordPressタブのコードをカスタムHTMLブロックへ貼り付けるだけで安全に利用できます。

アプリ・フロントエンド開発では、デザイナーから受け取ったSVGを整理（不要データ削除・viewBox修正・正方形化）した上で、React JSXやsymbol/use形式に変換してそのまま実装に使えます。16px・24pxの実サイズプレビューで、小さいサイズでも潰れないかを事前に確認できます。

資料・印刷用途では、SVGのままでは扱えないツールに貼り付けるために、高解像度のPNG（最大2048px）やWebPへ変換してダウンロードできます。

Q. SVGの色を変更するにはどうすればいいですか？

A. プレビュー上の図形をクリックすると塗り・線の色を個別に変更できます。「使用中の色」の色チップをクリックすると、同じ色を使っているすべての箇所を一括変更できます。単色化・currentColor化にも対応しています。

Q. アップロードしたSVGファイルはサーバーに送信されますか？

A. 送信されません。読み込み・編集・診断・変換・書き出しのすべてがブラウザ内で完結します。自動保存もお使いのブラウザのlocalStorageにのみ行われます。

Q. viewBoxが無いSVGはどうなりますか？

A. 拡大縮小時に表示が崩れたり、CSSでサイズ指定しても正しくスケールしない原因になります。「viewBoxを自動修正」プリセットで、描画内容から適切なviewBoxを自動生成できます。

Q. SVGをレスポンシブ対応にするには？

A. 固定のwidth・height属性を削除し、viewBoxを残すことでCSSから自由にサイズ制御できます。「レスポンシブ化」プリセットをクリックするだけで自動処理されます。

Q. WordPressにSVGを安全に貼り付けるには？

A. 「WordPress用に安全化」プリセットでscript要素・イベント属性・外部参照を除去した後、コード変換のWordPressタブでカスタムHTMLブロック用コードをコピーして貼り付けてください。

Q. 軽量化するとどのくらい小さくなりますか？

A. IllustratorやInkscapeから書き出したSVGは不要データを多く含むため、20〜70%程度削減できる場合があります。変更前後のサイズと見た目を比較しながら確認できます。

Q. SVGをPNGやWebPに変換できますか？

A. はい。書き出しセクションで出力幅（256〜2048px）を選び、「PNGで保存」「WebPで保存」をクリックするだけで変換・ダウンロードできます。

Q. Reactコンポーネントに変換できますか？

A. はい。コード変換のReact JSXタブで、属性のcamelCase変換とstyle属性のオブジェクト化を行ったJSXコンポーネントを生成できます。Vue・CSS背景・Base64・symbol/use形式にも対応しています。

Q. 編集を間違えた場合は元に戻せますか？

A. はい。「戻す」「やり直す」ボタン（Ctrl+Z / Ctrl+Y）で操作単位で戻せるほか、「編集前に戻す」で読み込み直後の状態にいつでも戻せます。「変更前と比較」ボタンを押している間は編集前の見た目を確認できます。

このツールは無料でご利用いただけます。編集・変換の結果はSVGの構造によって異なる場合があるため、書き出し前にプレビューでご確認ください。CSSやグラデーション・フィルタを多用した複雑なSVGでは、一部の編集機能が意図通りに動作しない場合があります。大切なファイルは編集前に元データのバックアップを保管することをおすすめします。