mieki256's diary

今時のWebブラウザなら ―― Microsoft Edge、Google Chrome、Firefox 等なら、svg を開くことができる。エクスプローラ等からWebブラウザのウインドウ内にsvgファイルをドラッグアンドドロップしてやれば表示されるはず。

特に Windows10 の場合、標準設定ならsvgファイルと Microsoft Edge が関連付けられているので、エクスプローラ上でsvgファイルをダブルクリック等すれば、Edge が起動して svg が表示される。

ただ、使い勝手が悪い…。

• 背景が白で表示されるので、どこが透明部分なのか分からない。
• スクロールバーでスクロールさせるのがちょっとまどろっこしい。昔はスクロールすらできなかったのでマシにはなったけど…。
• 拡大縮小表示が少し面倒。一応、Ctrl と + で拡大、Ctrl と - で縮小、Ctrl と 0 で100%表示、あるいは、Ctrl + マウスホイールで拡大縮小できるけど…。

ちなみに、Webブラウザ上で svg を表示した際に、背景を市松模様にする Bookmarklet を公開してくれた方がいらっしゃる。

_GitHub - Myster/TransparentBackgroundRevealer: Adds a checkerboard background to a page/image/svg so you can see the transparency features
_microsoft edge - Best way to view white SVG on Windows - Super User

コレを使えば透明部分が分かりやすくなるので、多少改善できそう。

SVG Viewer Extension for Windows Explorer という拡張ツールを追加することで、エクスプローラ上で svg のサムネイル表示ができるようになる模様。

_GitHub - tibold/svg-explorer-extension: Extension module for Windows Explorer to render SVG thumbnails, so that you can have an overview of your SVG files
_Releases - tibold/svg-explorer-extension - GitHub

サムネイルが表示されるだけでも随分と便利になる。ただ、実寸表示ができるわけではないっぽい？

あるいは、PowerToysというツールをインストールすることでも、svg のプレビューが可能になるらしい。

_「PowerToys」にMarkdown/SVGプレビューと画像リサイズ、検索ベースのタスク切り替えが追加 - 窓の杜
_SVG/Markdownを「エクスプローラー」上でプレビューできるようにする「File Explorer」 - 窓の杜
_GitHub - microsoft/PowerToys: Windows system utilities to maximize productivity

インストールして試してみた。エクスプローラを起動して、Alt + P を叩くと右側にプレビューウインドウ(プレビューペイン)が開く。その状態で svg を選択したらプレビュー表示された。ちなみに Alt + P でプレビューウインドウが開く機能は、エクスプローラが元々標準で持っていた機能らしい。

Apache Batik という、svg画像フォーマット関連ツールが公開されてる。この Batik を使うことでも svg 表示はできる。

_Apache(tm) Batik SVG Toolkit - a Java-based toolkit for applications or applets that want to use images in the Scalable Vector Graphics (SVG)
_Download Apache(tm) Batik

batik-bin-1.14.zip をダウンロードして解凍すると、中に batik-squiggle-1.14.jar というファイルが入っているので、コレを実行するとsvgブラウザが起動する。動作には Java が必要。

javaw -jar batik-squiggle-1.14.jar hoge.svg

使い方は昔の日記にメモしてあった。

_Batikの使い方をメモ

Shift + 左ドラッグでPAN、Shift + 右ドラッグでズーム。他に、Ctrl + ドラッグ等にも機能が割り当てられている。

ググったら SGVs というsvgビューアに遭遇した。svg 以外にも、bmp、jpg、png 等、メジャーなラスター画像フォーマットに対応しているらしい。

_SGVs Graphics Viewer - Software D.I.Y.

試用してみたところ、svg の再現性は比較的高いように見えた。ただ、batik に付属してきたサンプルsvgのうち、いくつかは正常に表示できなかった。それでも、サムネイル一覧が表示されるし、プレビューウインドウもあるしで便利に使えそうな印象を受けた。ありがたや…。

