Efficient Data Visualisation with React and SVG

This talk is confirmed. The time of the talk will be announced soon.

The recording will be published after editing. Multipass and Full ticket holders have early access.

See how far simple charts in React and SVG can take you, and where their limits start to surface. We'll explore the sweet spot of using React's declarative model with plain SVG elements and a touch of D3 for utility functions like scaling and path generation, before reaching the performance and complexity ceilings that call for something more robust.

This talk has been presented at React Summit 2025, check out the latest edition of this React Conference.

svg

Ido Moshe

Video transcription, chapters and summary will be available later.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

SVGs to Make Your Blog Stand Out

React Summit Remote Edition 2021

36 min

SVGs to Make Your Blog Stand Out

Elizabet Oliveira

Xata

Today's Talk is about using SVGs to enhance blog design, including transforming SVGs into JSX, animating elements, and using React Spring for interactivity. The speaker also demonstrates the use of SVGs in SharkUI and showcases an interactive love button. The benefits of using SVGs in React components are discussed, as well as implementing SVGs as responsive components. Performance considerations and the pros and cons of CSS vs SVG are also touched upon.

react svg react components

The Language of Shapes: Understanding the SVG Path

React Summit 2020

32 min

The Language of Shapes: Understanding the SVG Path

Monica Wojciechowska

Netguru

This Talk introduces the SVG Path element, exploring its commands and potential. The speaker simplifies the language of shapes by grouping commands together and finding alternative ways to define arcs. They also present a path editing tool that allows for easy manipulation and visualization of path data. The Talk concludes with discussions on performance, limitations, recommended resources, SVG morphing, and the FlubberJS library for path interpolation.

svg

Hacking an e-Reader to Show My Tea Menu With JSX

React Day Berlin 2023

7 min

Hacking an e-Reader to Show My Tea Menu With JSX

Watch video: Hacking an e-Reader to Show My Tea Menu With JSX

Tiger Oakes

Senior engineer at Microsoft

React can be used to create custom menus for e-readers, and the process involves creating an image and e-book with React and loading them onto the e-reader. Writing an EPUB e-book for e-readers involves converting an SVG file into a PNG image and writing the e-book in EPUB format using HTML, CSS, and images. EPUB generators like Pandoc and Dino simplify the process of generating EPUBs from markdown and running JavaScript on the desktop, respectively.

react svg iot fun demos

Graphics, as a Function of State / Graphic = fn(state)

React Summit Remote Edition 2021

15 min

Graphics, as a Function of State / Graphic = fn(state)

Romello Goodman

New York Times

Anil Durman, engineer at the New York Times, discusses the role of graphics in the context of state. He highlights the work done by his team in helping people understand the news through new formats and pages. The team is hiring for various tech roles. By night, Anil is a creative coder exploring the intersection of creativity and code, and his latest project, Good Graphics, focuses on UI as a function of state, React components, and SVGs. He demonstrates how components can be updated based on state, allowing for declarative graphics. Anil also showcases how nested circles and grids can be used to create complex systems in React, enabling dynamic and reactive graphic designs.

react svg