Basic Shapes in SVG

Learn how to create 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:

Get hands-on with 1200+ tech skills courses.