SVGファイルの開き方：表示・編集・確認の10通り

SVGをダブルクリックしても開かない場合、ファイルが壊れているとは限りません。OSで既定のアプリが設定されていないこともあります。また、SVGを「見る」「図形として編集する」「XMLソースを確認する」場合では、使うアプリが異なります。

ここでは、Windows、macOS、Linux、スマートフォンで使える10の方法を、目的と対応環境が分かるように整理します。

早見表：SVGを開く10の方法#

方法1：Webブラウザ（ドラッグ＆ドロップで表示）#

SVGファイルを開く最もシンプルな方法は、今使っているWebブラウザです。Chrome、Firefox、Edge、SafariはすべてSVGをネイティブサポートしています。プラグインも拡張機能もインストールも不要です。

ブラウザでSVGを開く方法#

1. ブラウザを開く（Chrome、Firefox、Edge、Safari）。
2. ファイルエクスプローラーからSVGファイルをドラッグして、ブラウザのタブにドロップする。
3. または、Ctrl+O（Windows/Linux）または Cmd+O（Mac）を押してファイルを参照する。

これだけです。SVGはすぐにレンダリングされ、Webページに表示されるのと同じように表示されます。ズームイン・ズームアウトして詳細を確認でき、SVGはベクターフォーマットなのでどんな拡大率でも鮮明です。

メリット・デメリット#

メリット：

• 追加のセットアップが不要。
• ブラウザで使用するSVGの表示確認に向いている。
• Windows、macOS、Linux、さらにはモバイルブラウザでも動作。

デメリット：

• 表示が中心で、図形を直接編集する機能はない。
• エクスポートや変換機能はない。
• アニメーション付きの複雑なSVGは、ブラウザによって正しく表示されないことがある。

対応プラットフォーム： Windows、macOS、Linux、iOS、Android

方法2：Inkscape（オープンソースのベクターエディター）#

パスの編集、色やテキストの修正、別形式への書き出しまで行う場合は、Inkscapeが候補になります。

InkscapeはSVGを主要形式として扱うオープンソースのベクターエディターです。パス、グラデーション、クリッピングパス、多くのフィルターを編集できます。複雑なSVGは、最終的に使うブラウザやアプリでも表示を確認してください。

InkscapeでSVGを開く方法#

1. inkscape.org からInkscapeをダウンロードしてインストール（Windows、macOS、Linux対応）。
2. Inkscapeを起動する。
3. ファイル → 開く でSVGファイルを選択するか、ファイルをInkscapeウィンドウにドラッグする。

開いた後は、図形や色、テキスト、キャンバスサイズを編集し、PNGやPDFなどへ書き出せます。

メリット・デメリット#

メリット：

• オープンソースで、サブスクリプションは不要。
• プロレベルのSVG編集機能。
• クロスプラットフォーム：Windows、macOS、Linux。
• 活発なコミュニティと豊富なチュートリアル。
• PNG、PDF、EPSなどへのエクスポート対応。

デメリット：

• インターフェースがモダンなデザインツールと比べると古くさい印象がある。
• 非常に複雑なSVGファイル（数千の要素）では動作が重くなることがある。
• ベクター編集初心者には学習コストがある。

対応プラットフォーム： Windows、macOS、Linux

方法3：Adobe Illustrator#

Adobe Illustratorは、ベクター素材の制作と書き出しに使われるデスクトップアプリです。

SVGを読み込み、対応する要素をパスや図形として編集できます。フォント、フィルター、外部画像を含むSVGは読み込み結果が変わる場合があるため、書き出したファイルをブラウザでも確認します。

IllustratorでSVGを開く方法#

1. Adobe Illustratorを開く。
2. ファイル → 開く でSVGファイルを選択。
3. 読み込まれた要素を確認し、必要な箇所を編集する。

ファイル → 配置 を使って、既存のIllustratorドキュメントにSVGを埋め込むこともできます。

