Introduction to svg

At its core, a graph is just a bunch of shapes such as circles, rectangles, and lines displayed on a screen. Using standard HTML elements to draw these shapes would be cumbersome and limiting.

Fortunately, there's a more efficient solution: SVG. SVG is a versatile and widely-used technology that allows us to draw shapes in the browser with precision and ease.

Members only

5 minutes read

🤔 What is SVG

Scalable Vector Graphics (SVG) is an XML-based format for vector graphics. Unlike raster graphics which are made up of pixels, SVG uses vector data (points, lines, and curves) to create images. This means SVG images are resolution-independent and can scale up or down without losing quality.

Anatomy of a React app with a graph built in a svg area.

👶 Simplest example

Here is a very simple React app that uses SVG to render a circle:

A React component called App is defined in a file called App.js. You should be used to it with Vite and the Module B!

It renders an SVG area thanks to a <svg> HTML element with a width and height.

In this SVG area, a <circle> is drawn. cx and cy set the position of the circle, and r sets its radius.

export default function App() {
  return (
    <svg width={500} height={300}>
      <circle cx="50" cy="50" r="40" stroke="black" fill="red" />
    </svg>
  );
}

Open Sandbox

Awesome! With just a few more circles like this, we'll have a complete scatterplot!

Oh no! 😱

It seems like you haven't enrolled in the course yet!

Join many other students today and learn how to create bespoke, interactive graphs with d3.js and React!

Enrollment is currently closed. Join the waitlist to be notified when doors reopen:

Or Login

← Previous

Project

Main SVG elements