SVGファイルの編集方法：図形を操作するか、コードを変更するか

SVGを編集するには、コピーをビジュアルエディターで開いて図形、色、曲線を変更するか、テキストエディターで開いてマークアップを少し変更します。SVGとして保存し、保存したファイルを開き直して結果を確認してください。適した方法は、必要な変更とファイル内のオブジェクトによって異なります。

構造を大きく変えるコマンドを使う前に、選択したものを特定します。グループ、複数の部分を含む1本のパス、埋め込みPNGは、どれもキャンバス上では1つのオブジェクトに見えますが、対処は異なります。

コピーを作り、SVGのオブジェクトを見分ける

SVGファイル、作業用コピー、エディター、SVG対応ビューアーを用意します。書き出したコピーの確認が済むまで原本を残してください。

SVGはScalable Vector Graphicsの略です。XMLのマークアップでベクター図形やパスを記述できますが、画像を埋め込むこともできます。パスは線や図形を表し、ノードはベクターエディターで編集できるパス上の点です。拡張子がSVGというだけでは、見えている絵に編集できる点があるとは限りません。

コピーを開き、レイヤーまたはオブジェクトのパネルで選択対象を確認します。必要ならテキストエディターでマークアップも調べます。構造を変える前に種類を照合してください。

<image>要素はPNGやJPEGを参照できます。外側のファイル名が.svgで終わっても、そのピクセルはパスになりません。拡大すると角ばる輪郭は手がかりですが、オブジェクトパネルと参照先を調べると、より具体的に判断できます。有効なベクターSVGを1つの画像オブジェクトとして挿入するエディターもあるため、まとめて選択されることだけではほとんど判断できません。

複合パスは「O」の中央などの穴を保てます。分解すると穴が変わる場合があります。グループ解除が使えない、または効かない場合は、SVGのオブジェクト種類の診断を参照してください。

ビジュアルエディターとコード編集を選ぶ

Inkscapeは無料のオープンソースソフトウェアです。macOS、Windows、Linuxで動作し、SVGを主な形式にしています。普段からIllustratorを使っているなら、それも選択肢です。FigmaはSVGでデザインツール間の素材を移せますが、取り込みの案内ではSVGのmarker要素とpattern要素を対象外としています。複雑なファイルは、エディターを決める前に取り込み結果を確認してください。

Canvaの公開されたSVG編集手順では、基本的な色やレイアウトの変更を扱っています。小さな作業にはブラウザーのエディターも使えます。ファイルの塗り、線、文字、効果への対応と現在の書き出し条件を確認してください。対応する単色の塗りを正確な色ごとに分け、位置のそろったファイルを作る用途にはSVG Color Separatorを使えます。パスの形を変えるにはベクターエディターを使います。

図形を編集し、書き出した結果を確認する

コマンド名はエディターによって異なりますが、作業の順序は次のとおりです。

1. 作業用コピーを開く。 取り込んだデザインを原本と比較します。文字、パターン、効果がすでに変わっていたら作業を止めます。
2. 変更するオブジェクトを選ぶ。 パネルでグループと確認できた場合だけ、中に入るか解除します。パスならノードまたはダイレクト選択ツールに切り替えます。
3. 1つ変更する。 塗りを変える、部分を動かす、数個のノードを調整するなどです。意図的に引き伸ばす場合を除き、サイズ変更では縦横比を固定します。
4. 変更箇所を確認する。 曲線や小さな隙間を拡大して確認し、その後、予定のサイズで全体を見ます。
5. 新しいSVGとして保存または書き出す。 ビューアーと実際の使用先アプリで開き直します。変更部分、全体の寸法、必要なオブジェクトが選択できることを確かめます。

色を変えるときは、図形の内側の塗りと輪郭に沿った線を区別します。見た目が1色でも複数のオブジェクトにまたがる場合があります。同じ塗りを選ぶ機能は便利ですが、変更前に選択対象を確認してください。別の部分も同じ色かもしれません。継承されたスタイルや変わらない色は、SVGの色編集ガイドで扱っています。

エディターが独自形式や追加メタデータを使う場合は、編集用の原本を残します。AdobeのSVG保存オプションには、フォント、CSSプロパティ、ラスター画像、Illustrator編集データの設定があります。見た目が正しくても、書き出し後のマークアップが異なったり内容がラスター化されたりする場合があります。画像だけでなく、必要なオブジェクトやフックも比較してください。

小さな変更をSVGコードで管理する

SVGのコピーをVS Codeなどのプレーンテキストエディターで開きます。名前空間、要素名、引用符を壊さないでください。1つ変更したら描画し、その後で次を変更します。

パスを変えずに塗りを変える

次の例をtriangle.svgとして保存し、SVG対応ビューアーで開きます。

<svg xmlns="http://www.w3.org/2000/svg"
     width="48" height="48" viewBox="0 0 48 48">
  <path id="triangle" class="icon-shape" fill="#3b82f6"
        d="M24 8 L40 40 H8 Z" />
</svg>

1. パスのfill属性にある#3b82f6を#f97316に置き換えます。
2. 保存し、ファイルを開き直すか表示を更新します。
3. 三角形がオレンジになり、輪郭が変わっていないことを確認します。dのパスデータ、id、classは元のままである必要があります。

色が変わらない場合は、表示を制御している可能性があるstyle属性、クラスのルール、継承された塗り、線を確認します。ファイル中の同じ色をすべて置き換えるのではなく、該当する描画ルールを変更します。

検証方法：この例を塗りの変更前後でSVGレンダラーにより描画し、生成されたピクセルを確認しました。三角形の色が変わり、パスデータ、ID、クラスは保たれました。この小さな例では、複雑なSVGをデザインアプリで取り込み、書き出す動作は検証していません。

viewBoxで余白を減らす

