SVG入門 #2 SVGファイルの開き方 — ブラウザとテキストエディタで中身を見てみよう

SVGファイルをダウンロードしたものの、ダブルクリックしても思ったアプリで開かない、そもそも何で開けばいいのか分からない、と困ったことはありませんか。

SVG入門シリーズの2回目です。

この記事では、SVGファイルの開き方を、ブラウザ・WindowsやMacの機能・デザインツールの順に紹介し、テキストエディタで開いて中身が「文字」でできていることも確かめます。

開けない・表示されないときの確認点もまとめているので、手元のSVGファイルか、下のサンプルファイルで試しながら読み進めてみてください(SVGそのものについてはSVGファイルとはで解説しています)。

サンプルファイル

この記事で使うSVGファイルです。リンクをクリックすると保存できます(保存されずに絵が表示された場合は、リンクを右クリックして「名前を付けてリンク先を保存」などを選んでください)。

egg.svg:目玉焼きのアイコン。ブラウザやテキストエディタで開く練習用
white-house.svg:白い家のアイコン。「開いたのに真っ白」を体験する用
egg-no-xmlns.svg:egg.svgから必要な記述を1つ消したもの。「文字だけが並ぶ」を体験する用

SVGファイルを開く前に知っておきたい基本

まずは、SVGファイルがどんなファイルなのかと、開き方にどんな種類があるのかを押さえましょう。

仕組みが分かると、どのアプリで開けばよいかを自分で判断できるようになります。

SVGファイルは「文字で書かれた画像」

SVGファイルとは、拡張子(ファイル名の最後につく「.svg」のような種類を表す文字)が「.svg」の画像ファイルです。

SVGは「Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス)」の略で、ベクター(点や線の位置を数値で記録する形式)の画像を表します。

PNGやJPGのように色の点を並べて記録するのではなく、「ここに、この大きさの円を、この色で描く」という設計図を文字で書いておく形式です。

PNGやJPG(ラスター画像)との違いをイメージでつかむと、次のようになります。

形式	記録のしかた(イメージ)	拡大すると
PNG・JPG(ラスター画像)	方眼紙のマス目を、1マスずつ色で塗って絵を作る	マス目そのものが大きくなるので、輪郭がギザギザ・ぼやけて見える
SVG(ベクター画像)	数学のグラフのように、「(10, 10)から(50, 50)まで線を引く」「中心(50, 50)・半径20の円を描く」と命令で書いておく	表示する大きさに合わせてその都度計算し直して描くので、輪郭がなめらかなまま

MDNでも、SVGはXML(タグで情報を書き表す決まりの一種)をもとにした言語で、画像はテキストファイルに定義されるため、テキストエディターでもドローソフトでも作成・編集できると説明されています(MDN「SVG: スケーラブルベクターグラフィック」)。

つまりSVGファイルは、「画像として見る」こともできれば、「文字として読む」こともできるファイルなのです。

開き方は「見る」「中身を読む」「編集する」の3つ

SVGファイルの開き方は、何をしたいかによって使うアプリが変わります。

目的ごとに整理すると、次のようになります。

したいこと	使うもの	向いている場面
絵として見る	ブラウザ(Chrome・Edge・Safari・Firefoxなど)	どんな絵か確かめたい、拡大してみたい
中身(文字)を読む	テキストエディタ(メモ帳、VS Codeなど)	どんなことが書いてあるか知りたい
絵を編集する	デザインツール(Figma・Illustrator・Inkscapeなど)	形や色を描き直したい

「SVGビューア」と呼ばれる専用のソフトを探す人もいますが、絵を見るだけなら、ふだん使っているブラウザがいちばん手軽なSVGビューアになります。

MDNの画像形式のまとめでも、SVGはChrome・Edge・Firefox・Opera・Safariのすべてのバージョンで表示できる形式として紹介されています(MDN「画像ファイルの種類と形式ガイド」)。

SVGファイルの開き方の手順

ここからは、SVGファイルを実際に開く手順を、ブラウザ・Windows・Mac・デザインツール・テキストエディタの順に紹介します。

