SVG

SVG

SVGのビューポートとビューボックスの関係を理解する

SVGを使う上で最初に躓く(かもしれない) ビューポート (viewport) とビューボックス (viewBox) の関係について解説します。ビューポートとビューボックスを実際に定義してその結果を確認できる可視化ツールも提供しています。
SVG

SVG要素の分類について

SVG (Scalable Vector Graphics) 仕様書に定義されている要素のカテゴリを分かりやすいように図式化してみました。
SVG

SVGとマウスイベントの処理について

Webブラウザ上でのScalable Vector Graphics (SVG) のマウスイベントの処理について解説します。<use>, <symbol>, <marker>といったのHTMLには無い位置付けの要素について注意点をまとめました。