Rendering differences between IE's VML and Firefox's/Chrome's SVG

491 views
Skip to first unread message

Federico Cáceres

unread,
Feb 7, 2011, 8:41:31 AM2/7/11
to raph...@googlegroups.com
Hi guys,

I've been using raphaeljs for a while now and I must say that I'm happy I found it, it's incredibly easy to work on advanced GUI's using raphael and other javascript libraries due to the fact that raphael generates elements in the document's DOM, it's terribly convenient!

One issue I've been having lately though is the rendering differences between the SVG compliant browsers and IE. I'm testing a simple page with Google Chrome, Firefox and Internet Explorer. Just look at this image:


As you can see by the picture's caption, it is a path that I crafted myself, note the shape's strokes appear crisp and sharp on IE, but appear blurry on Google Chrome (and Firefox). If I translate the shape 0.5 pixels in the x and y axis, the effect is reversed, and now IE looks blurry and ugly.

Is there a way to make stoke appearance consistent accross browsers? Should I put some browser detection code and offset all my paths 0.5 pixels down the x and y axis when browsing with SVG browsers? Is there a secret flag that can solve all these problems?

Thank you very much!

Dmitry Baranovskiy

unread,
Feb 8, 2011, 7:31:22 PM2/8/11
to raph...@googlegroups.com
This will be fixed in 2.0

Dont Spam

unread,
Feb 9, 2011, 1:00:24 AM2/9/11
to raph...@googlegroups.com
Yes the path is blurred. 

@Dmitry
When is 2.0 available?


On Wed, Feb 9, 2011 at 6:01 AM, Dmitry Baranovskiy <dmitry.ba...@gmail.com> wrote:
This will be fixed in 2.0

--
You received this message because you are subscribed to the Google Groups "Raphaël" group.
To post to this group, send an email to raph...@googlegroups.com.
To unsubscribe from this group, send email to raphaeljs+...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/raphaeljs?hl=en-GB.

Federico Cáceres

unread,
Feb 9, 2011, 3:21:47 PM2/9/11
to raph...@googlegroups.com
On Tuesday, February 8, 2011 9:31:22 PM UTC-3, Dmitry Baranovskiy wrote:
This will be fixed in 2.0

That is great news Dmitry!

But... is 2.0 anywhere near? Is there some experimental branch we can test at GitHub?

Thanks!

andersand

unread,
Feb 9, 2011, 5:48:24 PM2/9/11
to Raphaël
You can make it consistent yourself by setting element.attr({"shape-
rendering" : "crispEdges"}) as mentioned here:
http://groups.google.com/group/mozilla.dev.tech.svg/browse_thread/thread/298aec0bb0959ea8/e4c673f54f951057?pli=1

Anders

Dmitry Baranovskiy

unread,
Feb 9, 2011, 5:53:50 PM2/9/11
to raph...@googlegroups.com
crispEdges wouldn’t make it “consistent”. Don’t do this.

andersand

unread,
Feb 9, 2011, 6:16:05 PM2/9/11
to Raphaël
You're right about that, of course. Not sure how I managed to misread
OP saying "consistent accross browsers" :(

On Feb 9, 11:53 pm, Dmitry Baranovskiy <dmitry.baranovs...@gmail.com>
wrote:
Reply all
Reply to author
Forward
0 new messages