Menu
can anyone help me? I am trying to figure out how to get nice, smooth edges for this SVG path (currently drawing it with Raphael). Here is a CodePen mockup of the problem (you might need to scroll down to see the diagonal line in the window - it's a bit offset from the top).
http://codepen.io/anon/pen/qbxYOg
<DOCTYPE html>
<body>
<div style="width:3484px; height:2000px;">
<svg style="width:100%; height:100%;">
<path fill="#fe0000" stroke="#fe0000" d="M606.182,649.872L739.73,670.2349999999999M743.215,670.366C742.902,669.307,741.7900000000001,668.702,740.73,669.015C739.6700000000001,669.33,739.066,670.442,739.38,671.501C739.694,672.5609999999999,740.806,673.165,741.865,672.851C742.925,672.538,743.53,671.425,743.215,670.366ZM594.333,649L463.09799999999996,628.047M459.614,627.881C459.917,628.943,461.02299999999997,629.559,462.085,629.256C463.14799999999997,628.953,463.763,627.845,463.46,626.784C463.156,625.721,462.04999999999995,625.106,460.988,625.409C459.927,625.713,459.311,626.819,459.614,627.881Z" style="transform: scale(.75); fill: red; stroke: red; stroke-width: 4px"></path>
</svg>
</div>
</body>
</html>
Basically the issue is that the line appears very jagged with no smoothing/antialiasing and I need to be able to scale this SVG path from 100% zoom to 50% zoom for an interactive map. Scaling it down makes the edges look jagged, but I am only noticing this problem for lines on a diagonal...
Would anyone be able to help me fix this?
Thanks a bunch!
397
The line is being smoothed. If you use a screen magnifier, or similar program, you can see that it clearly is.
That fact that it looks a little jaggy is just a factor of the colour of the line, the contrast with the background, and the angle of the line.
You are not likely to get a result much (or any) better than this.
For comparison, here is a version of your sample showing the difference between antialiasing turned on and off.
<svg width="700px" height="700px">
<path fill="#fe0000" stroke="#fe0000" d="M606.182,649.872L739.73,670.2349999999999M743.215,670.366C742.902,669.307,741.7900000000001,668.702,740.73,669.015C739.6700000000001,669.33,739.066,670.442,739.38,671.501C739.694,672.5609999999999,740.806,673.165,741.865,672.851C742.925,672.538,743.53,671.425,743.215,670.366ZM594.333,649L463.09799999999996,628.047M459.614,627.881C459.917,628.943,461.02299999999997,629.559,462.085,629.256C463.14799999999997,628.953,463.763,627.845,463.46,626.784C463.156,625.721,462.04999999999995,625.106,460.988,625.409C459.927,625.713,459.311,626.819,459.614,627.881Z" style="fill: red; stroke: red; stroke-width: 4px" transform="translate(0,-50) scale(.75)"></path>
<path fill="#fe0000" stroke="#fe0000" shape-rendering="crispEdges" d="M606.182,649.872L739.73,670.2349999999999M743.215,670.366C742.902,669.307,741.7900000000001,668.702,740.73,669.015C739.6700000000001,669.33,739.066,670.442,739.38,671.501C739.694,672.5609999999999,740.806,673.165,741.865,672.851C742.925,672.538,743.53,671.425,743.215,670.366ZM594.333,649L463.09799999999996,628.047M459.614,627.881C459.917,628.943,461.02299999999997,629.559,462.085,629.256C463.14799999999997,628.953,463.763,627.845,463.46,626.784C463.156,625.721,462.04999999999995,625.106,460.988,625.409C459.927,625.713,459.311,626.819,459.614,627.881Z" style="transform: scale(.75); fill: red; stroke: red; stroke-width: 4px"></path>
</svg>Thank you for your reply. After much time working on this yesterday, I found that what was really needed here was the "appearance" of more smoothing, or antialiasing. I was basically able to simulate that in Raphael JS (which is what was rendering the line on the canvas) by adding a slight glow in the same color as the line, which generated more SVG elements at the same exact coordinates but that were thicker lines at a lower opacity, essentially giving me the antialiasing that I was looking for (or a smoother appearance to the line).
Here is the generated code from Raphael that creates a dark red solid line and then multiple SVG elements with a thicker stroke of the same color, but lower opacity to give it the slight antialias effect:
<path fill="none" stroke="#fe0000" d="M606.182,649.872C606.182,649.872,739.73,670.2349999999999,739.73,670.2349999999999M743.215,670.366C742.902,669.307,741.7900000000001,668.702,740.73,669.015C739.6700000000001,669.33,739.066,670.442,739.38,671.501C739.694,672.5609999999999,740.806,673.165,741.865,672.851C742.925,672.538,743.53,671.425,743.215,670.366C743.215,670.366,743.215,670.366,743.215,670.366M594.333,649C594.333,649,463.09799999999996,628.047,463.09799999999996,628.047M459.614,627.881C459.917,628.943,461.02299999999997,629.559,462.085,629.256C463.14799999999997,628.953,463.763,627.845,463.46,626.784C463.156,625.721,462.04999999999995,625.106,460.988,625.409C459.927,625.713,459.311,626.819,459.614,627.881C459.614,627.881,459.614,627.881,459.614,627.881" stroke-linejoin="round" stroke-linecap="round" stroke-width="2" opacity="0.3" transform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-linejoin: round; stroke-linecap: round; opacity: 0.3;"></path>
<path fill="none" stroke="#fe0000" d="M606.182,649.872C606.182,649.872,739.73,670.2349999999999,739.73,670.2349999999999M743.215,670.366C742.902,669.307,741.7900000000001,668.702,740.73,669.015C739.6700000000001,669.33,739.066,670.442,739.38,671.501C739.694,672.5609999999999,740.806,673.165,741.865,672.851C742.925,672.538,743.53,671.425,743.215,670.366C743.215,670.366,743.215,670.366,743.215,670.366M594.333,649C594.333,649,463.09799999999996,628.047,463.09799999999996,628.047M459.614,627.881C459.917,628.943,461.02299999999997,629.559,462.085,629.256C463.14799999999997,628.953,463.763,627.845,463.46,626.784C463.156,625.721,462.04999999999995,625.106,460.988,625.409C459.927,625.713,459.311,626.819,459.614,627.881C459.614,627.881,459.614,627.881,459.614,627.881" stroke-linejoin="round" stroke-linecap="round" stroke-width="4" opacity="0.3" transform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-linejoin: round; stroke-linecap: round; opacity: 0.3;"></path>
<path fill="none" stroke="#fe0000" d="M606.182,649.872C606.182,649.872,739.73,670.2349999999999,739.73,670.2349999999999M743.215,670.366C742.902,669.307,741.7900000000001,668.702,740.73,669.015C739.6700000000001,669.33,739.066,670.442,739.38,671.501C739.694,672.5609999999999,740.806,673.165,741.865,672.851C742.925,672.538,743.53,671.425,743.215,670.366C743.215,670.366,743.215,670.366,743.215,670.366M594.333,649C594.333,649,463.09799999999996,628.047,463.09799999999996,628.047M459.614,627.881C459.917,628.943,461.02299999999997,629.559,462.085,629.256C463.14799999999997,628.953,463.763,627.845,463.46,626.784C463.156,625.721,462.04999999999995,625.106,460.988,625.409C459.927,625.713,459.311,626.819,459.614,627.881C459.614,627.881,459.614,627.881,459.614,627.881" stroke-linejoin="round" stroke-linecap="round" stroke-width="6" opacity="0.3" transform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-linejoin: round; stroke-linecap: round; opacity: 0.3;"></path>
<path fill="#fe0000" stroke="#fe0000" d="M606.182,649.872L739.73,670.2349999999999M743.215,670.366C742.902,669.307,741.7900000000001,668.702,740.73,669.015C739.6700000000001,669.33,739.066,670.442,739.38,671.501C739.694,672.5609999999999,740.806,673.165,741.865,672.851C742.925,672.538,743.53,671.425,743.215,670.366ZM594.333,649L463.09799999999996,628.047M459.614,627.881C459.917,628.943,461.02299999999997,629.559,462.085,629.256C463.14799999999997,628.953,463.763,627.845,463.46,626.784C463.156,625.721,462.04999999999995,625.106,460.988,625.409C459.927,625.713,459.311,626.819,459.614,627.881Z" fill-opacity="1" stroke-width="3" opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); fill-opacity: 1; opacity: 1;"></path>
Note the stroke width and opacity settings for each and that the coordinates are all the same.
I hope that this discussion helps someone in the future! Thanks!!
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With