SVGファイルを開く方法：閲覧・編集・画像変換の使い分け

SVGファイルの見た目だけを確認するなら、Chrome、Firefox、Safariなどのブラウザで開く方法が手軽です。形や色を変えるならPixsoやInkscapeなどのベクター編集ツール、決まったサイズの画像にするならGIMPなどを選びます。「開けた」と「編集できる」は別なので、次に行いたい作業から選びましょう。

アイコンをアプリの画面へ組み込む場合は、単体で開くだけでなく、PixsoのUIデザイン機能で周囲の文字やボタンと並べて確認できます。ここでは、受け取ったロゴのSVGを確認し、必要に応じて修正・書き出しする流れを例にします。

SVGはXMLで記述する画像形式で、図形やパスは解像度に依存せず拡大できます。ただし、SVG内に写真などのラスター画像を含む場合、その部分まで無制限に鮮明になるわけではありません。複雑なパスや埋め込み画像が多ければ、ファイルサイズも大きくなります。

1. グラフィックエディタで開いて編集する

アンカーポイントの調整、カラーの変更、曲線の修正が必要な場合は、ベクター編集に対応したツールでSVGファイルを開きます。元ファイルを残し、作業用のコピーを使うと、変更前の見た目に戻って比較できます。

1.1 Pixso：UIの中に置いて形と大きさを確認する

PixsoはSVGのインポート・エクスポートに対応しています。受け取ったロゴを画面に配置し、ヘッダー、背景色、隣の文字との組み合わせを検討する用途に使えます。単体ではきれいでも、実際のヘッダーの高さに縮めると細い線が見えにくくなることがあるためです。

取り込んだら、まずロゴ全体と中の図形がどのレイヤーになったかを確認します。画像一枚としてしか選べない部分を、編集可能なパスだと思って扱わないようにします。テキスト、マスク、フィルターなどの再現状態も、元の見本と見比べます。

たとえば明るいヘッダーと暗いヘッダーを別のフレームに用意し、同じロゴを置きます。白い背景に溶けていた白文字や、暗い背景で消える細線がないかを見ます。修正する箇所が決まったら、その位置へコメントを残してチームと相談できます。

1.2 Inkscape：SVGをベクターデータとして扱う

Inkscapeはオープンソースのベクターエディタで、SVGを標準のファイル形式として使います。ファイルを開き、図形やパスを選択して、色や形を調整する用途に向いています。形式についてはInkscape公式のSVG解説（英語）でも説明されています。

ロゴの色だけを変えたい場合も、全体の塗りを一括で変える前に、どの図形が同じ色かを確かめます。輪郭線と塗りを混同すると、細い線が消えたり、意図しない場所まで変わったりします。保存後は別名のSVGをブラウザで開き、編集画面だけでなく最終的な表示も比較します。

1.3 GIMP：必要なサイズの画像として扱う

GIMPは主にラスター画像を扱うエディタです。SVGを画像として開き、指定した大きさで編集する用途に利用できます。SVGのまま形を何度も調整したい場合と、SNS用のPNGを一つ作りたい場合では、向いている作業が異なります。

GIMPにはSVGからパスを読み込む方法もありますが、画像として開くこととは別です。GIMP公式のSVGとパスの説明にあるように、画像の読み込みとパスの読み込みを区別します。SVGを開いたからといって、元のオブジェクトがすべて同じ編集機能を保つとは考えないようにしましょう。

幅400pxのPNGが必要なら、その出力サイズを先に決めます。小さな画像に変換してから拡大すると、SVGだったときの鮮明さは戻りません。透過が必要な場合は背景も確認してからPNGとして書き出します。

2. ブラウザでSVGの見た目を確認する

信頼できる提供元から受け取ったSVGなら、ブラウザの空のタブへドラッグするか、ファイルを開く操作で表示できます。拡張子だけで安全だと判断せず、出所が不明なファイルは提供元を確認してください。SVGにはスクリプトや外部参照を含められるため、単なる写真ファイルと同じ扱いにはしません。

2.1 Google Chromeで開く

