Windows Server 2008 R2(IIS 7.5) 環境で SVG が表示されない問題に遭遇したのでメモしておく。
SVG は IIS でデフォルトではサポートされていない。
Apache では SVG が表示されたので IIS の問題だろうなというのはわかりました。早速調べてみると、アメリカのマイクロソフトの Mads Kristensen 氏のブログ で、「HTML5 や CSS3 は、いくつかの新しいファイル形式が導入されていて、そのいくつかの新しい形式は、デフォルトでは IIS Web サーバーでサポートされていなく、IIS は指示しない限り、これらの新しいファイルを提供することはない。」という旨の記事を見つけました。
リクエストがサポートされていないファイルタイプのために、IIS でエラーになってしまっているということなんですね。
補足:MIME タイプとは?
MIME タイプとは、拡張子とファイルのデータ型(データの種類)の関連付けを担っているのが MIME タイプです。読み方「マイムタイプ」と読む。
web.config で解決
この問題は、web.config を使用して解決できます。web.config は Apache でいうところの .htaccess みたいなもので、以下の web.config をプロジェクトのルートディレクトリに置くことで、SVG を表示することができました。
<?xml version="1.0"?> <configuration> <system.webServer> <staticContent> <mimeMap fileExtension=".svg" mimeType="image/svg+xml" /> </staticContent> </system.webServer> </configuration>
前述した Mads Kristensen 氏のブログに HTML5 と CSS3 で使用されるほとんどのビデオ、オーディオ、およびフォントのファイルタイプのサポートが含まれたスニペットも用意されています。<system.webServer> のセクションにこのスニペットを追加するだけです。
追加すると以下のようになる。
<?xml version="1.0"?> <configuration> <system.webServer> <staticContent> <mimeMap fileExtension=".mp4" mimeType="video/mp4" /> <mimeMap fileExtension=".m4v" mimeType="video/m4v" /> <mimeMap fileExtension=".ogg" mimeType="video/ogg" /> <mimeMap fileExtension=".ogv" mimeType="video/ogg" /> <mimeMap fileExtension=".webm" mimeType="video/webm" /> <mimeMap fileExtension=".oga" mimeType="audio/ogg" /> <mimeMap fileExtension=".spx" mimeType="audio/ogg" /> <mimeMap fileExtension=".svg" mimeType="images/svg+xml" /> <mimeMap fileExtension=".svgz" mimeType="images/svg+xml" /> <remove fileExtension=".eot" /> <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" /> <mimeMap fileExtension=".otf" mimeType="font/otf" /> <mimeMap fileExtension=".woff" mimeType="font/x-woff" /> </staticContent> </system.webServer> </configuration>
躓くといろいろ勉強になりますね。そのおかげで良いリソースも見つけることができました。
リソース