ルートのviewBoxには最小x、最小y、幅、高さの4つの数値があります。SVGの座標空間内で、表示ビューポートに対応する長方形を定めます。

この例の三角形はx=8から40、y=8から40を占めます。パスデータを変えず、viewBox="0 0 48 48"をviewBox="8 8 32 32"に変更します。保存して再描画すると、余白が減るため、同じ48×48のビューポートで三角形がより大きく表示されます。

これはキャンバスの対応付けを変える操作で、パス形状やルートのwidth、heightは変えません。実際の絵では線や効果のための余裕を確保してください。形状ぴったりの枠では切れる場合があります。ビジュアル操作でページやアートボードを絵に合わせ、書き出したコピーを確認するほうが安全なことも多いです。取り込み時の物理サイズが違う場合は、SVGの寸法とviewBoxのガイドを参照してください。

絵が消える、切れる、引き伸ばされる場合は、元のviewBoxに戻し、4つの値と縦横比を確認します。キャンバスの問題を直すために全ノードを動かさないでください。

トレースしたSVGを整理する場合

ラスター画像はピクセルを格子状に保存します。ベクター化はそのピクセルから形状を再構築するので、トレースしたファイルの色や輪郭の構成は元のデザインと異なる場合があります。

見た目が1つの部分でも、小さなパスに分散していることがあります。1色が複数の離れた領域に広がる場合もあります。密集したノード、小さな斑点、背景図形、重なる輪郭は簡単な編集を遅くします。ある倍率での鮮明さだけで判断せず、それぞれを調べてください。

細かく分かれた構造

シンプルな構造

この図は編集の手間を説明するものです。変換サンプルや計測した製品比較ではありません。残す価値のあるトレースなら、問題の箇所を修復し、輪郭が正確に保たれる部分だけ簡略化します。ラスター画像から作られ、整理に手間がかかりすぎるなら、元画像をもう一度ベクター化してみます。利用できるネイティブのベクター形状は残し、そのスクリーンショットをトレースしないでください。

PerfectVectorを使う場合

PerfectVectorは元のPNGやJPEG、SVG内のラスター画像などからパスを作る場合に適しています。既存のベクター画像を保って編集するには、上記の一般的なエディターの方法を使います。

自分の画像を変換する場合は、次の順序で進めます。

1. 元のラスター画像をアップロードしてベクタープレビューを比較する。 欠けた細部、不要な領域、元画像と異なる輪郭を探します。
2. 編集や書き出しの前に結果をアンロックする。 変換とプレビューは無料で回数制限がありません。現在の公開料金ポリシーでは、固有の結果1件につき1クレジットでアンロックでき、アンロック済み結果の再ダウンロードは無料です。
3. アンロックした形状を確認して編集する。 必要な図形とノードを調べ、必要に応じて配色を調整し、予定のサイズで編集結果を比較します。
4. 書き出し、次のアプリで確認する。 SVGを開き直し、必要な部分を選択し、寸法と細部を確認します。プレビューだけでは、すべてのエディター、プリンター、カッターで使えると証明できません。

ラスターの文字は形状として再構築されるため、入力し直せるテキストになるとは考えないでください。重要な文字、曲線、小さな隙間がトレースで保たれない場合は、手作業の修正や描き直しも選択肢に残します。

よくある質問

SVGを無料で編集するには？ ビジュアル編集にはInkscape、マークアップの変更にはプレーンテキストエディターを使えます。ブラウザーツールにも無料機能がある場合があります。現在の書き出し条件と、ファイルが使うSVG機能への対応を確認してください。

VS CodeでSVGを編集できますか？ はい。XMLのマークアップで、小さな塗りの変更、寸法、viewBox、必要なIDやクラスを編集できます。コピーを保存し、変更後に描画します。曲線の形を変えるにはビジュアルエディターを使います。

SVGの図形を個別に選択できないのはなぜですか？ オブジェクトの種類を確認します。グループ、複数のサブパスを持つパス、クリップされた絵、埋め込み画像かもしれません。本当のグループなら中に入るか解除し、形状はパスのノードを編集します。ラスター内容はパスが必要な場合だけベクター化します。

CanvaでSVGを編集できますか？ Canvaの公開手順は基本的な色とレイアウトの変更を扱っています。取り込み結果と現在のSVGダウンロード条件を確認します。輪郭の精密な変更やID、クラスの管理には、ベクターエディターまたはマークアップを使います。

PerfectVectorの結果はアンロック前に編集できますか？ 自分の変換では、まずプレビューを比較し、結果をアンロックしてから編集と書き出しの機能を使います。書き出したSVGは使用先アプリでも確認してください。

参考資料

1. W3C — Scalable Vector Graphics (SVG) 2 — SVG文書、図形、パス、スタイルのモデル。
2. W3C — SVGの埋め込みコンテンツ — SVG文書内に残るラスター画像。
3. W3C — SVGの座標系、変換、単位 — viewBoxの対応付け、形状とビューポート寸法の違い。
4. Inkscape — 概要 — 対応環境、SVG形式、オープンソースについての公式情報。
5. Adobe — Illustratorでのアートワークの保存 — SVG書き出し設定と保持されるIllustrator編集データ。
6. Figma — デザインツール間での素材のコピー — SVGの移行手順とmarker/patternの取り込み制限。
7. Canva — SVGエディター — 基本的な色、サイズ、レイアウト変更の公開手順。
8. PerfectVector — 料金ポリシー — 現在のプレビュー、アンロック、再ダウンロード条件。

使えるSVGがあれば既存の形状を編集します。元画像がラスター、またはトレースをやり直す必要があるなら、元画像をPerfectVectorで試し、元画像とプレビューを比較し、編集前にアンロックしてから、次のアプリで書き出した図形と寸法を確認してください。