Retinaディスプレイ、レスポンシブWEBが主流になった昨今、サイズの可変で劣化しないSVG形式での画像書き出しで組んでいるサイトが増えてきました。
SVGとはパスで形成されたものなので、元々はIllustratorで作って、アートボードをギリにして書き出していました。それが、Photoshop cc2014から直接photoshopのシェイプレイヤーをアセットで書き出すことが可能になりました。これによってSVG書き出しがより簡単になってきたのではないかと思っています。そこで、弊社でも毎度Retinaディスプレイ用に2倍画像も書き出すよりは、軽くて綺麗なSVGで組むことにしました。その際に起きた、トラブル、結局諦めたこととかあるのでここに記載します。

1)IE9以上対応をクライアントに確認しましょう。
html5はもちろんですが、svgが表示されるのはIE9以上なので、IE8以下は切らなければいけません。基本中の基本ですが、まずはクライアントのその旨お伝えしましょう。

2)IE11では正円が欠ける
Photoshopで書き出された正円がIllustratorのアートボードでギリだったので心配だったのですが、どうしても円の端っこが欠けてしまって、きれいな正円になりません。

・イラレで少し余白のあるアートボードで書き出す。
(photoshopでの書き出しSVGをIllustratorでどんなに編集してもギリ担ってしまうので、Illustrator始まりで書き出さないとダメだと思います。)

・正円はcss3で、中のパーツだけsvgにする。

上記方法ならば、svgのままでいけるかもしれません。スピード考えると正円のパーツはcss3の方がいいかもしれません。結局、私は全てpng書き出しで切り出しました。

3)三角アローのSVGがスマホでは表示されない。タップすると出てくる
こちらは変なバグっぽかったのですが、スマホでリンクテキストの前に設置したアロー(svg)が表示されませんでした。もう、ここはあっさりpngに戻しました。

4)svg背景100%表示がChromeでは両端が切れる。
背景にアーチ状の曲線をひいていたのですが、Chromeだけ両脇が切れてしまいます。大きめに110%指定しても切れてしまいます。しかもスマホのChromeブラウザでも同じ現象が起きます。もう、ここは完全に諦めてpngにしたら全ブラウザ大丈夫になりました。SVGのパーツを背景100%表示する時は両脇注意です。

それ以外のアイコンや欧文フォントのアウトラインなどは問題なかったので、ちょっとつづ、SVG化していこうと思っています。