title: Proper way to crop an SVG?
body: <p>I'm totally baffled by SVG images. I want to crop the image to its core content. I want to crop it by specifying its viewbox and/or viewport and/or anything else EXCEPT I do NOT want to change any of the points in the polyline elements. The image as-is renders something like this. (NOTE the border is only for illustration purposes. The border is not actually part of the SVG.)</p>
  
  <p><img src="https://i.stack.imgur.com/OrhNr.png" alt="original"></p>
  
  <p>and I want to crop it so it looks something like this. (NOTE the border again is for illustration purposes only)</p>
  
  <p><img src="https://i.stack.imgur.com/xZgQ4.png" alt="cropped"></p>
  
  <p>Given this SVG XML how do I crop it?</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1" &gt;
      &lt;polyline points="39,340  42,338  47,333  54,322  68,308  83,292  91,277  100,259  106" style="fill:none;stroke:black;stroke-width:3"/&gt;
      &lt;polyline points="71,299  82,303  95,304  109,302  120,301" style="fill:none;stroke:black;stroke-width:3"/&gt;
      &lt;polyline points="212,275  228,254  233,233  240,208  239,246  188,278  174,306  158,334  149,351  144,358  140,362  139,362  139,340  179,313  186" style="fill:none;stroke:black;stroke-width:3"/&gt;
      &lt;polyline points="169,345  174,347  227,333  231,330  330,371  328,374  414,209  410,192  404,183  401,177  398,177  395,179   379,340  385,384  397,414" style="fill:none;stroke:black;stroke-width:3"/&gt;
  &lt;/svg&gt;
  </code></pre>