メリット・デメリット#

メリット：

• SVGのインポート/エクスポートのきめ細かな制御。
• PhotoshopやAfter Effectsなど、他のAdobe製品とデータを受け渡しやすい。
• パス、色、テキスト、アートボードをまとめて編集できる。

デメリット：

• 利用には有料プランが必要。料金は公式サイトで確認する。
• SVGを見るだけならオーバースペック。
• Linux未対応。

対応プラットフォーム： Windows、macOS

方法4：Affinity#

Affinityは、ベクターとラスターの編集機能を持つデザインアプリです。提供形態や対応OSは変更されることがあるため、導入前に公式サイトで確認してください。

Affinity DesignerはSVGのインポート・エクスポートをサポートし、初心者にも経験者にも使いやすい、クリーンでモダンなインターフェースを備えています。

Affinity DesignerでSVGを開く方法#

1. Affinity Designerを開く。
2. ファイル → 開く でSVGファイルを選択。
3. 読み込まれた要素を確認し、必要な箇所を編集する。

同じドキュメント内でベクターとラスターのワークスペースを切り替えられるため、ビットマップ画像が埋め込まれたSVGファイルに特に便利です。

メリット・デメリット#

メリット：

• ベクターとラスターの素材を同じドキュメントで扱える。
• Windows、macOS、iPadに対応。
• SVGを読み込み、複数形式へ書き出せる。

デメリット：

• 提供形態や料金は公式サイトで確認が必要。
• SVGサポートは良好だが、まれにレンダリングの微妙な差異が生じることがある。
• Linux版なし。

対応プラットフォーム： Windows、macOS、iPad

方法5：Figma（Webベースのデザインツール）#

Figmaはブラウザとデスクトップアプリから利用できるデザインツールです。利用できる機能や共同編集の範囲はプランによって異なります。

FigmaはSVGファイルをきれいにインポートし、編集可能なベクターレイヤーに変換します。図形の変更、色の調整、タイポグラフィの編集、SVG/PNGなどへの再エクスポートが可能です。

FigmaでSVGを開く方法#

1. figma.com を開いてサインイン（無料アカウントでOK）。
2. 新しいデザインファイルを作成するか、既存のものを開く。
3. SVGファイルをFigmaのキャンバスにドラッグ＆ドロップ。

SVGを読み込むと、対応するパスやグループをFigma上で編集できます。SVGの機能によっては構造や表示が変わるため、再書き出し後に確認してください。

メリット・デメリット#

メリット：

• 無料枠があり、利用条件は公式のプランページで確認できる。
• 対応ブラウザならインストールせずに利用できる。
• 読み込んだパスや色を編集できる。
• リアルタイムコラボレーション機能。
• オフライン使用可能なデスクトップアプリあり。

デメリット：

• Web版はインターネット接続が必要。
• 一部のフィルター、アニメーション、外部リソースは読み込み結果が変わることがある。
• プランによって共同編集や履歴などの利用範囲が異なる。

対応プラットフォーム： 全OS（Webブラウザ）、Windows、macOS（デスクトップアプリ）

方法6：VS Code + SVGプレビュー#

VS CodeではSVGをテキストとして編集できます。プレビュー機能を持つ拡張機能を追加すれば、コードと表示結果を並べて確認できます。

VS CodeでSVGを開く方法#

1. Visual Studio Code をインストール（無料・オープンソース）。
2. SVG Preview 拡張機能をインストール（Simon Siefke氏のものなど）。
3. VS CodeでSVGファイルを開き、コマンドパレットからプレビューを表示する。

WebプロジェクトでSVGを使う開発者に特に便利です。SVGコードを直接編集し、変更をリアルタイムで確認できます。

メリット・デメリット#

メリット：

• 無料・オープンソース。
• シンタックスハイライトと自動補完でSVGコードを編集。
• コード横にライブプレビュー。
• すでにVS Codeを使っている開発者には追加コストゼロ。
• 豊富な拡張機能エコシステムでSVGツールを追加可能。

