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

4 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.

Most simple example

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

A react component called SvgCircle is defined in a file called SvgCircle.tsx.
It renders an SVG area thank to a <svg> HTML element. It has some width and height
In this SVG area, a <circle> is drawn. cx and cy set the position of the circle. r its radius.

Loading sandbox...

Awesome!

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

Note: The coordinate system of SVG starts at the top-left corner, where the origin point (0,0) is located.

Oh no! 😱

This lesson isn’t available just yet.

Take a look at the status badges next to each lesson in the sidebar to see when it’s coming out.

Thanks for your patience! 🙏

← Previous

Initial setup

Main SVG elements