How to smooth edges for SVG path <p>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).</p> <p><a href="http://codepen.io/anon/pen/qbxYOg" rel="nofollow">http://codepen.io/anon/pen/qbxYOg</a></p> <pre><code>&lt;DOCTYPE html&gt; &lt;body&gt; &lt;div style="width:3484px; height:2000px;"&gt; &lt;svg style="width:100%; height:100%;"&gt; &lt;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"&gt;&lt;/path&gt; &lt;/svg&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>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...</p> <p>Would anyone be able to help me fix this?</p> <p>Thanks a bunch!</p>