SVG画像が映らない場合の対処法
サーバー移転時にWEBサイト上のsvg画像が表示されなくなる場合があります。
それはWEBサーバーのContent-typeが未定義であるためです。.htaccessに定義する事で表示されます。
AddType image/svg+xml .svg .svgzと追記して下さい。
SVG画像とは
SVGは「Scalable Vector Graphics」の略称ですね。
ここでは詳しくは触りませんが、後から拡大縮小が可能なベクター形式の画像の事ですね。
SVGは「画像ファイル」でありながら、英数字の羅列で構成されたデータファイルでもあります。
SVG画像タグ例
imgタグを使った記述
<img src="img/logo.svg" width="32" height="32">
svgタグを使った記述
<svg id="logo" x="0px" y="0px" width="155px" height="155px" viewBox="0 0 155 155" enable-background="new 0 0 155 155"> <polygon id="logo-polyline" fill-rule="evenodd" clip-rule="evenodd" fill="#0CB9C7" points="128.25,26 147.19,96.69 95.44,148.44 24.75,129.5 5.81,58.81 57.56,7.06 "/> </svg>
SVG画像の特徴
一番の特徴・メリットは、ファイル自体が数式や文字で構成されていて画像データとして保存されていない事でしょう。
.jpgや.gif・.pngと違い。画像ソフトで編集しなくても後からCSS上で画像のサイズや色を変更する事もできるのです。
ファイルサイズが大きくなりがちで使いどころは限られますが、アニメーションや透過効果もある大変便利な画像形式です。
svg画像は画像ではなく英数字の羅列が保存されている
imgタグで表示する場合は拡張子を.svgや.svgzにするだけで、通常のタグ表示と何ら変わりません。
しかしその画像パス先に保存されているのがピクセルデータではなく、英数字の羅列による構成なのも特徴です。
SVG画像が映らない
WEBサイトの引っ越しなどをした際によく遭遇する事があるので、ここで紹介しておきます。
それまで表示されていたSVG画像が、サーバーの移転先でいきなり映らなくなる事があるのです。
WEB上は映っていない訳ですが、ソースを確認するとコードは表示されます。
svg画像ソース表示例（画像は表示されず）
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"> <path d="M11.433 15.992L22.69 5.712c.393-.39.393-1.03 0-1.42-.393-.39-1.03-.39-1.423 0l-11.98 10.94c-.21.21-.3.49-.285.76-.015.28.075.56.284.77l11.98 10.94c.393.39 1.03.39 1.424 0 .393-.4.393-1.03 0-1.42l-11.257-10.29" fill="#FFF" opacity="1" fill-rule="evenodd"> </svg>
つまり先ほど説明した英数字を使った記述構成はあるものの、画像として出力されていないのですね。
サーバー側の設定が影響している
理由はズバリ！svgの画像コードを画像として認識する設定が、サーバー上でONになっていないからです。
つまりサーバー側の設定の問題という事になります。
ですのでわざわざSVG画像を入れ替えたりする必要はありません。
コンテンツタイプを指定する
厳密に言うと.svgやsvgzなどのファイルが「SVG画像」であると、サーバー側にきちんと明言しておかないといけないという事です。
これを「コンテンツタイプ（Content-type）を定義する」と言います。
例えばApacheなどのサーバーなどがそうで、未定義のContent-typeがあればそれを定義する必要があります。
svgとsvgzの違い
.svgのSVG画像ファイルは、XMLのテキストファイルです。
ロゴマークとして使用する場合もファイルサイズがかなり肥大する事があります。
そこでsvgファイルを圧縮してファイルサイズを縮小させたものが、「svgz」ファイルになります。
Content-typeを定義する場合は両方使える様にするべきです。
SVG画像を表示させる方法
ではApacheなどのWEBサーバーでSVG画像を定義するにはどうするのでしょうか。
この設定は本来、httpd.confファイルに記述するべきです。
しかし通常のレンタルサーバーではこのhttpd.confファイルを触れない事が多いので、代わりに.htaccessファイルに記述します。
.htaccessへの記述の仕方
AddType image/svg+xml .svg .svgz
以上の様に.htaccessに記述（追記）して上書きする事で、SVG画像が映る様になります。
htmlの中でphpを使える様に定義する時と、やり方は同じですね。
まとめ
以上svg画像が表示されない時の対処方法についてご紹介しました。
svg画像が映らない場合、サーバーにContent-typeが定義されていない可能性があります。
.htaccessに1行追記するだけで済みますのでお試し下さい。
