I have been noticed this a lot recently, my SVG graphics looks like scaled up PNGs. This only happens when using the “CSS left/top” feature at least so far its the only one that caused that.
This also affect fonts, which to my knowledge, those should be scaled like vectors too. The “pixelation” is even worst if you zoom out the page.
While Im aware CSS left/top its not by default and I understand its an old solution, for some reason I get better performance in some mobile devices when its enabled, so I find my self using it in some sites.
(Interestingly I don’t see this… are you on a non-retina display and which Safari/macOS version are you using?)
Regardless, I would expect it. You’re using “zoom contents” for the flexible layout option, presumably because otherwise the SVGs would not scale at all since only their bounding contents change size. Zoom contents uses CSS Transform’s scale method. When using a 3D transform, it puts the image at its current size on the graphics card as a texture, and then will resize it as an image with interpolation instead of re-rendering. Non-3D elements get re-rendered for their scaled size and will look sharp.
Now the fun fact is Hype typically will use 3D rendering for all elements as a performance enhancement (when the default 'Use WebKit graphics acceleration is on), but if it detects that you are trying to use zoom scaling or the scale option, then it will disable for those elements. This causes it to go down the re-render path and it can make text (and SVGs) smooth. (Not to insult a dead person, but Edge Animate always used the 3D performance trick so these would always be blurry with its output, whereas I took pride in being able to solve this for a lot of cases with Hype .)
On mobile, you may want to try setting the viewport width (in the document inspector) to ‘device width’ and see if that makes it a little better. There’s three scalings going on:
The webpage itself is being scaled based on the viewport settings
The Libera animation element has a 170% scale on it
Symbol 9 has a scale animation (though this may not play into the final result)
It might also help if you can remove the scale on #2 and have the SVG size itself be different before importing.
.)