SVG→JSX変換ツール
SVGを貼り付けるだけで、プロジェクトにそのままコピーできるきれいなReact・React Native・Vue・Svelteコンポーネントが手に入ります。
- アップロード不要
- オフライン対応
- 無料・登録不要
- ファイルはブラウザの外に出ません
SVGファイルをここにドロップ
またはエディターにSVGコードを貼り付けてください。 複数のファイルを同時に開けます。
SVGはこのデバイスに残ります。何もアップロードされません。
SVG→JSX変換ツールの使い方
- 1
SVGを貼り付け
SVGコードを貼り付けるかファイルをドロップします。最適化タブで先に最適化すると、コンポーネントが最小になります。
- 2
フレームワークを選ぶ
React（JSXまたはTSX）、React Native、Vue、Svelteから選びます。コンポーネント名やcurrentColorなどのオプションを設定します。
- 3
コピーまたはダウンロード
コンポーネントをコピーするか、すぐに使える.jsx、.tsx、.vue、.svelteファイルとしてダウンロードします。
ReactでSVGを使う前に変換が必要な理由
JSXはHTMLに似ていますが、JavaScriptのルールに従います。SVGをそのままReactコンポーネントに貼り付けると、エラーや警告が出ることがよくあります。stroke-widthやfill-ruleのようなハイフン付きの属性はcamelCaseに、classはclassNameに、インラインのstyle文字列はオブジェクトにする必要があるからです。xlink:hrefのような名前空間付き属性や、IllustratorやSketchのメタデータも整理が必要です。
viewsvgはこれらをすべて処理し、propsを受け取る名前付きコンポーネントで包むので、親からclassName、width、aria-labelを渡せます。
SVGアイコンコンポーネントのコツ
- 先に最適化ツールにかけて、メタデータを取り除きパスを軽くしましょう。
- currentColorを使用をオンにすると、アイコンが文字色に従い、ライト・ダークどちらのテーマでも使えます。
- width/heightを削除をオンにしてCSSでサイズを指定すれば、同じコンポーネントをどのサイズでも使えます。
viewBoxは残してください。ないとアイコンを拡大縮小できません。
SVG作業に必要なものがすべて揃っています
SVG→JSX変換ツールは、SVGファイルの表示・編集・最適化・変換をひとつにまとめたワークスペースの一部です。登録不要、広告なし、アップロードなし。
すぐにプレビュー
最大6400%までズーム、パン、画面に合わせる表示、透明・白・黒・任意の背景色でSVGを確認できます。
ライブコードエディター
シンタックスハイライト、エラー行の表示、整形と圧縮、検索、完全な元に戻す履歴。
アウトラインとピクセルグリッド
アウトラインモードですべてのパスを確認し、拡大時はグリッドでピクセルの位置合わせをチェックできます。
情報の確認
ファイルサイズとgzipサイズ、viewBox、ホバーでハイライトされる要素ツリー、ワンクリックの色置き換え。
SVGOで最適化
前後のプレビューを比べながら、精度を調整してファイルを軽量化。開いているすべてのファイルを一括最適化できます。
PNG・JPG・WebP・ICO
最大16384pxまで任意のサイズで、透明度を保ったまま書き出し。PNGを直接クリップボードにコピーすることもできます。
React・Vue・Svelte
currentColorやpropsに対応した、きれいなJSX/TSX、React Native、Vue、Svelteコンポーネント。
複数ファイルを同時に
多数のSVGをタブで開き、一括最適化したり、SVGやPNGのZIPとしてダウンロードできます。
プライベート＆オフライン
アップロードもアカウントも不要。作業内容はブラウザに保存され、初回訪問後はオフラインでも動作します。
よくある質問
SVGをJSXに変換すると何が変わりますか？
属性がcamelCaseになり（stroke-width → strokeWidth）、classはclassNameに、xlink:hrefはxlinkHrefに、インラインのstyle文字列はstyleオブジェクトになります。viewsvgがすべて自動で行います。
ReactでSVGアイコンに文字色を継承させるには？
「currentColorを使用」をオンにしてください。すべてのfillとstrokeがcurrentColorに置き換わり、アイコンが親要素のCSSの色に従います。
React Nativeに対応していますか？
はい。React Nativeを選ぶと、react-native-svg（Svg、Path、Gなど）を使ったコンポーネントが、対応するimport行付きで出力されます。
SVGファイルはどこかにアップロードされますか？
いいえ。viewsvgは完全にブラウザ内で動作します。ファイルの読み込み、表示、最適化、変換はすべてお使いのデバイス上で行われ、サーバーには何も送信されません。初回訪問後はオフラインでも使えます。
viewsvgは無料ですか？
はい。すべての機能が無料で、登録不要、透かしなし、ファイル数の制限もありません。