vol.1】SVGとは・viewPortとviewBox・基本の書き方・埋め込み方法SVGこれまでSVGに関しては、アイコンやロゴをpngやgifなどのビットマップ画像の代わりに少し使う程度で、アニメーションに関してもCSSアニメーションやJavaScriptのDOMアニメーションで事足りていました。SVGのことをちゃんと知ってマイクロインタラクションとして使えるようになりたいと思ったので基礎から勉強します。Graphics)は、XMLをベースとしたベクターグラフィックス用の画像フォーマットです。XMLそのものなので、画像フォーマットであり、かつテキストファイルでもあります。JPEGやPNGなどのビットマップ画像とは全く異なる性質を持っています。ベクターグラフィックスであるSVGは、Webで使える唯一の正式な仕様を持ったベクター形式の画像フォーマットです。ベクター形式のため、拡大・縮小をしても画像が荒れることがないため、マルチデバイス向けのサイト制作において重宝できます。XMLであるXMLであるため下記のメリットがあります。画像内にアクセシビリティの担保が可能コードであるため、Git管理が可能SVGという名前の「Scalable」の通り「拡張性の高い」画像フォーマットです。etc上記の通り、PCであればIE9以上、SPであればandroid3以上であれば基本的に使えます。SVGファイルを適切にスケーリングしません。指定が必要となります。...</svg>XML宣言このドキュメントがXML文書であることを示しています。いう条件を満たしていれば省略可能です。Illustratorやsketchから書き出したSVGもこの条件に当てはまるため、この宣言を省略できます。DOCTYPE宣言バージョンやタグのルールなどが示されていて、バリデーションのために記述します。Editionでは省略可能です。要素の配下でSVG固有のタグが利用できるようになります。要素として使うことができます。URLですが、ただの識別子の文字列です。URLの参照先自体には意味はありません。URLは1つの場所しか示さないので、ID(名字)として利用されているのが慣習のようです。このネームスペースをタイプミスしてしまうとSVGではない別の言語として解釈されてしまうので注意が必要です。属性を使う場合に必要な宣言です。onclick属性などのイベント属性で必要な宣言です。宣言しておくと良いですが、HTML5でインラインSVG(後述)の場合は両方とも省略することが可能です。viewPortとviewBoxsvgには「viewPort」と「viewBox」という概念があります。