Line width not handled properly by some browsers

[idontgetoutmuch]

{-# LANGUAGE NoMonomorphismRestriction #-}

import Diagrams.Prelude
import Diagrams.Backend.SVG.CmdLine

illustrateBezier c0 c1 c2 c3 x2 x3
    = endpt  # translate x3
    <> l3a
    <> fromSegments [bezier3 c3 c0 x3, bezier3 c1 c2 x2]
  where
    dashed  = dashing [0.1,0.1] 0
    endpt   = circle 0.05 # fc red  # lw 0
    l3a     = fromOffsets [r2 (1, 2)] # translate (r2 (1, 1)) # dashed

x2      = r2 (3,-1) :: R2         -- endpoint
x3      = r2 (1, 1) :: R2         -- endpoint
[c0,c1,c2,c3,c4] = map r2 [(-1, -3), (1,2), (2,0), (-3,0), (-1, -2)]   -- control points

example = illustrateBezier c0 c1 c2 (-c2) x2 x3

main = defaultMain example

Replacing SVG.CmdLine by Cairo.CmdLine produces what I would expect but SVG gives extremely wide lines as you can see in the diagrams.

[idontgetoutmuch]

See https://gist.github.com/idontgetoutmuch/5999897 for the actual svg generated for both the above diagrams.

[byorgey]

What precise software (+ version) are you using to view the generated SVGs? When I view them with Firefox 20 they look identical.

The biggest difference I can see between the two files (other than minor differences of formatting, rounding, etc.) is that the Cairo version includes stroke attributes and transformations as attributes of the path nodes, whereas the SVG version wraps the path nodes in <g transform=...><g stroke=... stroke-opacity=... ...>.

e01971a looks relevant.

[co-dan]

I can confirm that I see the difference (just like in the picture @idontgetoutmuch attached) using Safari 6.0.5,
there is no noticeable visual difference in Firefox though

[idontgetoutmuch]

I concur. It looks ok in firefox but not in safari or in toyviewer. From the toyviewer help:

Can't display correctly some SVG images. (The current version of WebKit does not support all variations of SVG images)

So maybe this is a "feature" of WebKit. Is it possible to get diagrams-svg to work round this infelicity or do we just say "tough - you should use a browser that supports SVG correctly"?

Dominic Steinitz
dominic@steinitz.org
http://idontgetoutmuch.wordpress.com

On 15 Jul 2013, at 16:48, Dan notifications@github.com wrote:

I can confirm that I see the difference (just like in the picture @idontgetoutmuch attached) using Safari 6.0.5,
there is no noticeable visual difference in Firefox though

—
Reply to this email directly or view it on GitHub.

[byorgey]

I'd certainly like to figure out a way to work around it if possible. And it should be possible since cairo has it figured out --- my comment above re: the difference between the Cairo SVG output and the diagrams-svg output may point us in the right direction.

See also #24.

[dougalstanton]

Also having this issue, Safari 6.0.5. I was using the fibonacci example from the gallery. If I scaled the diagram before writing it out I could get the result I wanted.

This works:

example = pad 1.1 . lw 0.01 . centerXY . scale 100

but this doesn't:

example = pad 1.1 . lw 0.01 . centerXY

[byorgey]

Thanks for the report. Marking this bug for the 1.0 milestone, we're doing some reworking of the SVG backend anyway, so maybe we can include a fix/workaround for this.

[byorgey]

Also, @dougalstanton, nice to see you using diagrams again/(still?)! Dougal helped out with the---was it 0.3?---release. The last release before the complete rewrite. I'm not sure if any of your code is still in there but we are still using colour!

[jeffreyrosenbluth]

I'm closing this issue since I can not reproduce the bug in any browser.
I believe it was fixed by the introduction of the units branch and removal of freeze.