SVG編集と変換

SVGコードの編集、色の変更、最適化、React JSXやPNGへの変換をサポートします。

SVG Preview ViewportWidth: 150px | Height: 150px
Drag SVG file inside or click Upload to select a file.

No color attributes detected in this SVG.

SVG の編集とコード変換

SVG はテキストで書かれたベクター画像なので、コードを直接編集できます。色を変えたり不要なメタデータを削って容量を減らせるほか、React コンポーネント（JSX）や CSS にそのまま書ける Data URI、PNG ラスター画像にも変換できます。

使い方

  1. SVG コードを貼り付けるかファイルを読み込みます。
  2. 色やサイズを調整し、最適化を適用します。
  3. JSX・Data URI・PNG から必要な形式で書き出します。

よくある質問

React に貼り付けるとエラーになります。
JSX では stroke-width のようなハイフン属性を strokeWidth と書く必要があります。JSX 変換を使えば属性名が自動的に変換されます。
SVG を CSS の背景に使うには？
Data URI に変換した文字列を background-image: url(...) にそのまま入れれば、追加リクエストなしで表示できます。