SVGを成り立ちから理解する！

はじめに

SVGについて、「サイズ気にせず綺麗に見えるやつ」ぐらいの理解しかなかったことに反省したので、SVGについてまとめます...！

SVGとは？

MDNでは以下のように説明されています。

スケーラブルベクターグラフィック (SVG) は XML ベースのマークアップ言語で、二次元ベースのベクターグラフィックを記述します。

• SVG：スケーラブルベクターグラフィック
  • XMLベースのマークアップ言語
    • マークアップ言語：目印で囲んで構造を表現する書き方
  • 二次元ベースのベクターグラフィック

「スケーラブルベクターグラフィック」というワードから、当初の理解であった「サイズ気にせず綺麗に見えるやつ」は大きく間違っていなさそうです。

「XML」「ベクターグラフィック」について、さらに深掘ります。

XML

• マークアップ言語の一つ
  • HTMLなどの仲間
• eXtensible Markup Language の略
  • extensible：伸張性、柔軟性のある
• データをやり取りや設定ファイル書くときなど、色々な用途で使われる

XMLの特徴

• 使用するタグがあらかじめ定義されていない
  • 自分でタグを定義する
• XML構文ルールを全て守らないといけない
• XMLのデータの形は世界共通のルールで決まっている
  • 違うシステムやソフトで、インターネットなどでデータをやり取りする際に、データの解釈に誤りが生じない
• XMLに基づいた言語はたくさんあり、独自のものも定義できる

ベクターグラフィック

ベクターグラフィックス制作ソフトウェア「CorelDRAW」開発元が運営するメディアでは、簡潔に以下のように説明されています。

ベクターグラフィックスとは、数式を使用して拡張性を持たせたデジタル画像です。

ベクターグラフィックの特徴

• ファイルサイズが小さい
• 拡張性に優れている
• 数学的

ベクターグラフィックの歴史

ベクターグラフィックの開発が始まる

• 初期のコンピューターモデルは、メモリが限られていて複雑な画像は表示できなかった
  • 解決策として、ベクターグラフィックの開発が始まった
• グラフィックソフトウェア Sketchpad 開発
  • コンピューターグラフィックが技術的だけでなく、芸術的な用途にも使える可能性が見えた
  • ベクトルはまだ単純な直線に限定されていた

ベジェ曲線、爆誕

• 同じころ、フランスのピエール・ベジェが「曲線に比例して拡大縮小する方法」を考案した

ベジェ曲線
・制御点を使用して曲線の形状を定義する
・サイズ変化によらず、全点の比率を維持する数式で制御されている
・完全に拡大縮小可能な画像が作成できる！

ベクターグラフィックの進化

• ベクターグラフィックが広まり、進化する
  • 複雑になる
  • より小さなファイルサイズで詳細な情報が提供できるようになる
• ビデオゲーム業界で採用されるようになる
• ベクターグラフィックの人気が高まり、ファイルの種類も増えた

ベクターグラフィックの標準ファイル形式が策定される

• 1999年、W3Cはベクターグラフィックスの標準ファイル形式であるSVG(スケーラブルベクターグラフィック)を策定した

改めて、SVGとは？

SVG（スケーラブルベクターグラフィック）

• 柔軟性があり、データの解釈に誤りが生じない書き方をされている
• 様々な描画を数式で制御することで、完全に拡大縮小が可能
• 詳細な描画を小さいデータサイズでできる

おまけ

描画する際に使うタグのメモ

描画されるもの	タグ
直線	<line x1= y1= x2= y2= ...>
長方形	<rect x= y= width= height= ...>
多角形	<polygon points= ...>
円	<circle cx= cy= r= ...>
パス	<path d= ...>

まとめ

SVGについて、以前よりかなり理解が深まりました！
普段当たり前に使っていても、ちゃんと理解していないものがたくさんありそう...
都度調べることを意識します

Illustrator等のデータを、SVGに書き出して実装で使っていたので、直でもSVGを描画できるように勉強します！
クリスマスツリーを作ってみる

参考