From the course: D3.js Essential Training for Data Scientists

Unlock the full course today

Join today to access over 22,700 courses taught by industry experts or purchase this course individually.

Introducing SVG

Introducing SVG - D3.js Tutorial

From the course: D3.js Essential Training for Data Scientists

Start my 1-month free trial

Introducing SVG

“

- [Female Narrator] Remember that we looked at block and inline elements earlier. While during this course, and generally within D3, we treat SVG as a block element, meaning it takes a rectangular space on the page. It's best to think of SVG as a blank canvas for us to draw on. On the left, in the text editor, we're showing SVG tags. SVG stands for scalable vector graphic, which I'll explain shortly. An SVG is always the first and largest element of any D3 graphic. You can't have a D3 graphic without an SVG container to put it in. The SVG can sit directly within the body tags or within another element such as a div. It's quite un-fussy about where it sits, but it is very fussy about what goes inside it. You can't put a div or table or paragraph inside an SVG, for example. It's not a normal HTML element. An SVG is a graphical element, and it can only contain graphical items, such as rectangles, lines, and circles. SVG can contain text too, but not within a paragraph element. D3 adds…

Contents