This is good for simple SVGs, or cases where you will have many variations.

But when you online SVG code, the browser can't cache the image. So if the SVGs are larger, or have only a few variations, you may prefer to have a separate endpoint for each image variant.

https://chat.openai.com/share/49e91be6-bdef-4f4d-a263-80a884...

Yeah, I've seen React pages where a tiny icon (like a little star) is inlined a hundred times on the same page. That's a lot of extra bytes :(

At least if they're in the same JSX component, the server can gzip that SVG string so it's not as big over the wire. But if the same icon gets used in different pages, the costs multiply.

It's nice to have the OPTION of treating SVG as code when you want it to be code, but otherwise, it's better for the user to treat it as a graphic and let the usual caching mechanisms (server+browser) do their jobs.

Yep! As always, there’s both pros and cons to a programming approach and a necessity to understand them.

Yes, since HTML5 you can inline an SVG. You don't need Webpack or anything like that, it just works.

One of the examples in this tutorial is also a data-driven diagram generated from React. You can do pretty cool things by combining the two.