Gráficos vectoriales escalables (SVG)

SVG significa Gráficos Vectoriales Escalables. Es un formato de imagen basado en XML que describe gráficos mediante atributos geométricos. A diferencia de HTML5 Canvas, otro estándar para gráficos vectoriales, las primitivas SVG se componen de elementos XML individuales descritos mediante etiquetas y atributos. Además, está basado en objetos y proporciona un DOM que permite aplicar estilos CSS, crear y manipular formas dinámicas, y coordinar transformaciones mediante JavaScript o CSS.

Para controlar elementos SVG con D3 debes comprender la sintaxis y las reglas básicas de SVG, cómo se estructura un documento, cómo se representa cada elemento, los efectos causados ​​por los atributos y estilos, así como las reglas de anidamiento y transformación.

Todo el código utilizado en esta sección está disponible en la carpeta SVG/ del repositorio de GitHub de este capítulo. Puedes ver los resultados simplemente cargando las páginas en tu navegador.