サンプルコードで学ぶ SVGの読み方、書き方 (1/2)

SVGの概要から基本的な使い方、Web制作での活用方法までをじっくり解説する本連載。前回はSVGができることをおおまかに解説しました。今回は、SVGの仕様をもとに、SVGの書き方、読み方の基礎を学びます。 SVGを描く、そして書く SVGは画像であり、コードを書かずとも、ツールで描けます。例えば、Adobe IllustratorやInkscape、Sketchなどのドローソフトを使えば、画面の操作のみでSVGファイルを作成できます。 ドローソフトを使って用意したSVGファイルは、HTMLでimg要素、あるいはCSSの背景画像などとして読み込むことで、手軽にWebページの一部として表示できます。 <img src="example.svg" alt="" width="600" height="400"> .example{ background: url( example.svg );

[yayocan]

svg ビューポート　viewport

[s12bt]

viewboxの図わかりやすい

[rikuo]

さすがビューボックス・ビューポートの説明が分かりやすい。path要素のコマンドをx座標,y座標の指定数でなくパラメータの数で示すのはなるほどー、arcコマンドも考慮するとその説明が適切かな。

[tihata]

わかりやすい