デメリット：

• ビジュアルデザインツールではなく、編集はコードが中心。
• プレビューには拡張機能のインストールが必要。
• 非技術ユーザーには不向き。

対応プラットフォーム： Windows、macOS、Linux

方法7：テキストエディター（SVGはXMLだから）#

SVGはXML形式のプレーンテキストです。そのため、メモ帳、TextEdit、Sublime Text、Vimなどのテキストエディターで内容を開けます。

テキストエディターでSVGを開く方法#

1. SVGファイルを右クリックする。
2. プログラムから開く で好きなテキストエディターを選択する。
3. SVGコードが読みやすいXMLとして表示される。

表示結果は確認できませんが、次のような用途に使えます。

• SVGの寸法とviewBoxの確認。
• カラー値の検証。
• 不要なメタデータや未使用要素の削除。
• レンダリング問題のトラブルシューティング。
• 自動化スクリプトでのSVGファイル編集。

Windowsでは、XML/SVGのシンタックスハイライトに対応する Notepad++ も選択肢の一つです。Macでは標準の テキストエディット（TextEdit） で開けます（リッチテキストではなくプレーンテキストとして開くように設定してください）。Linuxでは任意のテキストエディターを利用できます。

メリット・デメリット#

メリット：

• OS標準のテキストエディターでも開ける。
• SVGソースコードに直接アクセス。
• クイック編集、トラブルシューティング、自動化に最適。
• エディターと端末のメモリが許す範囲で、大きなファイルも扱える。

デメリット：

• ビジュアルプレビューなし（追加ツールなしでは）。
• デザインレベルの編集には実用的でない。
• 誤ってSVGの構造を壊しやすい。

対応プラットフォーム： 全OS

方法8：svg2img.cc（オンラインで表示＆変換）#

SVGファイルを表示し、PNG、JPG、WebPなどへ変換したい場合は、svg2img.cc をブラウザから利用できます。

svg2img.ccは、選択したSVGをクライアント側のJavaScriptで処理します。表示や変換のためにファイルをサイトのサーバーへ送信しません。処理できる複雑さや出力サイズは、端末の性能とブラウザのメモリに左右されます。

svg2img.ccの使い方#

1. ブラウザで svg2img.cc を開く。
2. SVGファイルをページにドラッグ＆ドロップするか、クリックしてファイルを選択。
3. SVGのプレビューを確認する。
4. 必要に応じて出力フォーマット（PNG、JPG、WebP）、ピクセル寸法、背景色を設定。
5. ダウンロード をクリックして変換された画像を保存。

SVGを受け付けないサービスへ共有するときは、相手が必要とする寸法でPNGへ変換します。

メリット・デメリット#

メリット：

• 現在の機能は登録不要で、出力に透かしを追加しない。
• 選択したファイルを、変換のためにサイトのサーバーへアップロードしない。
• ファイルのアップロード完了を待たずに、ブラウザ内で処理を開始できる。
• PNG、JPG、WebP形式での出力、カスタマイズ可能な設定。
• 対応ブラウザが動作するパソコンやモバイル端末から利用できる。

デメリット：

• 図形を直接編集するツールではなく、表示と変換が中心。
• JavaScriptが有効なモダンなブラウザが必要。
• オフライン使用には事前のページキャッシュが必要。

対応プラットフォーム： 全OS（Webブラウザ）

方法9：モバイルアプリ（Android・iOS）#

スマートフォンの標準ギャラリーでSVGを開けない場合は、ブラウザまたはSVG対応アプリを使います。アプリの提供状況と機能は変わるため、ストア上の説明とプライバシー情報を確認してください。

Android#

ファイル管理アプリからSVGをChromeなどの対応ブラウザで開きます。編集が必要な場合は、SVGの読み込みと書き出しに対応したアプリを選びます。

iOS（iPhone・iPad）#

