--- id: 587d7fa8367417b2b2512bcb title: Learn About SVG in D3 challengeType: 6 videoUrl: '' localeTitle: Aprenda sobre o SVG no D3 --- ## Description
SVG significa Scalable Vector Graphics . Aqui, "escalável" significa que, se você aumentar ou diminuir o zoom em um objeto, ele não aparecerá pixelizado. Ele é escalável com o sistema de exibição, seja em uma pequena tela móvel ou em um grande monitor de TV. O SVG é usado para fazer formas geométricas comuns. Como o D3 mapeia dados em uma representação visual, ele usa SVG para criar as formas para a visualização. Formas SVG para uma página da web devem ir dentro de uma tag svg HTML. O CSS pode ser escalonável quando os estilos usam unidades relativas (como vh , vw ou porcentagens), mas o uso de SVG é mais flexível para criar visualizações de dados.
## Instructions
Adicione um nó svg ao body usando append() . Dê a ele um atributo de width definido para a constante w fornecida e um atributo height definido para a constante h fornecida usando o método attr() para cada um. Você verá na saída porque há uma background-color de fundo rosa aplicada a ela na tag de style . Nota
Os atributos de largura e altura não possuem unidades. Este é o bloco de construção do escalonamento - o elemento sempre terá uma relação largura / altura de 5: 1, independentemente do nível de zoom.
## Tests
```yml tests: - text: Seu documento deve ter um elemento svg . testString: 'assert($("svg").length == 1, "Your document should have 1 svg element.");' - text: O elemento svg deve ter um atributo de width definido como 500. testString: 'assert($("svg").attr("width") == "500", "The svg element should have a width attribute set to 500.");' - text: O elemento svg deve ter um atributo height definido como 100. testString: 'assert($("svg").attr("height") == "100", "The svg element should have a height attribute set to 100.");' ```
## Challenge Seed
```html ```
## Solution
```js // solution required ```