title: What is the best method for dynamically resizing svg files?
body: <p>I am working with the hammer.js touch functions to develop a pinch zoom and drag for svg files.  I know there are multiple ways to resize an svg file which are different than how a typicaly jpg or png would be modified.  I'm wondering which of these methods would work best for the pinch zoom using hammer.js.  I am not modifying individual elements within the svg, rather I am modifying the entire svg file.</p>
  
  <p>One, I could change the x, y, width, and height values of the svg.  Two, I can add scale transformation with a setAttribute() call.  Or, three, I can modify the viewbox element properties.  A fourth option could be to do a combination of one or more of these.</p>
  
  <p>Is there one option which works particularly better than others?</p>
  
  <p>Thank you, 
  --Christopher</p>
  
  <ul>
  <li><p>Edit **  Adding an jsfiddle svg example.
  <a href="http://jsfiddle.net/LM2U6/" rel="nofollow">http://jsfiddle.net/LM2U6/</a></p>
  
  <p><code>&lt;svg version="1.1" style="border:1px solid #00f;" id="testsvg" preserveAspectRatio="xMinYMin slice" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200" height="200" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve"&gt;
     &lt;rect x="75" y="75" width="50" height="50" style="stroke: #3333cc; fill:none;" /&gt;
   &lt;/svg&gt;
   &lt;svg version="1.1" style="border:1px solid #00f;" id="testsvg4" preserveAspectRatio="xMinYMin slice"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200" height="200" viewBox="50 50 100 100" xml:space="preserve" &gt;
     &lt;rect x="75" y="75" width="50" height="50" style="stroke: #3333cc; fill:none;" /&gt;
   &lt;/svg&gt;
   &lt;svg        version="1.1"        id="testsvg2"        style="border:1px solid #00f;"         preserveAspectRatio="xMinYMin slice"        xmlns="http://www.w3.org/2000/svg"        xmlns:xlink="http://www.w3.org/1999/xlink"        x="0px"       y="0px"       width="400"        height="400"        viewBox="0 0 200 200"        enable-background="new 0 0 200 200"          xml:space="preserve"&gt;
     &lt;rect x="75" y="75" width="50" height="50" style="stroke: #3333cc; fill:none;" /&gt;
   &lt;/svg&gt; 
   &lt;svg       version="1.1"        style="transform:matrix(2,0,0,2,100,100);border:1px solid #00f;"        id="testsvg3"        preserveAspectRatio="xMinYMin slice"        xmlns="http://www.w3.org/2000/svg"        xmlns:xlink="http://www.w3.org/1999/xlink"        x="0px"       y="0px"       width="200"        height="200"        viewBox="0 0 200 200"        enable-background="new 0 0 200 200"        xml:space="preserve"&gt;
     &lt;rect x="75" y="75" width="50" height="50" style="stroke: #3333cc; fill:none;" /&gt;
   &lt;/svg&gt;
  </code></p></li>
  </ul>
  
  <p>From the example, you can see the original svg image.  The 2nd image changes the viewbox which basically zooms the entire contents by 2.  It keeps the size of the svg viewport the same.  The 3rd image is zoomed in by doubling the width and height properties.  The last image zoomed in by setting the transform scale property.  The last two images double the view port size of the svg.</p>