Why are svg icons cut off in Safari?

Question

css

Good evening Khabrovites.
I began to notice that svg-icons in Safari have a "habit" to be cut off on the right and bottom. While on Android and Windows (including screens with increased DPI) in Chrome (and others from the family) and Firefox browsers, everything looks correct.
Moreover, this does not happen every time (I mean that if you place 2 identical pictures side by side, then only one of them can be cut off). Yes, the icons have a 512x512px viewbox, but they are rendered at a small scale (20x20px). But the problem is only in Safari.
Perhaps one of you has faced the situation and overcame it. Please share your ideas.

(if the picture is not immediately noticeable, then open it in a separate tab at 100% scale)

Answer 1

I googled for a long time on this topic, including in English. For some reason, there is no information.
It was useful to see how svg icons are implemented on large sites. And on absolutely all major sites, icons are designed in such a way that they have a small gap relative to the edges of the viewBox. These icons are also designed, for example https://heroicons.com/ .
As for solving my problem, I did not redraw all the icons, but simply corrected the viewbox. The icons in my project are motley and pixel perfect is not that important. The principle is this: the viewbox, as we know, describes the coordinates of the upper left and lower right crop points. There are 4 numbers in total, like: "0 0 512 512". Let's increase the viewport by 5-10% (or half the thickness of the lines in the icon). For example, the icon with viewbox="0 0 100 100"setviewbox="-10 -10 120 120"(i.e. added 10 units from each edge). By doing this, we will, as it were, reduce the scale of the icon within the viewbox, moving the edges of the picture away from the edges of the viewbox.
And the problem is solved! Hope it's useful to someone else.

Answer 2

object fit? Plus, keep in mind safari disproportionately scales pictures, so if you specify one dimension, set the second as auto