ファイルアプリのクイックルック、または共有メニューからSafariなどの対応アプリを選びます。表示できないSVGは、ブラウザ上の変換ツールでPNGへ書き出す方法もあります。

両プラットフォームとも、SVGをメールで自分に送信してモバイルブラウザで開くか、クラウドサービス（Google Drive、Dropbox）経由でブラウザでSVGファイルを開くこともできます。

メリット・デメリット#

メリット：

• 外出先でSVGファイルを表示可能。
• デスクトップPC不要。

デメリット：

• モバイルでの編集機能は限定的またはなし。
• 複雑なSVGは古いデバイスでレンダリングが遅くなることがある。
• アプリによって広告、機能制限、ファイルの送信方法が異なる。

対応プラットフォーム： Android、iOS

方法10：OS標準ビューアー（限定的サポート）#

WindowsもmacOSもSVGファイルをある程度処理する機能を内蔵していますが、サポートは限定的で、動作にばらつきがあります。

macOS：プレビュー#

macOSでは、標準の プレビュー アプリでSVGファイルを開ける場合があります。結果はmacOSのバージョンとSVGの構成によって異なります。

1. SVGファイルを右クリックする。
2. このアプリケーションで開く → プレビュー を選択。
3. SVGがサポートされていれば、プレビューウィンドウにレンダリングされる。

プレビューは基本的なSVGの表示や、PNG/PDFへのエクスポートが可能です。ただし、高度な機能（フィルター、マスク、アニメーション）を含む複雑なSVGは正しくレンダリングされないことがあります。

ヒント： プレビューで開けない場合は、SVGをSafariのタブへドラッグして確認します。

Windows：フォト＆その他のオプション#

Windowsは長らくSVGのネイティブサポートが不十分でした。標準の フォト アプリはSVGに対応していません。ただし、Windows 10・11では：

• Edgeブラウザ がSVGファイルをネイティブで開けます（Edgeのタブにドラッグするだけ）。
• コーデックパックやSVGサムネイル拡張をインストールすると、エクスプローラー でSVGのサムネイルが表示されることがあります。

メリット・デメリット#

メリット：

• 追加のソフトウェアインストール不要。
• さっと確認するのに便利。

デメリット：

• レンダリング品質にばらつきがある。
• 多くのSVG機能が未サポート。
• 編集機能なし。
• Windowsのサポートは特に限定的。

対応プラットフォーム： Windows（限定的）、macOS（部分的）

トラブルシューティング：SVGが開かない？#

SVGファイルがどうしても開かないことがあります。よくある問題とその解決方法を紹介します。

ファイルの関連付けが間違っている#

OSがSVGファイルを間違ったアプリケーションで開こうとしている可能性があります。修正方法：

• Windows：SVGを右クリック → プログラムから開く → ブラウザまたはお好みのアプリを選択 → 「常にこのアプリを使う」にチェック。
• macOS：右クリック（Control+クリック）→ 情報を見る → このアプリケーションで開く → お好みのアプリを選択 → すべてを変更... をクリック。

SVGファイルが破損している#

SVGファイルが破損している場合、どのツールでも正しく開けません。確認方法：

1. テキストエディターでSVGを開く（方法7）。
2. 明らかな問題がないか確認：内容の途切れ、閉じタグの欠落、文字化け。
3. 有効なSVGは <?xml または <svg で始まり、</svg> で終わるはず。
4. ファイルが破損している場合は、元のソースから再ダウンロードを試みる。

ブラウザ拡張機能の競合#

一部のブラウザ拡張機能（広告ブロッカー、プライバシーツール、SVG関連の拡張機能）がSVGのレンダリングを妨げることがあります。ブラウザでSVGの表示がおかしい場合：

1. プライベート/シークレットウィンドウ で開いてみる（ほとんどの拡張機能が無効になります）。
2. プライベートウィンドウで正しくレンダリングされる場合、拡張機能が原因です。
3. 拡張機能を一つずつ無効にして問題を特定する。

