SVGファイルの開き方：PC・スマホ・ブラウザ

1. PCでSVGを開く4つの方法

• ブラウザ（いちばん簡単）：Chrome、Edge、Firefox、SafariのウィンドウにSVGファイルをドラッグ＆ドロップすれば表示されます。ファイルを右クリックして「Open with」からブラウザを選ぶこともできます；
• 既定の関連付けを設定する：SVGをよく扱うなら、.svgファイルをブラウザやデザインソフトに関連付けておけば、ダブルクリックで直接開けるようになります；
• デザインソフト：Illustrator、Figma、無料のInkscapeはいずれもSVGを開いて編集でき、より細かな作業に向いています；
• コードエディタ：SVGはXMLのテキストなので、VS Codeで開けばソースを確認・編集でき、トラブルシュートがぐっと楽になります。

既定の関連付けの設定方法：WindowsではSVGファイルを右クリックし「Open with → Choose another app」を選んで「Always use this app」にチェックします。macOSでは右クリックして「Get Info」を選び、「Open with」でブラウザを指定して「Change All」をクリックすれば、以降ダブルクリックでプレビューできます。

2. スマホでSVGを開く方法

Android：ファイルによってはSVGを直接プレビューできないマネージャーがあります。その場合はファイルを長押しして「Open with」からブラウザを選んでください。iPhone：SVGをFilesアプリに保存すれば、最近のOSなら直接プレビューできます。表示されない場合は共有メニューからSafariで開いてください。WeChatやQQで受け取ったSVGは通常のファイルとして届き、「Open with」でブラウザを選べば正しく表示されます。

概して、モバイルブラウザは最も信頼性の高いSVGビューアです。追加のアプリをインストールする必要はありません。タブレットも同じで、内蔵ブラウザで開くだけで、専用のビューアは要りません。

3. ダブルクリックでコードや真っ白画面になる場合は？

コードの画面がずらりと表示される：ファイルがNotepadなどのテキストエディタに関連付けられています。SVGはテキストなのでこれは正常です。ブラウザで開けば図柄が見えます。真っ白なウィンドウ：まずファイルが壊れていないか確認してください。コードエディタで開くと、正しいSVGは<svg>タグ、または<?xml宣言で始まります。<html>が表示されているなら、ダウンロード時にエラーページを.svgとして保存してしまった可能性が高いので、もう一度ダウンロードしてください。また、ファイルが外部の画像やフォントを参照していると、リソースが欠けて図柄が不完全になります。

もう一点、SVGはスクリプトを含められるテキスト形式なので、出所が不明なファイルはすぐにはブラウザで開かないでください。まずコードエディタで確認し、svgタグで始まって怪しいスクリプトが含まれていないことを確認してからプレビューするのが安全です。

4. 開いたあとに変更したいときは？オンラインエディタを使いましょう

ロゴの配色を変える、背景を消す、いくつかの要素を削除する——それだけのことに重いソフトは不要です。PolySVG オンラインSVGエディタ（直リンク：/editor）を開いてファイルをアップロードすれば、パスをクリックして削除し、ワンクリックで背景を除去し、配色を変え、描画で補い、消しゴムで消し、いつでも元に戻したりやり直したりして、SVGやPNGで書き出せます。無料、インストール不要、登録も不要です。

5. ただ見たいだけなら？PNGへの変換がもっとも簡単です

相手の端末がSVGを開けないなら、もっとも簡単な対策はPNGへの変換です。エディタからPNGを書き出すか、ブラウザでスクリーンショットを撮ってください。SVG形式そのものを理解したい方はSVGとはをご覧ください。ビットマップをSVGにしたい場合は画像→SVGツールが数ステップで実現します。

開発者であれば、SVGをHTMLに直接埋め込んだり、imgタグで参照したり也不できます。ブラウザが即座に描画します——これがWebでSVGを見る最も一般的な方法です。