SVGビューアー

SVGビューアーとは？

SVGビューアーは、Scalable Vector Graphics（.svg）ファイルを開いて画面に描画するツールです。SVGはテキスト形式なので、優れたビューアーは画像の裏にあるコードも表示し、図形や色、グラデーションがなぜそう見えるのかを正確に確認できます。

viewsvgは無料のオンラインSVGビューアー兼エディターです。ファイルをドロップした瞬間に表示し、2%から6400%までのズーム、パン、透明・白・黒・カスタム背景での確認ができます。コードエディターはプレビューの隣にあり、入力に合わせてプレビューが更新されるので、SVGの確認と修正を同じ場所で行えます。

どのデバイスでもSVGファイルを開く方法

どのデバイスでもSVGを最も手早く表示する方法は、ここで開くことです。開くをクリックするか、このページにファイルをドラッグしてください。Chrome、Edge、Safari、Firefoxのパソコン版・スマホ版で動作し、インストールは不要です。OSでもSVGを表示できますが、いくつか制限があります。

Windows

Windowsは標準ではエクスプローラーやフォトアプリでSVGをプレビューできません。ファイルを右クリックしてプログラムから開くでMicrosoft EdgeかChromeを選ぶか、Microsoft PowerToysを入れるとSVGのサムネイルとプレビューウィンドウが使えます。コードを見たり画像を編集したりするにはviewsvgで開いてください。

Mac

Finderでファイルを選んでスペースキーを押すとクイックルックでプレビューできます。Safariで開くこともできます。どちらもコード、viewBox、ファイルサイズは表示されません。それらを確認するには、ここにファイルをドロップしてください。

iPhone・iPad

「ファイル」アプリで多くのSVGをプレビューできます。ズーム、透明背景の確認、PNG書き出しが必要なら、Safariでviewsvgを開き、開くをタップして「ファイル」やiCloud Driveから選択してください。

Android

Androidのギャラリーアプリの多くはSVGに対応していません。Chromeでこのページを開き、開くをタップしてストレージやGoogleドライブからファイルを選んでください。

Linux

GNOMEの画像ビューアー、Gwenview、多くのファイルマネージャーでSVGを表示できます。コードの確認、最適化、PNG書き出しも必要な場合はviewsvgを使ってください。

SVGファイルとは？

SVG（Scalable Vector Graphics）は、W3Cが策定したXMLベースの画像形式です。ピクセルではなく、パス、円、四角形、テキスト、グラデーションといった図形をviewBox内の座標で記述します。そのため16pxのファビコンから看板まで、どのサイズでもくっきり表示され、シンプルなアイコンなら同等のPNGよりファイルが小さくなることもよくあります。

すべてのブラウザがSVGに対応しているため、ロゴ、アイコン、イラスト、グラフ、UIパーツなどWebの標準的な形式になっています。ファイルはプレーンテキストなのでどのコードエディターでも開けますが、見た目はレンダリングしないとわかりません。SVGビューアーなら両方を確認できます。

ブラウザのタブやデザインアプリではなくviewsvgを使う理由

ブラウザのタブでSVGを開いても画像が表示されるだけです。Illustrator、Figma、Inkscapeなどのデザインアプリは編集できますが、起動に時間がかかり、コードを書き換えてしまうこともよくあります。viewsvgはその中間です。

信頼できないファイルも安全に開けます。スクリプト、イベントハンドラー、javascript:リンクは表示前に取り除かれます。