Certain browsers are seemingly not grid-fitting SVG images, resulting in blurry edges which are particularly noticeable for 1px lines; there is no analogous problem with PNG images. Firefox seems to be grid-fitting, while Chrome, Chromium, Edge, and Safari, are presently not. A simple CSS work-around on the figure level is to use display: flex; align-items: center; justify-content: center; flex-direction: column;
See for instance Fig. 23 (Web Access toolbar) and Fig. 24 (Web Access toolbar extra-keys): https://www.cendio.com/resources/docs/tag-devel/html/tlwebaccess_usage.html
Phenomenon reported to Chromium and Webkit: https://bugs.chromium.org/p/chromium/issues/detail?id=1392140 https://bugs.webkit.org/show_bug.cgi?id=248222
For some yet unknown reason, displayed document dimensions in Inkscape do not necessarily transfer to the XML file, but may be off by a tiny margin. For instance, a document width displayed as precisely 100px in Inkscape may save as 99.999997px in the XML file. Some browsers, e.g. Chrome, evidently do not treat this artifact properly and consistently. Making sure these XML parameters are integer numbers facilitates grid fitting in the browser and increases the likelihood that images are rendered sharply.
