はじめに

こんにちは、かずん(@kazoonLab)です。

今回の記事から、「SVG」について書いていこうと思います。

SVGを使うと、アイコンや図形をきれいに表示させたり、変形させるアニメーションなどを作れたりすることができます！今回は、SVGの基本のことを知って、アニメーションを作る準備をしましょう。

そもそもSVGってなに？

ラスタ形式とベクタ形式について

SVGの紹介に入る前に、「ラスタ形式」と「ベクタ形式」の違いについて紹介します。

「ラスタ(raster)形式」とは、ピクセル単位で色・濃度などの情報をもつ画像形式です。

パソコンやスマホで写真を拡大表示した時、画像が粗く表示されるときがあると思います。画像を拡大すると、1ピクセルが大きく表示されます。ラスタ形式では1ピクセルより細かく分割できないため、ギザギザに表示されてしまうのです。

下の画像は、Twitterのアイコン(PNG)とそれを拡大したものです。拡大した画像がギザギザしているのがお分かりかと思います。

ラスタ画像のイメージ

一方、「ベクタ(vector)形式」とは、数値・計算式で情報を持たせる画像形式です。

ベクタ形式の画像を拡大表示すると、都度計算が実行され、内部の数値が変化します。拡大表示しても、それに合わせて画像が変化するので、粗くならずに表示されます。

下の画像は、Twitterのアイコン(EPS)とそれを拡大したものです。拡大した部分が、滑らかになっているかと思います。

ベクタ画像のイメージ

一見使いやすそうなベクタ形式ですが、デメリットもあります。画像を拡大縮小するたびに計算が実行されるため、写真などの複雑な配色・輪郭を再現しようとするとファイルサイズが大きくなりすぎてしまいます。なので、ベクタ形式で扱えるのは、ロゴやアイコン・図形などに限られてきます。

ここまで、ラスタ形式とベクタ形式の違いをざっと見てきました。それでは、本題のSVGについて見ていきましょう。

SVGとは

「SVG(Scalable Vector Graphics)」とは、XMLに準拠した二次元のベクターデータを指します。名前にもVectorって入ってますもんね。

SVGやEPSなど、ベクタ形式のデータは何種類かありますが、その中でもSVGは、「テキストエディタで編集でき」、また「ウェブブラウザで閲覧することができる」という特徴があります。

実際どういうことなのか、以下の章で一緒に確認していきましょう。

SVGの中身をテキストエディタで見てみよう

SVGの中身を見てみるために、まずSVGをダウンロードしましょう。以下のリンクから、zipファイルをダウンロード・解凍してください。解凍したフォルダの中に「Twitter_Social_Icon_Circle_Color.svg」があればOKです。
> ダウンロードリンク

次に、エディタを開きます。Windowsなら「メモ帳」、MacOSなら「テキストエディット」を開いてください。

最後に、ダウンロードしたSVGファイルを、開いたエディタにドラッグ&ドロップします。すると、下のようなソースコードが出てくるかと思います。(※メモ帳で開くと一画面で収まらなかったので、私はVSCodeで開いています)

SVG画像のソース

classやstyleなど、CSSで見かけそうな記述がちらほらありますね。一方、gやdなど、あまり見かけないようなものもあります。これらの情報が、SVGをかたどっているのです。言い換えれば、これらの情報を操作することで、SVGを変形させることができというわけです。

SVGの変形(アニメーション)は次回の記事で扱います。今日はまず、Google ChromeなどのブラウザでSVGを表示する方法を見ていきましょう。

SVGをブラウザで見てみよう

SVGファイルをブラウザで閲覧する方法はいくつかあります。今回は下記の4つを紹介して、それぞれの特長を記していきたいと思います。

<img> で読み込む

See the Pen SVG sample by <img> by kazoonLab (@kazoonLab) on CodePen.

JPEGやPNG画像と同じように、SVG画像は<img>タグのsrc属性で読み込むことができます。また他の形式と同様、altやwidth、heightも指定できます。

CSSのbackground-imageで読み込む

See the Pen SVG sample by background-image by kazoonLab (@kazoonLab) on CodePen.

これも通常の画像と同じですが、CSSのbackground-imageのurlで読み込むこともできます。

上記2つの方法は普通の画像の読み込み方と大差ありません。しかし、この方法ではそもそもSVGである必要性が薄いですし、なによりSVGのデータを操作できないというデメリットを抱えることになります。

次に紹介する2つの方法は、普通の画像とは異なる使い方をしています。それぞれ見ていきましょう。

<svg>で埋め込む

See the Pen SVG sample by coding directly by kazoonLab (@kazoonLab) on CodePen.

先程、テキストエディタでSVGの中身を直接確認しましたが、それを直接HTMLに埋め込むことで、SVGを表示させることができます。SVGを直接操作できるようになる一方、HTMLにSVGを直接書くことになるため、ソースの見やすさ(可読性)が悪くなりますね。

CSS/JavaScriptで操作するとき、最もやりやすい記述方法です。

<object>で埋め込む

See the Pen SVG sample by <object> by kazoonLab (@kazoonLab) on CodePen.

codepenではなぜか表示されませんが、ブラウザではちゃんと表示されますのでご安心を。

<object>は、ドキュメントに外部リソースを埋め込むことができます。動画などを埋め込んで表示する<iframe>に似たものといったところでしょうか。

可読性を保ったまま、フォールバック(古いブラウザなどでSVGを読み込めなかった場合、代わりに表示させる画像)を設定することができます。(今回はPNGファイルを設定しています。)

上記2つの方法のいずれかで、ブラウザにSVG画像を表示させることができます。

まとめ

今回は、ラスタ形式とベクタ形式の違い、SVG画像について、さらにSVG画像をブラウザに表示させるところまでを見ていきました。

次回の記事では、SVGをインラインで埋め込む(3番目)の方法で、SVGをCSS/JavaScriptで動かしてみたいと思います。

最後までご覧いただきありがとうございます。

↓SVGの他の記事はこちら

SVGでアニメーションを実装してみよう！可愛いサンプルもあるよ！

この記事がいいなっと思ったら読者登録をお願いいたします♪