What would you want from a high-level SVG wrapper package?

Request Feedback
13

So I had a dig through some code I haven’t touched in a while. Since then I moved from a 24 inch 1080p screen to a 34 inch 4k screen - which by itself really helps to arrive at crisper looking drawings.

There is not much particularly useful in the code I was using, but I’ll mention a few bits that made a difference.

I am setting up the svg element like this:

<svg preserveAspectRatio="xMidYMid meet" viewBox="-112 233 1268 726" shape-rendering="geometricPrecision">

With this Elm code:

svg
    ([ preserveAspectRatio (Align ScaleMid ScaleMid) Meet
     , viewBox (round current.x |> toFloat)
        (round current.y |> toFloat)
        (round current.w |> toFloat)
        (round current.h |> toFloat)
     , svgNamespace
     , shapeRendering RenderGeometricPrecision
     ])

The current view area was obtained at application start through Browser.Dom.getViewport. After that it can be scrolled with the mouse, and all I am doing is rounding it to integers to ensure the SVG viewport remains pixel aligned.

geometricPrecision looks best to me after trying out the alternatives - even though crispEdges sounds like it might be a better choice, it usually isn’t.

Interestingly on my 4k screen the browser gets a window.devicePixelRatio of 1.5. So the 2 pixel wide lines that looked perfect on my old screen are now being drawn at 3 physical pixels wide, and suffer from being non-aligned to pixels as a result. Doesn’t really look too bad on a 4k screen, but I know that if I get it bang on the pixels the image will have more ‘pop’. Magnified image of what I currently get:

aliasing

===

Its hard to see how a higher level drawing library can automatically solve this kind of thing. I think the suggestions you made above could all be useful and it is really horizontal and vertical lines where it is best applied.

Some help with setting up the SVG viewport to match pixels, taking into account the on screen size in browser pixels and also the device pixel ratio could be useful too. I think if I multiply the SVG viewport size by 1.5, I should get back to 1:1 with physical pixels. Of course I then need to scale up my drawings by 1.5 so they come out roughly the same size on the higher density display.