SVG stands for Scalable Vector Graphics. It is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. It is used to create images and diagrams on the web, often in combination with HTML, CSS and JavaScript. SVG images are resolution independent, meaning they look great on any screen size or resolution.
React Summit 2020React Summit 2020
32 min
The Language of Shapes: Understanding the SVG Path
The benefits of SVG are vast: style-able, accessible, animatable. And when it comes to SVG, the Path element is the building block of building blocks. During this presentation, we’ll take a deep dive into the language of the SVG path. Not only will we learn to read path data, but we'll also gain the ability to manipulate paths on the fly with the help of React - no Adobe Illustrator or help from a time-strapped designer necessary!
React Summit Remote Edition 2021React Summit Remote Edition 2021
36 min
SVGs to Make Your Blog Stand Out
Are dev blogs dying out? No, they're not! Blogs are making a comeback. But sadly, most of them are lacking personal style. So, what can developers do to make their blogs unique and prettier? In this talk, I’ll show you how SVGs (as React Components) can help you take your blog from dull to awesome.
React Summit Remote Edition 2021React Summit Remote Edition 2021
15 min
Graphics, as a Function of State / Graphic = fn(state)
Applying the React principle of “UI is a function of state” to SVGs and Graphic Design. We will talk about using systems of componentization and state management to create and manage SVGs. Viewers will leave the session with a firm understanding of creative coding practices and a new viewpoint for building systems in JavaScript.