title: Convert SVG to PNG with sharp edges
body: <p>I need to convert images for object detection. I start with svg images with multiple polygons. Example:</p>
  
  <pre><code>&lt;svg ...&gt;
  &lt;rect width = "100%" height = "100%" fill = "rgb(0,0,0)" /&gt;
  &lt;polygon points="..." fill="rgb(221,221,221)" fill-opacity="1.0" /&gt;
  &lt;polygon points="..." fill="rgb(100,100,100)" fill-opacity="0.5" /&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>The result is a black background, object A having color rgb(221,221,221), object B having color rgb(50,50,50), and anywhere the two objects overlap rgb(160,160,160). The detection algorithm (cannot be modified) determines objects by their pixel values.</p>
  
  <p>I have successfully converted from svg to png using inkscape, svgr-convert, or ImageMagikk. However the edges of these png images are always blurry which in interfering with my object detection.</p>
  
  <p>Is there some way to convert having crisp edges? <a href="https://i.stack.imgur.com/E4wE5.png" rel="nofollow noreferrer">This image shows the conversion adding blurred pixels with incorrect values. I have zoomed into an edge to make it obvious.</a></p>
  
  <p>edit: full image example </p>
  
  <pre><code>&lt;svg viewBox="17.874 6.66874 74.0131 70.817" xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;rect width = "100%" height = "100%" fill="black" fill-opacity="1.000000" stroke="black" stroke-opacity="1.000000" stroke-width ="0.000000"/&gt;
  &lt;polygon points="66.499391,34.862972 35.730400,51.495089 68.667463,64.499553 " fill="rgb(221,221,221)" fill-opacity="1.000000" /&gt;
  &lt;polygon points="47.613765,49.254424 23.219703,52.458598 47.246912,50.965952 48.078815,51.599703 49.620943,52.471096 62.516253,65.471290 65.077318,43.877861 51.086443,12.014429 34.861708,20.532821 " fill="rgb(100,100,100)" fill-opacity="0.500000" /&gt;
  &lt;/svg&gt;
  </code></pre>