SVGが大きすぎる、または複雑すぎる#

非常に大きなSVGファイル（50MB以上）や数万の要素を含むSVGは、一部のビューアーでは処理しきれないことがあります。解決策：

• Inkscapeなどの専用エディターを試す。大きなSVGでも扱える場合がある。
• テキストエディターでSVGを開き、不要な要素を削除する。
• SVGOなどのツールを使ってファイルサイズを最適化・削減する。

エンコーディングの問題#

SVGファイルに特殊文字（日本語、中国語、アラビア語など）が含まれていて文字化けする場合、エンコーディングの不一致が原因かもしれません。テキストエディターで開き、UTF-8 エンコーディングで保存し直してください。

よくある質問#

SVGファイルはどんなプログラムで開けますか？#

多くのプログラムがSVGファイルを開けます。最も簡単なのはモダンなWebブラウザ（Chrome、Firefox、Edge、Safari）で、ファイルをブラウザのタブにドラッグ＆ドロップするだけです。編集にはInkscape（無料）やAdobe Illustrator（有料）が定番です。サッと確認して変換するなら、svg2img.ccがブラウザベースで便利です。

ソフトをインストールせずにSVGファイルを開けますか？#

はい。インストール不要の方法には次のものがあります。

• Webブラウザ：SVGをブラウザのタブにドラッグするだけで表示できます。
• svg2img.cc：対応ブラウザでSVGを表示して変換できます。登録は不要で、変換対象のファイルはサイトのサーバーへ送信されません。
• Figma：Web版でSVGを読み込み、対応する要素を編集できます。利用範囲はプランによって異なります。
• テキストエディター：OS標準のテキストエディター（Windowsのメモ帳、Macのテキストエディット）でコードとしてSVGを開ける。

同じSVGが別のプログラムで違って見えるのはなぜ？#

SVGレンダリングエンジンはアプリケーションによって異なります。ブラウザはあるエンジンを使い、Inkscapeは別のエンジン、Illustratorはまた別のエンジンを使用しています。それぞれがSVG機能の解釈をわずかに異なる方法で行うことがあり、特にフィルター、ブレンドモード、テキストレイアウトなどの高度な機能で顕著です。最も正確なレンダリングを得るには、そのSVGを作成したプログラムを使うか、モダンなブラウザで表示してください。

Microsoft OfficeでSVGファイルを開けますか？#

比較的新しい PowerPoint、Word、Excel では、挿入 → 画像 からSVGを挿入できます。対応状況はOfficeのバージョンやSVG内のフォント、フィルターによって異なります。表示が崩れる場合は、文書内で使う寸法に合わせてPNGへ変換してから挿入します。

SVGとPNGはどちらが良いですか？#

用途が異なります。SVGはパスや図形で構成されるロゴ、アイコン、図表に向きます。PNGは固定ピクセルのスクリーンショット、透過を含むUI素材、SVGを受け付けないサービスへの入稿に向きます。写真ではJPEG、WebP、AVIFも比較してください。

まとめ#

SVGファイルを開くために高価なソフトウェアや複雑な設定は必要ありません。適切な方法を選ぶための簡単なまとめ：

• 表示したい場合：対応ブラウザへドラッグする。
• 編集したい？ Inkscapeが無料で強力。FigmaはWebベースの編集に便利。
• 変換したい場合：svg2img.cc では、ブラウザ上で表示を確認してから画像へ変換できます。
• コードを見たい？ 任意のテキストエディターまたはVS Codeで開く。
• スマホで？ 専用のSVGビューアーアプリまたはモバイルブラウザを使用。

表示だけならブラウザ、図形を編集するならInkscapeやIllustrator、ソースを確認するならコードエディターが適しています。利用先がSVGに対応していない場合は、必要な寸法でPNGへ変換します。ブラウザ上での表示と変換には svg2img.cc も利用できます。