SVGエディターとは？
ビジュアルキャンバス上で図形、パス、テキストを描画し、ストロークやフィルの色を調整してSVGコードをエクスポートできます。デスクトップソフトウェアは不要です。
ツールには長方形・楕円・直線・フリーパス・テキストに加え、シェイプライブラリ(三角形・六角形・星・矢印)があります。テキストはキャンバス上で直接編集します — テキストツールを選んで入力するか、既存のテキストをダブルクリックして書き換えます。各要素は塗り・線の色と太さ・不透明度をそれぞれ保持し、プロパティパネルで X・Y・幅・高さの正確な値を入力できます。既存の SVG はワンクリックで読み込み、10 ピクセルのグリッドに描画をスナップし、最大 50 ステップまで元に戻す/やり直しが可能です。完成した図は HTML や React JSX 用の純粋な SVG コードとして、あるいは SVG が使えない場所向けにラスタライズした PNG として書き出せます。
使い方
- 描画ツール（長方形、楕円、線、パス、テキスト）を選択し、キャンバス上に描画します。
- 要素を選択して、移動、リサイズ、回転、またはフィル、ストローク、透明度を変更します。
- 完成したグラフィックをSVGファイルとしてエクスポートするか、生のSVGマークアップをコピーします。
使用するタイミング
- ランディングページ用のワンオフのロゴや区切り線、ヒーロー図形を描く。
- 重いデスクトップアプリを開かずに、既存のSVGを手早く微調整する。
- キャンバスに描くたびに変わるコードを見ながらSVGの基本を教える。
結果
ウェブ開発者がシンプルなロゴマーク（グラデーションフィルの重なり合う2つの円）を必要としています。キャンバス上に図形を描画し、色を適用して、SVGコードを直接HTMLにコピーします。
よくある質問
- コピーしたSVGをそのままReactのJSXに貼って大丈夫ですか?
- 基本は大丈夫ですが、stroke-widthやstop-colorのような属性はJSX側でstrokeWidth、stopColorといったキャメルケースに直す必要があります。ここでコピーされるのはkebab-caseの素のSVGなので、HTMLにはそのまま、JSXには一度置換すれば対応できます。
- 既存のSVGを読み込んで続きを編集できますか?
- はい。SVG を読み込むボタンを使えば、デバイス上の任意の .svg ファイルを取り込めます。長方形・楕円・円・直線・パス・テキストはキャンバス上で編集可能な要素になります。グラデーション、フィルター、ネストされたグループはエディタが各図形を単一プリミティブとして保持するためスキップされます。
- 書き出したSVGがIllustratorやFigmaで違って見えるのはなぜですか?
- レンダラーごとに線の整列、グラデーション、フィルターの扱いが少し違います。ここの出力はすべての現代ブラウザの表示と一致し仕様どおりの挙動なので、差異は通常もう一方のソフト側の解釈です。
- パスツールはベジェ制御点を扱えますか?
- フリーパスツールは描いた点を記録して折れ線スタイルのパスとして出力します。本物の三次ベジェ曲線が欲しい場合は、SVGをエクスポートしてd属性を手で書き換えるか、ハンドルを表示できるベクターツールに結果を貼り付けて続きを調整してください。
- キャンバスにいくつまで要素を追加できますか?
- 現代のデバイスなら数百個の図形は快適です。数千個(複雑な地図やアイコングリッドなど)になると、ドラッグごとにキャンバス全体が再描画されるので遅さを感じます。その場合はパスをまとめて複合パスに減らしてください。