I'm a big fan of using SVG graphics. While simple vector graphics provide a fast load time throughout applications and websites, detailed vectors need to be looked at closer rather than assuming a vector is a better choice than a png, jpg, or webP.

Currently, I'm working on the design and development of a website for a Cyber Security company. The frontend is built on Gatsby and the backend on Sanity. Whenever possible I'll be using SVG graphics. Many will have alternate versions based on whether the site is in light or dark mode.

Prior to getting too far into the project planning, I thought it'd be a good idea to test how vectors with a lot of points would load in regards to optimization and page speed using Gatsby + Sanity. I was very pleasantly surprised with the results.

The above image has 17k Points and about 800kb in size. It doesn't trigger any lighthouse pagespeed errors and loads quickly on all devices I've tested it on. Dark mode works as well! Game on.