Basic elements

We can draw elements in our <svg> element by adding a variety of predefined tags as child elements of the <svg>. This is just as we did in HTML, where we add <div>, <a>, and <img> tags inside the <body> tag. There are many tags, such as <circle>, <rect>, and <line>, that we'll explore in a bit. Here's just one example:

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
    </head>
    <body>
        <svg>
            <circle></circle>
        </svg>
    </body>
</html>

Note that we can't see the circle because it doesn't have a radius, as shown in this screenshot:

We'll talk more about this later, but, for now, if we want to see the circle, we can add a special attribute ...

Get D3.js Quick Start Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.