Basic Shapes in SVG

It is time to dig into some code. We are going to learn how to create an SVG image. There are two ways we can create an SVG image. We can create a separate file for SVG images or create an SVG image inside an HTML document.

We are going to focus on adding SVG to our HTML documents. Unfortunately, the browser will limit some of the features of SVG if we try working with SVG files necessary for D3. It is much easier to work with SVG images in an HTML document.

Creating an SVG image

If you are working in a separate editor, create a plain HTML file with the following contents: