Created attachment 463663 [details] Comparison SVG grid fitting I am dealing with SVG images which may vary in terms of even/uneven whole pixel widths. They should be centered on the page above one another, and the expected result is that whole pixels are preserved, i.e. no color blending rendition. Since some are of even pixel widths, and vice versa, they cannot possible all be perfectly centered, but some should rather be nudged by the browser and aligned whole-pixel with the browser grid. I am attaching two test case SVGs containing a striped 4px and 5px pattern respectively, and the HTML code snippet is written below. Furthermore, I am attaching screenshots taken on a Mac (13.0.1, normal dpi) workstation depicting the output from Firefox (107.0), Google Chrome (107.0.5304.110), and Safari (16.1 [18614.2.9.1.12]), where the Firefox output is the preferred behavior. HTML CODE: ============= <!DOCTYPE html> <html> <body style="text-align: center;"> <div style="height: 8px;"> <img src="lines_4.svg" /> </div> <div style="height: 8px;"> <img src="lines_5.svg" /> </div> </body> </html>
Created attachment 463664 [details] striped 4px pattern
Created attachment 463665 [details] striped 5px pattern
<rdar://problem/102725779>
I should add that you may have to constrain the container to reliably observe the phenomenon, e.g. as in <body style="text-align: center; width: 1000px;">