title: How to render svg elements with crisp edges while still keeping anti-aliasing?
body: <p><strong>Is there a way to render svg elements with crisp edges while still keeping anti-aliasing?</strong></p>
  
  <p>I'm creating a browser-based tool that works in modern browsers.</p>
  
  <p>Playing around with the <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering" rel="noreferrer">shape-rendering</a> attribute doesn't give me the results I'm looking for.</p>
  
  <p>I want my elements to have nice <strong>anti-aliasing so that the paths look smooth</strong> like below with <code>shape-rendering: auto</code>:</p>
  
  <p><img src="https://i.stack.imgur.com/uMXGP.png" alt="enter image description here"></p>
  
  <p>But I also want elements that don't require anti-aliasing, like the <strong>start box to look sharp and crisp</strong>, such as when rendered with <code>shape-rendering: crispEdges</code>:</p>
  
  <p><img src="https://i.stack.imgur.com/Kd2QW.png" alt="enter image description here"></p>
  
  <p>Is this possible? Am I looking to have my cake and eat it too?</p>