メディアライブラリに SVG のサムネイルを表示させる

webサイトで使うロゴ画像を SVG にすることが多くなりました。Retinaディスプレイ対策で解像度に応じた複数の画像を用意するのは面倒だし、高解像度にすればするほどファイルサイズも大きくなるしで気分がモヤモヤしてしまうのですが、SVG なら1つで済むし、どんな高解像度モニタで見ても、限界まで拡大してみたりしても、どこまでもエッジがシャープで気持ちがいいです。

それはいいのですが、WordPress のメディアライブラリに登録したときに、サムネイルが表示されないのがやや難点でした。それほど困るわけでもないし、そういうものだと諦めていたのですが、これは単にこの部分の img に width が設定されていないためだと知りました (max-width: 60px; は設定されています)。確かに、よく見るとシミのような点が表示されています。

そのあたりを webインスペクタで見てみると、img 要素の属性値が width=”1″ height=”1″ になっています。試しにこの部分 (.media-icon img) に width:100% を設定してみると、SVG がちゃんと表示されました。

ということは、フィルターフック manage_media_columns を利用して、メディアライブラリ画面にスタイルシートを追加して幅を設定してしまえばよいわけです。

すべての .media-icon img に設定すると何か副作用が出るかもしれないので、属性セレクタで src の値の末尾が .svg のものに限定しておきます。こんな感じで。

add_filter( 'manage_media_columns', function( $columns ) {
	echo '<style>.media-icon img[src$=".svg"]{width:100%;}</style>';
	return $columns;
} );

これで SVG も表示されるようになりました。ただし、これはリスト表示モードのみ有効です。グリッド表示モードでは SVG はデフォルトのファイルアイコンのままですが、こちらへの対策はまた改めて。