Comments on: The problem with SVG and Canvas http://kilianvalkhof.com/2010/design/the-problem-with-svg-and-canvas/ Thu, 09 Sep 2010 10:22:27 +0000 hourly 1 http://wordpress.org/?v=3.0.1 By: Trevor Burnham http://kilianvalkhof.com/2010/design/the-problem-with-svg-and-canvas/comment-page-1/#comment-56079 Trevor Burnham Fri, 18 Jun 2010 18:25:32 +0000 http://kilianvalkhof.com/?p=486#comment-56079 Erik's suggestions are good. You can also set shape rendering to 'crispEdges'. It's annoying to have to do this; it might become the default behavior of Raphaël.js. See this issue: http://github.com/DmitryBaranovskiy/raphael/issues/#issue/164 Erik’s suggestions are good. You can also set shape rendering to ‘crispEdges’. It’s annoying to have to do this; it might become the default behavior of Raphaël.js. See this issue:

http://github.com/DmitryBaranovskiy/raphael/issues/#issue/164

]]> By: etienne http://kilianvalkhof.com/2010/design/the-problem-with-svg-and-canvas/comment-page-1/#comment-46452 etienne Mon, 15 Feb 2010 09:52:10 +0000 http://kilianvalkhof.com/?p=486#comment-46452 thanks for the usefull post, a pixel based canvas should exist :) thanks for the usefull post, a pixel based canvas should exist :)

]]> By: Erik Dahlström http://kilianvalkhof.com/2010/design/the-problem-with-svg-and-canvas/comment-page-1/#comment-44774 Erik Dahlström Mon, 25 Jan 2010 12:30:25 +0000 http://kilianvalkhof.com/?p=486#comment-44774 For svg you can try the following: - on the root svg element adjust the 'viewBox' attribute until you get the desired result for lines/rects in the svg (similar to adding 0.5px everywhere, but in one place instead of many). - use 'shape-rendering: optimizeSpeed' to disable anti-aliasing on any (or some) elements. Since it's a CSS property you can easily write a selector that applies it only to the elements you want. For svg you can try the following:

- on the root svg element adjust the ‘viewBox’ attribute until you get the desired result for lines/rects in the svg (similar to adding 0.5px everywhere, but in one place instead of many).
- use ‘shape-rendering: optimizeSpeed’ to disable anti-aliasing on any (or some) elements. Since it’s a CSS property you can easily write a selector that applies it only to the elements you want.

]]> By: Kilian Valkhof http://kilianvalkhof.com/2010/design/the-problem-with-svg-and-canvas/comment-page-1/#comment-44709 Kilian Valkhof Sun, 24 Jan 2010 16:59:30 +0000 http://kilianvalkhof.com/?p=486#comment-44709 Oh, and canvas, setting a color of a line with strokeStyle, but a width with lineWidth? Shame. On. You. Oh, and canvas, setting a color of a line with strokeStyle, but a width with lineWidth? Shame. On. You.

]]>