迷ったら、最初に紹介するブラウザで開く方法を試すのが確実です。

ブラウザで開く(いちばん確実な方法)

SVGファイルを開くいちばん確実な方法は、ブラウザで開くことです。

SVGはもともとWebで使うために作られた形式なので、どのパソコンにも入っているブラウザだけで表示できます。

Chrome・Edge・Safariなど、ふだん使っているブラウザを起動します。
SVGファイル(手元にない場合はサンプルのegg.svg)を、ブラウザのウィンドウの上にドラッグ&ドロップします。
新しいタブ(または今のタブ)にSVGの絵が表示されれば完了です。

表示できたら、ブラウザの拡大表示(ズーム)の機能で、絵を大きくしてみてください。

SVGは設計図をもとにその都度描き直されるので、大きくしても輪郭がぼやけません。

見本A:SVGを40pxの大きさで表示したもの

見本B:同じSVGを180pxの大きさで表示したもの

見本Aと見本Bは同じSVGを大きさだけ変えて表示したもので、見本Bのように大きくしても、円のふちはなめらかなままです。

WindowsでSVGファイルを開く

Windowsでは、SVGファイルをダブルクリックしたときにどのアプリが起動するかは、パソコンに入っているアプリや設定によって変わります。

絵として見たいときは、右クリックからブラウザを選んで開くのが確実です。

エクスプローラーでSVGファイルを右クリックします。
「プログラムから開く」を選びます。
一覧にブラウザが出ていない場合は、「別のアプリを選択」から探します。
Microsoft Edgeなどのブラウザを選ぶと、SVGの絵が表示されます。

SVGファイルをいつも同じアプリで開きたい場合は、Windowsの設定の「アプリ > 既定のアプリ」で「.svg」を検索し、開くアプリを選び直せます(Microsoft サポート「Windows で既定のアプリを変更する」)。

Windowsのフォトアプリについては、2026年10月にMicrosoftが発表した新しいフォトアプリでSVGへの対応が案内されています(Windows Experience Blog「Meet the new Photos app on Windows 11」(英語))。

ただし、この新しいフォトアプリはWindows Insider(テスト版の参加者)向けから提供が始まった段階なので、お使いのパソコンではまだ使えない場合があります。

また、エクスプローラーの一覧でSVGファイルの絵柄(サムネイル)が表示されないときは、Microsoftが配布している無料のツール集「PowerToys」のエクスプローラー用アドオンを有効にすると、SVGのプレビューとサムネイルを表示できるようになります(Microsoft Learn「PowerToys File Explorer アドオン」)。

MacでSVGファイルを開く

Macでも、SVGファイルを絵として確かめたいときは、SafariやChromeなどのブラウザで開くのが確実です。

Macに最初から入っているアプリがSVGをどこまで表示できるかは、Appleの公式の対応一覧では確認できなかったため、ここではブラウザで開く方法を紹介します。

FinderでSVGファイルをControlキーを押しながらクリックします(右クリックでも同じメニューが出ます)。
「このアプリケーションで開く」を選びます。
一覧からSafariなどのブラウザを選ぶと、SVGの絵が表示されます。

SVGファイルをいつも同じアプリで開きたい場合は、ファイルを選んで「ファイル」メニューの「情報を見る」を開き、「このアプリケーションで開く」でアプリを選んでから「すべてを変更」をクリックします(Apple サポート「Macでファイルを開くAppを選択する」)。

デザインツールで開く

SVGの形や色を描き直したいときは、デザインツールで開きます。

ブラウザは「見る」ためのアプリなので、絵を編集することはできません。

Figma(ブラウザやアプリで使えるデザインツール)では、SVGファイルをキャンバスにドラッグ&ドロップすると、画像としてではなく、編集できるベクターのレイヤー(重ねて管理される図形のまとまり)として読み込まれます(Figma ヘルプセンター「デザインへの画像と動画の追加」)。

Adobe IllustratorではSVGファイルを開いて編集でき、無料のデザインツールのInkscapeは、SVGをそもそも標準の保存形式にしています(Inkscape「About」(英語))。

ツールでSVGを作る方法や、書き出したSVGを編集し直す方法は、シリーズの次の回で詳しく扱います。

