SVGの基礎。導入

SVGとは、Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）の略で、数学の式を使用して画像を定義するXMLベースのマークアップ言語です。これにより、SVGはアイコン、ロゴ、線画に最適で、画像の品質を失うことなくサイズを変更でき、ファイルサイズも小さくなります。SVG画像は、色やアニメーションなどのプレゼンテーションを変更するためにCSSでターゲットにできます。WebページにSVG画像を表示する方法は、いくつかあります。直接埋め込む、img要素、object要素、またはiframe要素を使用するなどです。各方法には、キャッシュやJavaScript操作などの利点と制限があります。SVGコードは、XML言語の規則に従います。規則には、大文字と小文字の区別、閉じタグ、引用符内の属性値などがあります。SVG画像の構造には、ルート要素、viewBox、defs要素が含まれます。defs要素は、後で参照されるスタイルまたは要素を定義します。viewBoxは、抽象単位で描画領域を定義し、幅と高さはsvgタグ内で設定できます。defs要素には、スタイル要素、形状、グラデーション、シンボルなどを含めることができ、後でコード内で参照できます。最後に、path、circle、rect、line、ellipse、polygonなどの実際の描画要素を使用して、画像を作成します。