title: Prevent a SVG element to be scaled when the browser window is resized
body: <p>I have a SVG image which is basically a background with other points (<code>images</code>) on it.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;div class="svg-background" style="width: 1920px;&gt;
      &lt;svg xml:space="preserve" enable-background="new 0 0 1600 640" viewBox="0 0 1600 640" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg" width="100%" height="100%"&gt;
          &lt;!-- ...SVG code... --&gt;
          &lt;image id="point" href="point.png" width="49" height="49" alt="point" class="svg-point" x="100" y="200"/&gt;
          &lt;!-- and more points... --&gt;
      &lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>With jQuery I change the <code>#svg-background</code> div to fit the browser width, so I have a SVG background that fits the whole browser width, and it is scaling very well.</p>
  
  <p>My problem is that the points (<code>image</code> elemnts) are scaling too and <strong>I need these points have a fixed width and height</strong>.</p>
  
  <p>How can I prevent a SVG element to be scaled when the browser window is resized?</p>