テキストエディタで中身をのぞいてみる

SVGファイルをテキストエディタ(文字を書くためのアプリ)で開くと、画像なのに中身が文字で書かれていることが分かります。

Windowsなら、SVGファイルを右クリックして「プログラムから開く」から「メモ帳」を選びます。

WindowsでもMacでも使える無料のコードエディタ「Visual Studio Code(VS Code)」を使うと、色分けされて読みやすく表示されます。

ここからは中身をのぞくだけなので、意味を全部理解しなくて大丈夫です。

たとえば、見本Aと見本Bで表示した目玉焼きのアイコンのSVGファイルをテキストエディタで開くと、次のような文字が書かれています。

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
  <title>目玉焼きのアイコン</title>
  <ellipse cx="60" cy="64" rx="48" ry="40" fill="#FFFFFF" stroke="#3A332A" stroke-width="3"/>
  <circle cx="54" cy="58" r="18" fill="#FFBD07"/>
</svg>

「<svg」で始まって「</svg>」で終わり、その間に「ellipse(楕円)」「circle(円)」といった図形の名前や、「#FFBD07」のような色の指定が並んでいるのが分かります。

白身にあたる楕円の行と、黄身にあたる円の行を見比べると、「どこに、どんな形を、何色で描くか」が文字で書かれていることが読み取れます。

主な部分の意味をざっくり対応させると、次のとおりです。英語で書かれた「絵の指示書」を読んでいるくらいの感覚でかまいません。

書かれている文字	意味
`<svg …>` 〜 `</svg>`	「ここからここまでがSVGの絵です」という始まりと終わりの合図
`xmlns="http://www.w3.org/2000/svg"`	「SVGの決まりで書いています」という宣言(いまは決まり文句と思ってOK)
`width="120" height="120"`	絵を表示する大きさ(横120・縦120)
`<title>`	絵の名前。読み上げソフトなどが参考にする
`<ellipse cx="60" cy="64" rx="48" ry="40" …/>`	白身の楕円。cx・cyが中心の位置、rx・ryが横と縦の半径
`<circle … r="18" …/>`	黄身の円。`r="18"`は半径が18という意味
`fill="#FFBD07"`	塗りの色をカラーコードで指定(ここでは黄身の黄色)
`stroke="#3A332A" stroke-width="3"`	ふちの線の色と太さ

上のコードを表示した結果

試してみたい人は、上のコードをテキストエディタにコピーし、「egg.svg」のように最後を「.svg」にした名前で保存して、ブラウザにドラッグ&ドロップしてみてください。

同じ目玉焼きの絵が表示されれば、文字を書いただけで画像ができたことになります。

コピーして保存するのが手間なら、サンプルのegg.svgをダウンロードしてテキストエディタで開いても、同じ中身を確かめられます。

一方、PNGやJPGをテキストエディタで開くと、読めない記号の羅列が表示されます。

これは、PNGやJPGが文字ではなく、色の点のデータを機械向けの形式で記録しているからです。

コードの書き方や、それぞれの記述の意味は、シリーズの7回目で詳しく扱います。

SVGファイルが開けない・表示されないときの確認点

SVGファイルが開けないときや、開いても何も表示されないときは、次の点を順に確認してみましょう。