1. 作業用のSVGと、提供元から渡された見本画像を用意します。
2. Chromeの空のタブへSVGファイルをドラッグして表示します。
3. ロゴの形、文字の折り返し、周囲の余白、透明部分を見本と比べます。
4. 必要な修正があれば元ファイルのコピーを編集ツールで開きます。ブラウザの表示を見ただけではファイルは変更されません。

白いロゴを透明背景で保存した素材は、白いページで見えにくいことがあります。「真っ白だから壊れている」と決めず、デザインツール上で別の背景に重ねてみます。

2.2 FirefoxやSafariで比較する

FirefoxやSafariなどでもSVGを表示できます。納品先がWebサイトなら、実際に使うブラウザで見え方を確かめると役立ちます。フィルター、フォント、外部画像などを使っている場合は、すべての環境で同じ結果になると決めつけず、目的の表示条件で比較します。

ファイルを単独のタブで開いた場合と、Webページの画像として埋め込んだ場合でも条件が異なります。MDNのSVGを画像として使う解説（英語）では、画像として使う場合のスクリプトや外部リソースの制約が説明されています。単独表示だけでなく、実際の掲載箇所でも確認します。

3. OSのプレビューを使うときの注意

SVGのサムネイルやプレビューが表示されるかは、OS、バージョン、導入しているアプリや拡張機能によって変わります。表示されないことだけで、ファイルが破損しているとは判断できません。

• Windows：標準の「フォト」やエクスプローラーが、どの環境でもSVGを表示できるとは限りません。MicrosoftのPowerToysのファイルエクスプローラーアドオンには、SVGのプレビューとサムネイルを追加する機能があります。追加しない場合はブラウザで内容を確認できます。
• macOS：クイックルックなどで確認できる場合もありますが、プレビューだけで編集時の互換性まで分かるわけではありません。表示されない場合は、ブラウザやSVG対応エディタで同じファイルを確認します。

ファイルの既定アプリがコードエディタなら、ダブルクリックした際に文字列が開くこともあります。それは画像が消えたのではなく、SVGの内容がテキストとして表示されている状態です。「アプリケーションで開く」から、見た目を確認するアプリを選びます。

4. コードエディタで表示の原因を調べる

SVGはテキストファイルなので、Sublime TextやVisual Studio Codeなどで中身を読めます。パスを手作業で描き直すためではなく、画像が欠ける原因や外部ファイルへの参照を調べたいときにも役立ちます。原本を残し、変更する場合は一か所ずつ結果を比べます。

4.1 Sublime Textでファイルの構造を見る

Sublime TextではSVGのXMLをテキストとして開けます。図形の座標や塗り、画像への参照などを探せますが、意味が分からない要素を「不要そうだから」と削除しないようにします。マスクやクリッピングに必要な定義を消すと、見た目が変わることがあります。

4.2 Visual Studio Codeで参照先と表示範囲を見る

Visual Studio Codeでもテキストとして開けます。画像のプレビューを追加する拡張機能もありますが、ファイルを読むだけなら必須ではありません。導入する場合は提供者と権限を確認し、よく分からない拡張機能を表示のためだけに追加しないようにします。

一部が消える、文字が変わる場合の切り分け

図形の端が切れる場合：描かれている範囲と表示範囲が合っているかを確認します。SVGのviewBoxは表示に使う座標範囲を指定するもので、単に幅と高さの数値を大きくすれば解決するとは限りません。意味はMDNのviewBoxリファレンス（英語）で確認できます。

写真や模様だけが消える場合：別ファイルの画像を参照していないかを調べます。SVGだけを受け取り、参照先の画像が手元にないと、元の環境と同じ見た目にはなりません。提供元に必要なファイルを確認し、受け取っていない素材を推測で差し替えないようにします。

文字の形や幅が変わる場合：文字がパスになっているか、フォントに依存するテキストかを区別します。テキストなら必要な書体が利用できるかを確認します。ロゴの見た目を固定するために文字をパス化する場合も、編集可能な原本を別に保管してから行います。

最後に、修正したSVGを保存し、ブラウザと実際の掲載画面の両方で開きます。見るだけならブラウザ、形を変えるならベクター編集、指定サイズへ変換するなら画像書き出しと役割を分ければ、目的に合わないツールを何度も試さずに進められます。

PixsoでSVGを画面に配置する