--- id: 587d7fa8367417b2b2512bcb title: Learn About SVG in D3 challengeType: 6 videoUrl: '' localeTitle: Узнайте о SVG в D3 --- ## Description
SVG означает Scalable Vector Graphics . Здесь «масштабируемый» означает, что если вы увеличиваете или уменьшаете масштаб объекта, он не будет отображаться в пикселях. Он масштабируется с помощью системы отображения, будь то на маленьком мобильном экране или большом ТВ-мониторе. SVG используется для создания общих геометрических фигур. Поскольку D3 отображает данные в визуальное представление, он использует SVG для создания фигур для визуализации. Формы SVG для веб-страницы должны svg теге HTML svg . CSS может быть масштабируемым, когда стили используют относительные единицы (например, vh , vw или проценты), но использование SVG более гибко для создания визуализации данных.
## Instructions
Добавьте узел svg в body используя append() . Дайте ему атрибут width установленный для предоставленного w константы, и атрибут height установленный для предоставленной постоянной h используя метод attr() для каждого. Вы увидите его на выходе, потому что в теге style используется background-color розового background-color . Заметка
Атрибуты ширины и высоты не имеют единиц. Это строительный блок масштабирования - элемент всегда будет иметь соотношение ширины и высоты 5: 1, независимо от уровня масштабирования.
## Tests
```yml tests: - text: В вашем документе должен быть 1 элемент svg . testString: 'assert($("svg").length == 1, "Your document should have 1 svg element.");' - text: Элемент svg должен иметь атрибут width равный 500. testString: 'assert($("svg").attr("width") == "500", "The svg element should have a width attribute set to 500.");' - text: Элемент svg должен иметь атрибут height равный 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 ```