Bug 248222 - Not all consecutively centered SVGs are grid fitted
Summary: Not all consecutively centered SVGs are grid fitted
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: Safari 16
Hardware: Unspecified macOS 13
: P2 Normal
Assignee: Nobody
Keywords: BrowserCompat, InRadar
Depends on:
Reported: 2022-11-22 06:29 PST by tobfa
Modified: 2022-11-28 23:44 PST (History)
6 users (show)

See Also:

Comparison SVG grid fitting (14.85 KB, image/png)
2022-11-22 06:29 PST, tobfa
no flags Details
striped 4px pattern (1.07 KB, image/svg+xml)
2022-11-22 06:30 PST, tobfa
no flags Details
striped 5px pattern (1.26 KB, image/svg+xml)
2022-11-22 06:30 PST, tobfa
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description tobfa 2022-11-22 06:29:37 PST
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.]), where the Firefox output is the preferred behavior. 
<!DOCTYPE html>
  <body style="text-align: center;">
    <div style="height: 8px;">
      <img src="lines_4.svg" />
    <div style="height: 8px;">
      <img src="lines_5.svg" />
Comment 1 tobfa 2022-11-22 06:30:17 PST
Created attachment 463664 [details]
striped 4px pattern
Comment 2 tobfa 2022-11-22 06:30:45 PST
Created attachment 463665 [details]
striped 5px pattern
Comment 3 Radar WebKit Bug Importer 2022-11-28 11:16:59 PST
Comment 4 tobfa 2022-11-28 23:44:18 PST
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;">