SVGエディター

SVG ファイルをライブプレビューしながらオンラインで編集。色、寸法、viewBox を変更し、修正済み SVG をダウンロードまたはコピー。無料のブラウザツール。

主な機能

SVG コードのライブプレビュー
width、height、viewBox の編集
色の検索と置換
修正済み SVG のダウンロードまたはコピー

Guide

SVG（Scalable Vector Graphics）は、ピクセルグリッドではなく数学的な座標を使って形状、パス、テキストを記述する XML ベースの画像フォーマットです。ラスターフォーマット（PNG、JPEG、WebP）とは異なり、SVG 画像は品質を落とさずに任意のサイズに拡大縮小します。24px のアイコンとビルボードサイズのロゴが同じ SVG ファイルを使えます。これにより、SVG はアイコン、ロゴ、イラスト、チャート、複数のサイズで鮮明にレンダリングする必要のあるあらゆるグラフィックの標準フォーマットになります。本ガイドでは、SVG 構造、編集技術、最適化戦略、Web 開発での実用を取り上げます。 SVG ファイルはテキスト文書です。任意のコードエディターで開いて読めます。ルート要素は width、height、viewBox の属性を持つ <svg> です。viewBox は座標系を定義します：viewBox="0 0 100 100" は描画領域が (0,0) から (100,100) に及ぶことを意味します。<svg> 要素の中に、<rect>、<circle>、<ellipse>、<line>、<polyline>、<polygon>、<path> のような形状要素があります。各要素は、そのジオメトリ、塗りつぶし色、ストローク色、ストローク幅、その他の視覚的特性を定義する属性を持ちます。この構造を理解することは SVG を効果的に編集するために不可欠です。グラフィカルエディターで行う視覚的な変更はすべてこの XML マークアップの変更に対応するからです。 <path> 要素は最も強力で最も複雑な SVG 要素です。d 属性にコマンドのコンパクトな文字列を使って任意の形状を記述します。コマンドは：M（移動）、L（直線）、H（水平線）、V（垂直線）、C（3次ベジェ曲線）、S（スムーズ3次ベジェ）、Q（2次ベジェ曲線）、T（スムーズ2次ベジェ）、A（楕円弧）、Z（パスを閉じる）です。大文字は絶対座標を使います。小文字は相対座標を使います。典型的なパスは d="M10 10 L90 10 L90 90 L10 90 Z" のようで、正方形を描画します。複雑なイラストは数百のパスコマンドを含みます。これらを手作業で編集するのは可能ですが面倒なので、視覚的な SVG エディターが存在します。パスデータのベジェ曲線は、SVG の面白い形状の大部分を定義するため特別な注意に値します。3次ベジェ（C コマンド）は3つの座標ペアを取ります：2つの制御点と1つの終点です。制御点は曲線が実際にそれらを通過することなく曲線を引き寄せ、滑らかな円弧を作ります。S コマンドは前の制御点を反映して連続した曲線を作るスムーズ3次ベジェの短縮形です。2次ベジェ（Q コマンド）は単一の制御点を使い、より単純ですが柔軟性は劣ります。制御点が曲線の形状にどう影響するかを理解すれば、特定の曲線セグメントを調整する必要があるときにパスデータへの標的の編集ができます。 viewBox 属性は SVG コンテンツが表示領域にどうマップされるかを制御します。min-x、min-y、width、height の4つの値を取ります。viewBox は SVG 要素の width と height 属性から独立しています。SVG 要素が200pxの幅でも viewBox の幅が100なら、viewBox の各単位は画面上の2pxにマップされます。内部座標と表示サイズのこの分離こそが SVG を真にスケーラブルにします。viewBox を変更すると、任意の形状データを変更することなくグラフィックをクロップ、パン、ズームできます。viewBox の min-x と min-y の値を調整するとビューがパンします。width と height の値を変更するとズームインまたはズームアウトします。塗りつぶしとストロークは SVG の形状が色を得る2つの主要な方法です。塗りつぶしは内部の色を制御します。ストロークは輪郭の色を制御します。両方とも色の値（16進数、rgb、名前付き色）、キーワード none（塗りなしまたはストロークなし）、またはグラデーションとパターン定義への参照を受け入れます。ストロークには追加のプロパティがあります：stroke-width（線の太さ）、stroke-linecap（butt、round、square の終端）、stroke-linejoin（miter、round、bevel の角）、stroke-dasharray（破線パターン）、stroke-dashoffset（破線パターンの開始位置）、stroke-opacity。塗りつぶしとストロークのプロパティを習得すれば、すべての要素の視覚的外観を細かく制御できます。 fill-rule プロパティは複雑な形状の内部がどう計算されるかを決定します。既定値の nonzero は、点が形状の内側か外側かを判断するためにテスト光線を横切るパスセグメントの方向を数えます。evenodd 値は方向に関わらず交差の数を数えます：奇数の交差は内側、偶数は外側です。この区別は、重なるまたは交差するパスを持つ形状にとって重要です。中央に穴のある形状が固定の塗りつぶしとしてレンダリングされる場合、fill-rule を nonzero から evenodd に変更する（またはその逆）ことで多くの場合修正できます。 SVG のグラデーションには線形と放射の2つのタイプがあります。<linearGradient> は直線に沿った色の移行を定義します。<radialGradient> は中心点から放射する色の移行を定義します。両方とも <defs> セクションで定義され、塗りつぶしまたはストローク属性から id で参照されます。各グラデーションはグラデーションに沿った特定の位置で色を定義する <stop> 要素を含みます。例えば：<stop offset="0%" stop-color="#ff0000"/> <stop offset="100%" stop-color="#0000ff"/> は赤から青へのグラデーションを作ります。グラデーションは同じ id を参照することで複数の要素にわたり再利用できます。gradientUnits 属性は、グラデーション座標が要素のバウンディングボックスに相対的か（objectBoundingBox、既定）SVG キャンバスに相対的か（userSpaceOnUse）を制御します。 SVG のパターン（<pattern> 要素）は形状を塗りつぶせる繰り返しタイルを定義します。パターンは <defs> でタイルサイズを決める width と height とともに定義され、1つのタイルを構成する任意の SVG 要素を含みます。パターンは形状、パス、画像、さらには他のパターンを含めます。背景、テクスチャ、繰り返しの装飾要素に有用です。patternUnits と patternContentUnits 属性はパターンが塗りつぶされる要素に相対的にどうスケールするかを制御します。変形を使えば、座標を変更することなく SVG 要素を移動、回転、拡大縮小、傾斜できます。transform 属性は translate(x, y)、rotate(angle, cx, cy)、scale(sx, sy)、skewX/skewY(angle) 関数を受け入れます。変形は合成可能です：transform="translate(50, 50) rotate(45)" は要素を移動してから回転します。変形は右から左に適用されるため（右端の変形が最初に起こる）、順序は重要です。グループ（<g> 要素）はすべての子に適用される変形を持て、形状のグループ全体を一緒に移動または回転できます。 <g> 要素は関連する形状をグループ化します。それ自体には視覚的な存在はありませんが、コンテナーとして機能します。<g> 要素の任意の属性（塗りつぶし、ストローク、変形、不透明度）は上書きされない限り子に継承されます。グループ化は複雑な SVG を組織するために不可欠です。人物図には頭、胴体、左腕、右腕、左足、右足のグループがあるかもしれません。各グループは独立して変形でき、アニメーションやレスポンシブな調整を可能にします。ネストされたグループはイラストの論理構造を反映する階層を作ります。 SVG テキストは位置決めのための x と y 属性を持つ <text> 要素を使います。HTML テキストとは異なり、SVG テキストは座標系で位置決めされ、グラフィックの一部になります。形状と同じように SVG テキストに塗りつぶし、ストローク、変形を適用できます。<tspan> 要素は <text> 要素内のインラインのバリエーション（テキストの一部の異なる位置、スタイル、サイズ）を作ります。SVG テキストは PNG や JPEG 画像でラスタライズされたテキストとは異なり、選択可能で検索可能なままです。ロゴやアイコンでは、フォント依存を排除するためにテキストをアウトライン（パス）に変換します。チャートや図のアクセシブルなテキストは、<text> 要素のままにします。<textPath> 要素は曲線パスに沿ってテキストを配置し、円形テキスト、円弧上のラベル、装飾的なタイポグラフィに有用です。クリッピングとマスキングは SVG 要素の視認性を制御します。<clipPath> は窓として機能する形状を定義します：ターゲット要素のクリップ形状の内側に落ちる部分だけが見えます。外側はすべてハードエッジで隠されます。<mask> は輝度値を使って視認性を制御します：マスクの白い領域は完全に見え、黒い領域は隠れ、灰色の領域は部分的に透明です。クリッピングはハードエッジを生みます。マスキングは滑らかで階調のあるエッジを生みます。両方とも <defs> で定義され、clip-path または mask 属性で適用されます。ブラウザがクリップされた領域のレンダリングを完全にスキップできるため、クリッピングはマスキングより高性能です。 SVG フィルター（<filter> 要素）はぼかし、ドロップシャドウ、色操作、合成のような視覚効果を適用します。一般的なフィルターには feGaussianBlur（ぼかし効果）、feDropShadow（要素の背後の影）、feColorMatrix（色変換）、feComposite（複数入力の結合）、feDisplacementMap（歪み効果）、feTurbulence（ノイズ生成）があります。フィルターは強力ですが、特に大きいサイズではレンダリングコストが高くなることがあります。控えめに使い、低電力デバイスでパフォーマンスをテストしましょう。ドロップシャドウのような一般的な効果には、SVG フィルターより SVG 要素に適用された CSS box-shadow や filter: drop-shadow() の方が良く性能が出るかもしれません。最適化は Web で使われる SVG ファイルにとって重要です。Illustrator、Figma、Sketch のようなデザインツールは、不要なメタデータ、エディター固有の属性、空のグループ、冗長な変形、座標での過剰な小数精度を持つ SVG をエクスポートします。最適化されていない SVG アイコンは5KBかもしれません。最適化後、同じアイコンは800バイトかもしれません。SVGO（SVG Optimizer）がこのための標準ツールです。メタデータ（タイトル、説明、エディターが追加したコメント）を削除し、非表示要素を削除し、不要なグループを折りたたみ、形状をより短いパスに変換し、座標をより少ない小数位に丸め、マークアップを圧縮します。SVGO はプラグインを通じて設定可能で、どの最適化を適用するかを正確に制御できます。パス座標から不要な精度を除去することは、最大のサイズ削減の一つです。デザインツールはしばしば6以上の小数位の座標をエクスポートします：d="M12.847263 45.293847 L67.384726 89.472638"。ほとんどの Web 使用では、1か2の小数位で十分です：d="M12.85 45.29 L67.38 89.47"。視覚的な違いは典型的な表示サイズでは見えませんが、ファイルサイズの削減は数百のパスポイントにわたり有意です。SVGO の cleanupNumericValues プラグインがこれを自動的に処理します。非常に小さいアイコン（16〜24px）では、0の小数位でさえ許容されるかもしれません。基本形状のパスへの変換（またはその逆）はファイルサイズと可読性の両方に影響します。<rect x="10" y="10" width="80" height="80"/> は同等のパスより短く、より読みやすいです。パスが認識可能な形状を記述するとき、SVGO は単純なパスを基本形状要素に変換できます。逆方向に、一部のワークフローは一貫性のためにすべての形状をパスに変換することを好みます、特にパスデータでより良く機能するアニメーションライブラリのために SVG を準備するときです。それぞれのアプローチがいつより良いかを理解すれば、情報に基づいた最適化の決定ができます。インライン SVG と外部 SVG ファイルにはトレードオフがあります。インライン SVG（SVG マークアップを直接 HTML に貼り付け）は HTTP リクエストをなくし、SVG 内部の CSS スタイリングを許可し、SVG 要素との JavaScript インタラクションを可能にし、別々の読み込みなしで即座にレンダリングします。外部 SVG ファイル（<img> src または CSS background-image 経由）はブラウザキャッシュの恩恵を受け、HTML を小さく保ち、管理がより単純です。すべてのページで使うアイコンには、<symbol> 要素を持つシンボルスプライトを使ったインライン SVG が多くの場合最良のアプローチです：非表示の <svg> ブロックですべてのアイコンを一度定義し、<use href="#icon-name"/> でページ全体に参照します。これはキャッシュの恩恵（1つのスプライトファイル）とスタイリングの恩恵（CSS が <use> 要素をターゲットにできる）を組み合わせます。 CSS は標準のセレクターを使ってインライン SVG 要素をスタイルできます。タグ名、クラス、または id で SVG 要素をターゲットにし、塗りつぶし、ストローク、stroke-width、不透明度、変形のようなプロパティを設定できます。これにより、ホバー効果、テーマ切り替え（ライトモードとダークモード間でアイコンの色を変更）、レスポンシブな調整が可能になります。CSS トランジションとアニメーションは SVG プロパティで機能し、JavaScript なしで色の変更、変形、不透明度をアニメーションできます。currentColor キーワードは特に有用です：SVG 要素に fill="currentColor" を設定すると、親から CSS の color プロパティを継承し、アイコンの色を自動にします。これはテキストの色に合わせる必要があるアイコンシステムの標準的なアプローチです。 SVG のアクセシビリティには明示的な努力が必要です。<svg> 要素の最初の子として <title> 要素を追加し、人間が読める名前を提供します。SVG が複雑な情報（チャートなど）を伝える場合は、より長い説明のために <desc> 要素を追加します。<svg> 要素に role="img" を設定し、title（と任意で desc）要素の id を参照する aria-labelledby を設定します。情報を伝えない装飾的な SVG（背景、装飾）には、aria-hidden="true" と role="presentation" を設定してアクセシビリティツリーから除外します。インタラクティブな SVG には、適切な ARIA ロールとキーボードイベントハンドラーを追加します。レスポンシブな SVG の挙動は width と height がどう設定されるかに依存します。明示的な width と height 属性を持つ SVG はその固定サイズでレンダリングします。width と height を削除し viewBox だけを設定すると、SVG はアスペクト比を維持しながらコンテナーを満たすよう拡大縮小します。preserveAspectRatio 属性でアスペクト比の挙動を制御します。値 xMidYMid meet（既定）は SVG をコンテナー内に収まるように拡大縮小し、中央に配置します。値 none はアスペクト比を無視して SVG をコンテナーを満たすように引き伸ばします。レスポンシブなアイコンには、width と height を削除し、viewBox を保ち、コンテナーまたは SVG 要素自体の CSS でサイズを制御します。 SVG アニメーションは CSS アニメーション、Web Animations API、または GSAP や anime.js のような JavaScript ライブラリで実現できます。一般的な SVG アニメーションにはパス描画効果（stroke-dashoffset をアニメーションしてパスを徐々に表示）、モーフィング（あるパス形状を別のものに移行）、要素レベルの変形（回転する歯車、跳ねるアイコン、スライドする要素）があります。単純なアニメーションには CSS で十分です。複数の要素を含む複雑なシーケンスアニメーションには、GSAP がイージング、持続時間、同期の細かい制御を持つタイムラインベースのアプローチを提供します。パスモーフィングはソースとターゲットのパスが同じ数とタイプのコマンドを持つことを必要とし、異なる構造を持つパス間を補間できる flubber.js のようなツールで処理できます。 SVG スプライトシステムは本番ウェブサイトでのアイコン管理の標準的なアプローチです。スプライトファイルは複数のアイコンを含み、それぞれが固有の id を持つ <symbol> 要素で包まれます。スプライトファイルは HTML にインライン化されるか、外部ファイルとして読み込まれます。個々のアイコンは <svg><use href="#icon-name"/></svg> を使ってレンダリングされます。このアプローチは、（外部なら）すべてのアイコンに対する単一の HTTP リクエスト、（インラインなら）追加のゼロリクエスト、currentColor とカスタムプロパティを通じた CSS スタイリング可能性、集中化されたスプライトファイルを通じた容易なアイコン管理を提供します。svg-sprite や svgo-loader のようなビルドツールが個々の SVG アイコンファイルからのスプライト生成を自動化します。 SVG とアイコンフォントの比較は SVG に有利に決着しました。アイコンフォント（Font Awesome、フォントとしての Material Icons）はカスタムフォントでテキスト文字としてアイコンをレンダリングします。font-size と color プロパティを通じた容易な色の変更とサイズ変更を提供したため人気がありました。ただし、アイコンフォントには重大な欠点があります：いくつかのアイコンしか使わなくてもフォントファイル全体の読み込みが必要、テキストとしてレンダリングされる（スクリーンリーダーが意味不明として読み上げる可能性）、フォントレンダリングの特質（アンチエイリアス、サブピクセルレンダリング）の影響を受ける、複数色にできない。SVG アイコンはこれらすべての問題を解決します。個別に含められ（未使用アイコンの読み込みなし）、適切なアクセシビリティ属性を持たせられ、グラフィックとして（テキストではなく）レンダリングし、複数の色、グラデーション、アニメーションをサポートします。 SVG のパフォーマンスの考慮事項にはレンダリングコスト、ファイルサイズ、DOM の複雑さがあります。レンダリングコストはパスポイントの数、フィルターの複雑さ、要素の数とともに増加します。10,000のパスポイントを持つ SVG イラストは1,000のポイントのものより遅くレンダリングします。パスの単純化（視覚品質を維持しながらポイント数を減らす）は最適化でありファイルサイズの削減でもあります。DOM の複雑さはインライン SVG にとって重要です：各 SVG 要素は DOM ノードです。500要素のインライン SVG は500ノードを DOM に追加し、レイアウトのパフォーマンスとメモリ使用量に影響できます。複雑なイラストには、SVG をメイン DOM の外に保つために <img> タグの使用を検討しましょう。 SVG のセキュリティには、SVG コンテンツがユーザー入力から来るときのインジェクション攻撃の防止が含まれます。SVG は JavaScript（<script> 要素や onclick のようなイベントハンドラー属性経由）、外部リソース参照（xlink:href や href 属性経由）、CSS（<style> 要素経由）を含められます。サニタイズせずにユーザー送信の SVG を表示することはクロスサイトスクリプティング（XSS）の脆弱性です。<script> 要素、イベントハンドラー属性、外部参照、潜在的に危険な CSS を削除して SVG をサニタイズしましょう。DOMPurify のようなライブラリが SVG コンテンツをサニタイズできます。SVG コンテンツが <img> タグで表示される場合、ブラウザはサンドボックス化してスクリプト実行を防ぐため、信頼できない SVG には <img> がより安全な選択になります。データ URI の SVG は、外部ファイルなしで SVG を直接 CSS に埋め込むことを可能にします。SVG マークアップをデータ URI としてエンコードします：background-image: url('data:image/svg+xml,...')。これは HTTP リクエストをなくし、背景パターン、チェックマーク、矢印のような小さく頻繁に使われるグラフィックに有用です。特殊文字を URL エンコード（# は %23、< は %3C）するか、SVG 全体を base64 エンコードします。ほとんどの SVG では URL エンコードの方が base64 より小さな出力を生みます。HTML のインライン CSS では、URI に単一引用符を使い SVG 内に二重引用符を使えば、エンコードされていない SVG をデータ URI で使うこともできます。ブラウザの SVG エディターツールを使えば、SVG マークアップを直接編集し視覚的な結果をリアルタイムで見られます。これは標的の調整を行うのに特に有用です：色の変更、パスポイントの微調整、viewBox 寸法の調整、不要な要素の削除、変更がレンダリングされた出力にどう影響するかのテスト。新しい形状の描画やベジェ曲線の視覚的な操作のような複雑な編集作業には、Figma や Inkscape のような専用のベクターエディターがより適しています。ブラウザベースのエディターは、コードレベルの微調整、最適化、SVG マークアップが視覚出力にどうマップされるかの理解に優れます。

よくある質問

SVG データは安全ですか？

はい。すべての処理はブラウザ内で行われ、サーバーへアップロードされることはありません。

複雑な SVG も編集できますか？

はい。有効な SVG コードなら編集できます。標準的な SVG の要素と属性をすべてサポートします。