title: Keeping SVG elements to a fixed size while position scales
body: <p>How can I keep text or objects to a fixed size while the background and position coordinates change? For example:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8" standalone="no"?&gt;
  &lt;svg xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      xmlns:ev="http://www.w3.org/2001/xml-events" 
      width="100%" height="100%"
      viewBox="0 0 50000 50000"
      &gt;
      &lt;circle  cx="25000"  cy="25000" r="100px" fill="red" /&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>In this code, the circle will NOT be 100 pixels, it will be scaled according to the viewbox size, so it will be tiny.</p>
  
  <p>This problem manifests in maps, for example. When you zoom in and out on maps you want the dot representing a city location and the label to stay the same size, not get bigger or smaller when the user zooms.</p>