拡張子が本当に「.svg」になっているか
Windowsでは拡張子が表示されない設定になっていることがあります。
エクスプローラーの「表示 > 表示 > ファイル名拡張子」で拡張子を表示させて確かめましょう(Microsoft サポート「Windows の一般的なファイル名拡張子」)。
ダブルクリックで、意図しないアプリが起動していないか
テキストエディタが起動して文字だらけの画面になった場合は、SVGが壊れているわけではありません。
右クリック(MacはControlキーを押しながらクリック)からブラウザを選んで開き直しましょう。
白い絵が白い背景に重なっていないか
SVGには基本的に背景がなく、描いた形以外の部分は透明です。
透明な下敷きに白いマジックで絵を描き、それを白い紙の上に置いたような状態になるので、白いアイコンは白い画面の上では何もないように見えます(見本Cと見本D)。
ファイルが壊れているわけではありません。
エラーが表示される、または文字だけが並ぶ場合は、ファイルの中身を確認する
ダウンロードが途中で止まってファイルが途切れていると、ブラウザで正しく表示できません。
また、SVGファイルでは最初の「<svg」の中に「xmlns="http://www.w3.org/2000/svg"」という記述(名前空間の指定)が必要で、これが欠けているとブラウザが画像として扱えないことがあります(MDN「始めましょう」)。
サンプルのegg-no-xmlns.svgは、egg.svgからこの記述だけを消したものです。Chromeで開くと、絵ではなくコードの文字が並んで表示されます。
一部の画像や文字だけが表示されない、形が変わる
SVGの中から別の画像ファイルを読み込んでいたり、パソコンに入っていないフォントを指定していたりすると、その部分だけ表示されなかったり、別の書体に置き換わったりします。
作る側の書き出し設定で防げることが多く、シリーズの次の回で扱います。

見本C:白い背景に置いた白い家のアイコン。絵はあるのに見えない

見本D:同じアイコンを濃い背景に置いたもの

見本Cと見本Dはまったく同じSVGですが、見本Cでは背景と同じ白で描かれているため、何も表示されていないように見えます。

サンプルのwhite-house.svgをダウンロードしてブラウザで開くと、この「真っ白」の状態を手元で確かめられます。

「開いたのに真っ白」というときは、次の方法で絵が隠れていないかを確かめましょう。

テキストエディタで中身を見る
「fill="#FFFFFF"」や「fill="white"」のように白を指定した記述があれば、白い絵が描かれています。
デザインツールで開いて背景の色を変える
Figmaなどで開き、背景(キャンバス)を濃い色にすると、見本Dのように絵が浮かび上がります。

実践のポイント

SVGファイルを開くときに気をつけたいことと、よくある疑問をまとめます。

注意点・よくある間違い

出どころの分からないSVGファイルを、そのままブラウザで開いてしまう。
PNGやJPGは色の点のデータなので、開いただけで中に書かれたプログラムが動く、ということは基本的にありません。
一方、SVGは中身を文字で書くファイルなので、プログラム(JavaScript)も書き込めます(MDN「<script> – SVG」(英語))。
SVGファイルをブラウザで直接開くと、書き込まれたプログラムが動くことがあるため、悪意のある人が仕込んだSVGだと、知らないうちに怪しいサイトへ移動させられる、といったことが起こりえます。
信頼できるサイトや知っている人からもらったファイルだけを開き、出どころが分からないものは、先にテキストエディタで開いて「<script」や「onload=」のような記述がないかを確かめましょう。
テキストエディタで開くだけなら、プログラムは動きません。
テキストエディタで開いたSVGを、うっかり書き換えて上書き保存してしまう。
記号を1つ消しただけでも、ブラウザで表示できなくなることがあります。
中身を触ってみたいときは、ファイルをコピーしてから試しましょう。
PNGやJPGのファイル名の最後を「.svg」に変えれば、SVGになると思ってしまう。
拡張子は種類を表す名札にすぎず、中身は変わらないので、ブラウザでも正しく表示されません。
PNGやJPGをSVGにする方法は、シリーズの5回目で扱います。

よくある質問

Q. SVGを見るために、専用のSVGビューアをインストールする必要はある?
A. 絵を見るだけなら必要ありません。
Chrome・Edge・Safari・Firefoxなどのブラウザで表示できます。
Windowsのエクスプローラーで一覧のまま絵柄を確かめたい場合は、PowerToysのアドオンが選択肢になります。
Q. SVGファイルをダブルクリックしたら、文字だらけの画面が開いた。ファイルが壊れている?
A. 壊れているとは限りません。
SVGの中身は文字なので、テキストエディタが開くように設定されていると、このような画面になります。
ブラウザで開き直して、絵が表示されるかを確かめましょう。
Q. SVGをPNGやJPGとして保存し直したい場合は?
A. 画像の形式を変える「変換」という作業が必要です。
大きさの決め方なども含めて、シリーズの4回目で扱います。