Windows Server 2008 R2(IIS 7.5) で SVG が表示されないときは、web.config を用意する。

Windows Server 2008 R2(IIS 7.5) 環境で SVG が表示されない問題に遭遇したのでメモしておく。

SVG は IIS でデフォルトではサポートされていない。

Apache では SVG が表示されたので IIS の問題だろうなというのはわかりました。早速調べてみると、アメリカのマイクロソフトの Mads Kristensen 氏のブログで、「HTML5 や CSS3 は、いくつかの新しいファイル形式が導入されていて、そのいくつかの新しい形式は、デフォルトでは IIS Web サーバーでサポートされていなく、IIS は指示しない限り、これらの新しいファイルを提供することはない。」という旨の記事を見つけました。

リクエストがサポートされていないファイルタイプのために、IIS でエラーになってしまっているということなんですね。

補足：MIME タイプとは？

MIME タイプとは、拡張子とファイルのデータ型（データの種類）の関連付けを担っているのが MIME タイプです。読み方「マイムタイプ」と読む。

MIMEとは – W3G Blog Apache HTTP Server References 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>

躓くといろいろ勉強になりますね。そのおかげで良いリソースも見つけることができました。

リソース