ヤフーの公式キャラクター「けんさくとえんじん」の「けんさく」をSVG で描いた

はじめに

こんにちは！
これは Yahoo! JAPAN 2018年新卒有志 Advent Calendar 2018 の3日目の記事です
昨日は@cagpie さんによる「必ず押さえたい、JavaScript開発の大技小技」でした。

本日はSVG について勉強したいと思います！

SVG とは

SVG とは、グラフィックを表現する手法の1つです。
ウェブとの相性が良く、グラフを描画したりできます。
下記はSVG で線を描画した例です。
<line>タグで線を引くことができ、<circle>タグで円を描くことができます。
<path>タグでは、ぐにゃぐにゃ曲がった線を表現することができます。
https://codepen.io/yonedaco/pen/OaxZjL

SVG は拡大によって劣化しません。
jpg形式の画像を思いっきり拡大すると一部がモザイクがかかったように霞んでしまいます。
SVG はラスター画像ではなくてベクター画像ですので、どれだけ拡大しようがくっきり綺麗にグラフィックが表示されます。
また、SVG はプログラミング言語との相性が良いです。
SVG はXML を記述することでグラフィックスを作成できるので、テキストエディタで編集できます。
XML の一部の値を変数でおき、プログラミング言語から動的に変更することができます。
線を描画するには始点の(x,y)座標、終点の(x,y)座標の合計4つの情報が必要です。
終点のy座標をJavascript から操作してみた例を下に示します。
スライダーが0〜100までの値を取り、それに従ってy座標が変更されています。
https://codepen.io/yonedaco/pen/MzELVq

GoogleCharts というグラフ描画のためのライブラリは、最終的にはSVG で出力されています。
React のプロジェクトを初心者が作成するためのテンプレート(create-react-app)では、SVG のアイコンが含まれています。
SVG は徐々に私達の生活に溶け込んできています！

SVG の作成

SVG はテキストエディタでタグをかいて作成することができますが、一方でグラフィック描画ソフトウェアで作成することもできます。
Illustrator や inkscape などのソフトでSVG を作成することができます。
Illustrator を使う場合、保存時にai形式ではなく、svg形式で保存します。
Illustrator で「けんさく」を描画し、SVG で保存すると以下のような内容になりました。
これをhtml上にタグとしてそのまま追加すればOKです。

index.html

<svg width="500px" height="500px" viewbox="0 0 800 800">
  <g>
	<g>
		<path class="st0" d="M485,517.5c8,7,38.5,60.5,37.5,91.5S492,634.5,477,625.5l-0.5,0.5c-9,17-11,46-2,52s19,19,1,26s-50,9-60-6
			s5-37-16-40h0c-21,3-6,25-16,40s-42,13-60,6s-8-20,1-26s7-33-2-50l-0.5-0.5c-15,9-44.5,12.5-45.5-18.5s25.5-82.5,33.5-89.5"/>
	</g>
	<path class="st1" d="M398.5,527.4c52.2,1,105.4-17.1,134-33.3c28.5-16.1,50.3-63.6,53.2-82.7c3-19.9,0.8-41.4-0.3-61.4
		c-2.2-37.4-12.3-75.9-36.3-105.5c-25.3-31.1-66.2-48.3-104.5-56.9c-15.1-3.4-30.5-5.2-46-5.2h1c-51.3,0-95,19.9-121.6,36.1
		c-31.9,19.3-57.4,57-62.3,94.1c-4.1,31.2-8,67.4-3.3,98.7c2.9,19,24.7,66.5,53.2,82.6c28.5,16.2,81.7,34.2,134,33.3H398.5z"/>
	<path class="st0" d="M534.5,492.5c0,0-2-134-9-160c-52-12-213-9-257,0c-7,26-9,160-9,160C342,535,435,540,534.5,492.5z"/>
	<circle class="st2" cx="399.5" cy="118.5" r="31"/>
  …(一部省略)
  </g>
</svg>

SVG のアニメーション

SVG はなんとCSS で装飾することもできます！
CSS のアニメーション機能を使って、「けんさく」の目をパチパチさせてみました。
https://codepen.io/yonedaco/pen/EOMKdE/

まとめ

• SVG はグラフィックを表現する手法の1つ
• SVG は拡大によって劣化しないので、くっきり綺麗にグラフィックスが表示される
• SVG はJavascript などのプログラミング言語と相性が良い
• SVG はほとんどのウェブブラウザに対応していて、ほとんどのグラフィック描画ソフトウェアに対応している