WindowsでSVGファイルを開いて編集する方法

スケーラブルベクターグラフィックス（SVG）は、2Dグラフィックス、ベクターイラスト、チャートなどを表示するために使用されるウェブフレンドリーなファイルフォーマットです。画像としてレンダリングされますが、その背後には曲線と線を定義するXMLコードが実際にあります。Windowsでは、ブラウザでSVGファイルを簡単に表示できますが、通常の画像編集ソフトウェアで編集することはできません。このガイドでは、WindowsでSVGファイルを開いて編集する方法を紹介します。

ブラウザを使ってSVGファイルを開く

SVGファイルは、ダブルクリックするか、希望のブラウザにドラッグすることで開くことができます。

これは、任意のSVGファイルを開く最も簡単な方法です。ただし、この方法では画像を編集することはできません。

ファイルエクスプローラーでSVGファイルを表示する

Microsoft PowerToysでSVGプレビュー機能を有効にすることでSVGファイルを開くことができます。これを行うには、公式PowerToysページ、Microsoft Store、またはWindowsパッケージマネージャー（winget）からPowerToysをダウンロードしてインストールする必要があります。

例えば、PowerShellでWingetパッケージマネージャーを使用してPowerToysをインストールします：

winget install --id Microsoft.PowerToys --source winget

インストール後、スタートメニューからPowerToysを開くことができます。PowerToysの設定で、「ファイルエクスプローラーのアドオン」に移動し、プレビューウィンドウの下で「スケーラブルベクターグラフィックス」プレビューを有効にします：

また、プレビューウィンドウだけでなく、アイコンビューでもSVGのサムネイルを表示できるようにSVGサムネイルを有効にすることもできます：

これでファイルエクスプローラーを開き、Alt + Pを押してプレビューウィンドウを有効にし、任意のSVGファイルを選択すると右側にプレビューが表示されます。

この方法で、追加のソフトウェアがなくてもファイルエクスプローラーでサムネイルや詳細なプレビューを表示できます。

テキストエディターを使ってSVGファイルを編集する

SVGは主にXMLファイルであるため、テキストエディターを使用して簡単に編集できます。さらに、CSSを使用してSVGをさまざまにスタイル付けしたり、アニメーションを追加したりすることができます。これは、JPGやPNGのような通常の画像フォーマットではできないことです。

SVGファイルを右クリックし、プログラムから開くにカーソルを合わせ、メモ帳などのエディターを選択します：

テキストエディターでSVGファイルを開くと、画像そのものではなく、XMLベースのコードが表示されます。

たとえば、指定されたSVGファイルの塗りつぶし色を黒に変更したい場合、fill属性を次のように編集します：

コードをテキストファイルに保存し、再びそのファイルを開くと、このような更新された出力が表示されます：

テキストエディターを使用してSVGファイルを作成または編集できますが、それは非常に単純な画像にしか適していません。画像が複雑である場合、各部分を手動で変更することは非常に困難になります。

ベクターエディターを使ってSVGファイルを編集する

Adobe IllustratorやInkscapeのようなデスクトップベースの最新のベクター編集ツールや、FigmaやCanvaのようなオンラインプラットフォームを使用して、SVGファイルを開いて編集できます。

例えば、CanvaのSVGエディターを使用して、オンラインツールを使用してSVG画像をどれほど簡単に編集できるかを示します。まず、公式ウェブサイトからCanvaのSVGエディターにアクセスし、SVGを編集ボタンをクリックします：

ファイルをアップロードボタンをクリックし、編集したいSVGファイルを選択します：

必要なSVGファイルがアップロードされたら、希望のように編集できます。ここでは、選択したSVGファイルの背景色と前景色を変更しました。

基本的な編集が必要な場合は、CanvaのSVGエディターを選択できます。ただし、複雑なベクターグループやパスを編集する場合は、Adobe IllustratorやInkscapeのような高度なツールを使用することをお勧めします。

ファイルをSVG形式に変換する

デスクトップベースのツールやオンライン画像編集ツールを使用して、SVGファイルを他の形式に変換することができます。

特にPNGやJPGからSVGに変換する場合、オンラインツールは複雑なビジュアルに苦しむことがあります。ラスタ画像がベクターグラフィックスにトレースされるため、形状が簡略化されたり、色が欠落することに気付くかもしれません。

次のPNGファイルをSVGに変換したいとします：

PNG画像をSVGに変換するために、Convertioのようなオンラインエディターを使用します。このため、変換するファイルをアップロードし、希望の出力形式を選択します。最後に、変換ボタンをクリックして、ファイルを選択した形式に変換します：

ファイルが変換されたら、対応するボタンをクリックしてダウンロードできます：

変換されたファイルを開いて最終結果を確認します：

出力は画像品質の大幅な低下を示しています。

一方、SVGからPNGやJPGのようなフォーマットに変換する場合は、通常はより正確でおおよそすべてのツールでうまく機能します。次のSVG画像をJPGに変換したいとします：

選択したSVGファイルをJPGに変換するためにConvertioを使用します：

画像をダウンロードし、結果を分析するために開きます。出力は、SVGをJPGに変換しても画像の品質に影響を与えないことを示しています：

モバイルでラスタ画像を扱う必要がある場合は、Android用のPhotoshopを使用して写真を編集することもできます。