---
id: 587d7fa8367417b2b2512bcb
title: Learn About SVG in D3
required:
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
challengeType: 6
videoUrl: ''
localeTitle: Aprende sobre SVG en D3
---
## Description
SVG significa Scalable Vector Graphics
. Aquí "escalable" significa que, si acerca o aleja un objeto, no aparecerá pixelado. Escala con el sistema de pantalla, ya sea en una pequeña pantalla móvil o en un gran monitor de TV. SVG se utiliza para hacer formas geométricas comunes. Dado que D3 mapea los datos en una representación visual, utiliza SVG para crear las formas para la visualización. Las formas SVG para una página web deben ir dentro de una etiqueta svg
HTML. CSS puede ser escalable cuando los estilos usan unidades relativas (como vh
, vw
o porcentajes), pero usar SVG es más flexible para crear visualizaciones de datos.
## Instructions
Agregue un nodo svg
al body
usando append()
. Asígnele un atributo de width
establecido en la constante w
proporcionada y un atributo de height
establecido en la constante h
proporcionada utilizando el método attr()
para cada uno. Lo verás en la salida porque hay un background-color
de background-color
rosa aplicado en la etiqueta de style
. Nota
Los atributos de ancho y alto no tienen unidades. Este es el componente básico de la escala: el elemento siempre tendrá una relación de ancho a altura de 5: 1, independientemente del nivel de zoom.
## Tests
```yml
tests:
- text: Su documento debe tener 1 elemento svg
.
testString: 'assert($("svg").length == 1, "Your document should have 1 svg
element.");'
- text: El elemento svg
debe tener un atributo de width
establecido en 500.
testString: 'assert($("svg").attr("width") == "500", "The svg
element should have a width
attribute set to 500.");'
- text: El elemento svg
debe tener un atributo de height
establecido en 100.
testString: 'assert($("svg").attr("height") == "100", "The svg
element should have a height
attribute set to 100.");'
```
## Challenge Seed
## Solution
```js
// solution required
```