---
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: 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
## Solution
```js
// solution required
```