画像ビューア Susie で svg を開けるようにするプラグイン、ifsvg100.zip が公開されているので、Susieプラグインに対応している画像ビューアに導入すれば、それらのビューアでsvgが表示できる可能性が高い。

_Bay-side

試したところ、画像ビューア ViX 2.22b1 でも svg を表示できた。

画像ビューア nomacs 3.16.1709 も、一応 svg を表示できたのだけど…。かなり簡単な svg は表示できたものの、ちょっと複雑な svg になると途端に表示が崩れてしまった。svg の表示はほとんどできないと思っておいたほうがいいのかもしれない。

_nomacs | Image Lounge
_Download | nomacs | Image Lounge

画像ビューア XnView 2.50.4 も、制限があるけれど一応は svg を表示できる。少なくともサムネイルはそれらしく表示された。

ただ、100%表示をしようとすると、画像の真ん中にテキストメッセージが表示されてしまう。これは、CAD Image DLL という有償プラグインを使っているからで、メッセージを消すためには、おそらく件のプラグインを購入しなければならないのだろう…。体験版が入ってるものと思っておいたほうが良さそう…。

画像ビューア IrfanView 4.60 32bit も試してみたけど、一応 svg を開けるものの、svg の見た目については、まずほとんど再現されなかった。昔は CAD Image DLL を使ってたような記憶もあるのだけど、独自実装に変更したのだろうか…？ それとも記憶違いかな…。何にせよ、現状では svg 表示ができないも同然かなと…。

こうして一応調べてみたけれど、相変わらず svg は不遇な扱いを受けてるなー、という印象を受けた。jpg、png、gif、bmp等のラスター画像フォーマットと比べてしまうと、svgに対応している画像ビューアは圧倒的に少ない。もっとも、ベクター画像フォーマットなので仕方ないのかもしれない。Webブラウザが対応しているだけでもありがたいと思うべきかも。

どこまで仕様を満たすべきか、実装すべきかという問題もありそうで…。例えば batik に付属してきたサンプルsvgの一部はWebブラウザでも正しく表示できなかったりする。試しに LibreOffice Draw で開いてみたら、そちらも表示が崩れてしまった。なかなか厳しい。

svgは色々な機能が策定されているらしいけど、その分実装が大変なはずで…。盛りだくさんの仕様にしたら誰もライブラリを実装してくれなくて普及しないまま終わったMNGフォーマットを思い出してしまったりもする。アレと比べたらWebブラウザが対応してくれただけでも svg はマシ、だろうか…。

ググっていたら、Smart SVG Viewer というビューアも見かけた。

_Smart SVG Viewer | Free SVG image viewer for Windows, with Thumbnail Gallery and Transparency Grid

試しに SmartSvgViewerSetup.msi をDLしてインストールしてみたところ、0.5.0 alpha がインストールされた。ただ、batik に添付されたサンプルsvgを開こうとしたら、null がどうとかのエラーが何度か表示されてしまった…。見た目についても、いくつかの svg は崩れていた。簡単な図形だけ並べた svg なら表示できるようではある。

「IrfanView も XnView も svg をちゃんと表示できなかったから作ってみた」という流れは、なんだか応援したい…。

XnView MP も svg に対応しているという話を見かけたので、XnView MP 0.99.7 64bit をインストールしてみた。

_Powerful Image Viewer・ XnView MP | XnView.com

初期設定状態では svg と svgz が除外リストに記述されているので表示されないけれど、ツール → 設定 → ファイルリスト → カスタムフィルター → 含まない、の欄に記述されている svg svgz を削除すると、サムネイル等が表示されるようになる。

簡単な図形が並んだ svg なら、サムネイルも等倍表示も表示することができた。XnView のように CAD Image DLL を使って表示しているわけではないようで、余計な(?)テキストメッセージも表示されない。

ただ、batik に添付されていたサンプルsvgに対しては、縦横比がおかしかったり、要素が表示されなかったりで、ちゃんと見た目を再現できなかった。それでも XnView と比べると、svg への対応が進んでいる印象を受けた。