[BoorishBears]

Funny you say this, I spent a good 5+ hours yesterday trying to get an SVG of a UI mockup to render properly on Safari before giving up and implementing it in HTML.

What was especially annoying was that different representations of the exact same SVG would behave differently (inline-svg vs img+src vs object)

[klabb3]

SVG has… weirdnesses. I couldn’t say exactly what they are. But it feels like an older format from an XML-centric era. It also feels fairy lax on “optional features” and ambiguous spec (although I’m not sure this is true). There are noticeable differences between different rendering engines.

Most of drawing works fine as markup. However, animations and simple state changes are awful. CSS is much easier to use for some of those purposes.

I’d very much forgive SVG for its clunkiness, after all it’s old yet very powerful today. It’s a prime candidate for a revamp.

[chefandy]

Noticable differences between rendering engines for what? Sometimes type can be janky, but no moreso than in html/css, and in SVG you're generally turning type into vector outlines. For graphics rendering, it's completely accurate in any environment I've used it in, and that's working with very very fussy brands.

[BoorishBears]

I mean I'd say this is pretty noticeable: https://imgur.com/e6TbXFj

Same screen, same zoom levels. Viewbox properly set, height/width set, confirmed compliant units. Switching between img/object would get it unblurry but then lose the embedded image data. Switching to inline-svg would in turn get the image data working but the drop shadow was completely broken.

[chefandy]

Yes-- filters and type aren't super consistent. I wouldn't rely on SVG to use either of them for significant elements.

[klabb3]

I don’t recall exactly. Filters or blending modes probably.

[chefandy]

How was it made?

[BoorishBears]

Figma, and I got to the point of running it through SVGO and hand patching any constructs that had known issues with Safari.

Going based off the types of bugs I was seeing alone I wouldn't trust SVGs for anything but the most basic shapes.

[chefandy]

Quickly rifling through a the sites of some huge extremely valuable brands, Apple, Coca Cola, Walmart, Target, and Toyota all use SVG for their logos. SVG is not the right choice to lay out documents. It's not a replacement for PDF. It's a perfect choice for creating discrete vector graphics.