SVG画像を作る

はじめに

皆さん、こんにちは。
唐突ですが、SVGをご存知でしょうか？
SVGは「Scalable Vector Graphics」 の略で画像フォーマットの１つです。
皆さんが普段見慣れている画像フォーマットは、JPGやPNGが多いのではないでしょうか。JPGやPNGは、スマホの写真やWEBサイトなどでよく使われている画像フォーマットですので、普段何気なく見ている画像はこの形式が多いと思います。
SVGは、その名の通り、ベクター形式で画像を表現します。点とそれをつなぐ線、色などを数値データとして記録し、それを再現することで画像を描画します。描画された画像は、データ量が抑えられ、軽量で拡大や縮小がしやすく、ロゴやイラストなどで使われています。
SVGは、W3C（World Wide Web Consortium）という非営利団体で規格化されており、WEBの世界における標準形式として勧告されています。多くのブラウザはSVGを標準でサポートしており、実装の違いはありますが著名なブラウザで表示が可能です。
また、SVGは、静止画だけでなくアニメーション要素を取り入れ、動きのある画像の表現が可能となっており、最近、このアニメーションを使った画像の作成を始めましたので、順に紹介していきたいと思います。

この記事では、「SVG」と「SVG画像」の２つの表記をしています。
「SVG」は画像のフォーマットそのもの、「SVG画像」はSVGの規格に沿って作成された画像を指す意味で使用しています。

SVG画像の作り方

SVG画像は、簡単なものであれば、テキストエディタを使って、ほんの２、３分あれば作成できますので、皆さんもぜひ挑戦してみてください。
以下は、円をSVGで表現した例になります。

「Run Pen」をクリックすると赤枠で青色の円が表示されます。
この円は、ブラウザがSVGソースコードを解釈して描画しています。元のソースコードは、HTML（XML）という言語で記述されています。
下の「HTML」ボタンを押すと、コードが確認できます。

通常、画像を描くには、専用の画像ソフトを使って描きますが、SVG画像は、単純なものであれば、上記のように画像ソフトを使用せずに描くことができます。
複雑なものや直感的に難しいものは、SVG画像を描く専用アプリを使用します。AdobeのIllustratorを使えば、SVG画像の作成が可能です。
Illustratorは、多くのクリエイターの皆さんがYoutubeなどで紹介していますので、それらを参考に描くのもよいでしょう。

少し複雑な例

以下をご覧ください。
伝統的な和柄である「麻の葉模様」を描いています。
「麻の葉模様」は、アニメ「鬼滅の刃」の竈門禰豆子が纏っている着物の紋様に採用されていますので、ご存知の方も多いかと思います。

「Run Pen」をクリックして確認してみてください。「麻の葉模様」が表示されるかと思います。

このような画像になると、さすがにテキストエディタでは無理なので、専用アプリを使用します。この例では、iPad版のIllustratorを使いました。
SVGとSVG画像について少しはご理解いただけたでしょうか。

次回からは、少し複雑なSVG画像やアニメーションについて書いていきたいと思います。

では、またよろしくお願いいたします。