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.

In this module, we'll explore how SVG works and how it can be harnessed to create dynamic and insightful data visualizations.

Free
4 minutes read

What is SVG

Boring definition 🙈

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.

Personal Definition 🙂

The <svg> tag is an HTML element that you can use directly in your React components. You can draw a variety of shapes using predefined SVG elements like <circle> and <rect>. Many of the graphs and visualizations you see on the web are created using SVG.

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.

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.

You can style SVG

SHow that yu can add a css file and it works. But it has some specificity.

Benefits
Pros

  • Scalability: SVG images maintain their quality at any size, making them ideal for responsive design. Whether viewed on a small mobile screen or a large desktop monitor, SVG graphics look crisp and clear.
  • Interactivity: SVG elements can be styled and animated using CSS and JavaScript, allowing for dynamic and interactive graphics. This makes SVG a powerful tool for creating engaging data visualizations.
  • Accessibility: Text within SVG is searchable and accessible by screen readers. This enhances the accessibility of web content, making it more usable for people with disabilities.
  • Performance: SVG files are often smaller in size compared to raster images, especially for complex graphics. This can lead to faster load times and improved performance of web pages.

Limitations
Cons

While SVG is a powerful tool for creating high-quality, scalable graphics, it does have performance limitations, especially when used for data visualization.

As SVG graphs are defined in the DOM, each shape or element added to an SVG increases the number of DOM nodes. For complex visualizations with a large number of elements, such as detailed scatterplots or large datasets, this can make the DOM very heavy.

As a result, the browser may become slow and unresponsive due to the increased workload of rendering and managing numerous SVG elements. This can lead to performance bottlenecks, particularly on devices with limited processing power or memory.

← Previous

Initial setup

Next →

Main SVG elements