SVG line drawing issues

[rawlins]

It is notoriously challenging to get crisp thin lines in svg, and some aspects of svgling run up against this problem. Issues arise when lines are positioned across physical pixels relative to the display resolution, and in my testing it is extremely hard to avoid this in a general way (SVG makes no real provision for snapping a picture to pixel space). On hidpi screens this is basically not an issue, but it shows up on lower-resolution devices.

Right now, movement lines (and a few other things) have shape-rendering="crispEdges" set, which prevents this, at the cost of causing them to dodge slightly off center relative to the arrowhead. This isn't a generally useful setting, because in addition to forcing pixel alignment, it also will disable antialiasing in all browsers that I've tested, and so anything off 90 degree alignments looks terrible with this setting. This setting doesn't seem to work (at least the way I'm using it) on safari.

I've tried various other hacks with limited success:

• applying a vacuous transform (translate(0) or rotate(360)) is reported to cause snapping to pixels in some browsers, but I haven't had much luck with this.
• offsetting the image by 0.5px works in some browser/screen configurations, but isn't generally applicable. (Some browsers align round values with the lines between pixels, rather than the middles of pixels themselves.)
• changing the opacity or color of lines can help, but it's not a very user-friendly solution.
• early versions of svgling used line thicknesses that were less than 1px (e.g. I was using 0.5pt). These do look better in a lot of cases, but I became unsure how safe they really are to use in general.

Many applications use some browser-sniffing javascript to apply one or more of these tricks as needed. This may be what I'll need to do in the end.