SVGを実案件で使ってみて便利だったこと

コーディング / 2016.11.14

2001年には既にW3Cから勧告されていたものの、ブラウザ側の対応が進んでいなかったため実案件では使いどころが難しかったSVGですが、IEのサポートポリシー変更などもあり、去年〜今年にかけて活用しはじめた方も多いのではないでしょうか？
「まだ使ったことがない」「いまいち使いどころがわからない」という方のために、実際に使ってみて便利だと感じたことを紹介します。

1. サイズを変えても画質が荒れない

SVGとは「Scarable Vector Graphics（拡大可能なベクター画像）」の略称です。その名の通り、SVGはベクター画像なので、jpgやpngなどのラスタ画像とは異なり拡大縮小しても画質が荒れません。
見出しやリンクのアイコンなど、今までは必要なサイズごとに書き出さなければなりませんでしたが、SVGで書き出しておけばcssであらゆるサイズを指定できます。
また、スマホなどの解像度が高いディスプレイ用のラスタ画像は2倍のサイズで書き出す必要がありましたが、SVGではその必要もなくなるのでレスポンシブ対応のWebサイトにも最適です。

2. 色をcssで変更できる

SVGは「fill」というCSSのプロパティで色を設定するので、色別に書き出す必要がなくなります。
「ここのアイコンは白抜きにしたい」という場合も、cssで「fill: #fff」と指定することで再現できます。

3. Photoshopのasset機能で書き出せる

Illustratorでの書き出しが主になりますが、Photoshopでもシェイプなどのパスレイヤーであればasset機能で書き出せます。
デザインデータはPhotoshopで作成されることが多いので、効率的に書き出すことができ便利です。

4. 滑らかなアニメーションをつけられる

描いていくアニメーションや、形を変化させていくモーフィングアニメーションをCSSで実装できます。
以前はFLASHで作っていたようなアニメーションが以下のように数行のコードで簡単に再現できるので、ぜひお試しください。
css

@keyframes home {
    0% { stroke-dashoffset: 2000; }
    100% { stroke-dashoffset: 0; }
}
svg {
  stroke: #4d515a;
  stroke-width: 5;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: home 4s linear 0s forwards;
  fill:none;
}