D3.js
Author

(Rocha, 2019, pp. 26-27)

Contexto de gráficos SVG (ventana gráfica)

Al incrustar un SVG en HTML, se crea una ventana gráfica: un contexto gráfico predeterminado similar al creado por Canvas. Para crear la ventana gráfica, basta con añadir una etiqueta <svg/> vacía dentro de <body>. Al ser una etiqueta HTML, se puede aplicar estilo con CSS HTML estándar y configurar su tamaño mediante los atributos width y height (también se pueden usar propiedades CSS), como se indica a continuación:

<style>
    svg {
        border: solid 1px lightgray;
        background-color: hsla(240, 100%, 50%, 0.2)
    }
</style>
<body>
    <h2>Ventana gráfica SVG</h2>
    <svg width="600" height="300"></svg>
</body>

La siguiente captura de pantalla muestra el resultado del código anterior y el sistema de coordenadas predeterminado que utiliza SVG, que comienza en la esquina superior izquierda de la ventana gráfica. Puede cambiar la escala de orientación y otros aspectos del sistema de coordenadas configurando el atributo viewBox (véase el final de esta sección).

Ventana gráfica SVG

También puedes crear un elemento SVG usando la API DOM o D3, lo cual es mucho más sencillo. El resultado es idéntico. (ver SVG-with-D3/1-viewport.html):

<body>
    <script>
        d3.select("body") .append("svg") .attr("width", 400) .attr("height", 300);
    </script>
</body>