今更ながら、SVGを初めてWebサイトに使った際に、少々ハマったのでメモ。
HTML内に埋め込む際には、embedだったりobject又は、直接書き込んだりして使用するみたいなのですが、imgタグと同じように使ったらハマりました。
レスポンシブサイトでの利用は、トリミングされてしまったり、スクロールバーが出てしまった。
そこで、SVGファイルをテキストエディタで直接開いて、widthとheightを100%に書き換えたところ、ちゃんと表示されました。
<?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg version="1.0" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 300 200" enable-background="new 0 0 300 200" xml:space="preserve">
また、書き方が悪かったのか、すごい環境依存がありました。
embedだとFirefoxの30でNGだったり、objectだとスクリプト使ってると結構表示されないことがあった。
IE8で表示させるためにsvg.jsというプラグインを使いました。
js読み込んでそれだけでは動かなかったため、サンプルのソースをみてみると、どうやらIE8ではFlashを使って表示させている模様。ダウンロードしたzipの中にsrcフォルダをそのままアップして、パスを下記のように記入。
<script type="text/javascript" src="common/js/svg.js" data-path="common/js/src"></script>
そしてHTMLの方は、
<!--[if !IE]>--><embed type="image/svg+xml" src="images/sample.svg" width="300" height="200" /><!--<![endif]--> <!--[if lt IE 9]><object classid="image/svg+xml" src="images/sample.svg" width="300" height="200"></object><![endif]--> <!--[if gte IE 9]><object type="image/svg+xml" data="images/sample.svg" width="300" height="200"></object><![endif]-->
という具合にすればOKです。
追記：2014/07/22
svgのサイズをリキッド対応させると、ieでsvg内にスクロールバーが出て、ずっと解決できなかったが、埋め込み方法をembedやobjectではなくimgタグにすることであっさり解決しました。html5ではimgタグでsvgがサポートされているようです。
<img type="image/svg+xml" src="images/sample.svg" width="300" height="200" />
一先ず、一件落着です。
追記：2014/08/20
Codoropsにとても参考になる記事が掲載されていました。
Making SVGs Responsive With CSS
このサイトはいつも勉強になるなぁ
追記：2014/10/19
SVGが表示されない時にMIME Typeを追加しても、変わらなかった際にFTPの転送モードを確認したい。
バイナリで転送すると壊れるようなので、.svgはASCIIに設定しておこう。