SVGスタジオエディター

ブラウザでSVGファイルを編集・プレビューします。コード直接編集、サイズ変更、PNG変換などの機能を提供します。

SVG Studio

Infinite Resolution Analytics

Edit and preview SVG code instantly. Experience the magic of crisp vector graphics.

SVG Code Editor

Live Preview

SVGはシャープなベクター画像を編集可能なコードにします

アイコン、シンプルなロゴ、図解、UI装飾は、拡大してもぼやけにくいSVGと相性が良いです。SVG Studioではマークアップを編集し、すぐにプレビューし、コードコピーやSVGファイル保存まで行えます。

SVGの基本概念

ベクター

固定ピクセルではなく図形、パス、座標で表すため、拡大しても鮮明さを保ちます。

viewBox

内部の座標系です。表示サイズが変わってもアートワークの収まり方を制御できます。

安全なプレビュー

コンポーネントはDOMPurifyのSVGプロファイルでコードを整えてからプレビューに挿入します。

使い方

  1. SVGマークアップをエディタに貼り付けるか、初期サンプルを編集します。
  2. 図形、色、サイズの変更をライブプレビューで確認します。
  3. 完成したコードをコピーするか、SVGファイルとして保存します。

よくある質問

外部のSVGを貼り付けてもよいですか？

可能です。ただし本番利用前に不要なコードや不審な記述がないか確認してください。

PNG変換ツールですか？

このページの中心はSVGコードの編集、プレビュー、コピー、SVG保存です。ラスタ変換は別途確認が必要な場合があります。

サイト上の表示と違うことがあるのはなぜですか？

親要素のCSS、継承色、フォント、レイアウト制約によって、同じSVGでも表示が変わることがあります。

SVGを公開環境で使う前に、セキュリティ、アクセシビリティ、ライセンス、実際の表示を確認してください。