<p>I’m thoroughly convinced that SVG unlocks a whole entire world of building interfaces on the web. It might seem daunting to learn SVG at first, but you have a spec that was designed to create shapes and yet, still has elements, like text, links, and aria labels available to you. You can accomplish some of the same effects in CSS, but it’s a little more particular to get positioning just right, especially across viewports and for responsive development. </p>
<p>What’s special about SVG is that all the positioning is based on a coordinate system, a little like the game Battleship. That means deciding where everything goes and how it’s drawn, as well as how it’s relative to each other, can be really straightforward to reason about. CSS positioning is for layout, which is great because you have things that correspond to one another in terms of the flow of the document. This otherwise positive trait is harder to work with if you’re making a component that’s very particular, with overlapping and precisely placed elements. </p>
<p>Truly, once you learn SVG, you can draw anything, and have it scale on any device. Even this very site uses SVG for custom UI elements, such as my avatar, above (meta!). </p>
<p>That little half circle below the author image is just SVG markup. </p>
<p>We won’t cover everything about SVGs in this post (you can learn some of those fundamentals here, here, here and here), but in order to illustrate the possibilities that SVG opens up for UI component development, let’s talk through one particular use case and break down how we would think about building something custom. </p>
<p>The timeline task list component </p>
<p>Recently, I was working on a project with my team at Netlify. We wanted to show the viewer which video in a series of videos in a course they were currently watching. In other words, we wanted to make some sort of thing that’s like a todo list, but shows overall progress as items are completed. (We made a free space-themed learning platform and it’s hella cool. Yes, I said hella.) </p>
<p>Here’s how that looks: </p>
<p>So how would we go about this? I’ll show an example in both Vue and React so that you can see how it might work in both frameworks. </p>
<p>The Vue version </p>
<p>We decided to make the platform in Next.js for dogfooding purposes (i.e. trying out our own Next on Netlify build plugin), but I’m more fluent in Vue so I wrote the initial prototype in Vue and ported it over to React. </p>
<p>Here is the full CodePen demo: </p>
<p>CodePen Embed Fallback </p>
<p>Let’s walk through this code a bit. First off, this is a single file component (SFC), so the template HTML, reactive script, and scoped styles are all encapsulated in this one file. </p>
<p>We’ll store some dummy tasks in data, including whether each task is completed or not. We’ll also make a method we can call on a click directive so that we can toggle whether the state is done or not. </p>
<p>export default {<br />
data() {<br />
return {<br />
tasks: [<br />
{<br />
name: ‘thing’,<br />
done: false<br />
},<br />
// …<br />
]<br />
};<br />
},<br />
methods: {<br />
selectThis(index) {<br />
this.tasks[index].done = !this.tasks[index].done<br />
}<br />
}<br />
}; </p>
<p>Now, what we want to do is create an SVG that has a flexible viewBox depending on the amount of elements. We also want to tell screen readers that this a presentational element and that we will provide a title with a unique id of timeline. (Get more information on creating accessible SVGs.) </p>
<p> timeline element</p>
