SVG HTML

Scaling a Viewbox

ViewBoxScaling.html

<!DOCTYPE html>
<html>
<head>
  <title>XoaX.net's HTML</title>
  <style>
      svg text {
        font-family: Times New Roman;
        font-size:.17px;
        text-anchor:middle;
      }
  </style>
</head>
<body>
  <div style="padding:10px;background-color:AntiqueWhite;border: 2px solid brown;float:left;">
    <svg width="400px" height="400px" xmlns="http://www.w3.org/2000/svg" viewBox="-1.0 -1.0 2 2">
      <rect x="-1" y="-1" width="2" height="2" fill="beige" stroke="black" stroke-width=".1"/>
      <text x="0" y="-.5" fill="black">Viewbox: [-1, 1]x[-1, 1]</text>
      <text x="0" y=".5" fill="black">width 400px height 400px</text>
    </svg>
  </div>
  <div  style="padding:10px;background-color:AntiqueWhite;border: 2px solid brown;float:left;">
    <svg width="200px" height="400px" xmlns="http://www.w3.org/2000/svg" viewBox="-1.0 -1.0 2 2">
      <rect x="-1" y="-1" width="2" height="2" fill="beige" stroke="black" stroke-width=".1"/>
      <text x="0" y="-.5" fill="black">Viewbox: [-1, 1]x[-1, 1]</text>
      <text x="0" y=".5" fill="black">width 200px height 400px</text>
    </svg>
  </div>
  <div  style="padding:10px;background-color:AntiqueWhite;border: 2px solid brown;float:left;
  clear:both;">
    <svg width="400px" height="200px" xmlns="http://www.w3.org/2000/svg" viewBox="-1.0 -1.0 2 2">
      <rect x="-1" y="-1" width="2" height="2" fill="beige" stroke="black" stroke-width=".1"/>
      <text x="0" y="-.5" fill="black">Viewbox: [-1, 1]x[-1, 1]</text>
      <text x="0" y=".5" fill="black">width 400px height 200px</text>
    </svg>
  </div>
  <div  style="padding:10px;background-color:AntiqueWhite;border: 2px solid brown;float:left;">
    <svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg" viewBox="-1.0 -1.0 2 4">
      <rect x="-1" y="-1" width="2" height="4" fill="beige" stroke="black" stroke-width=".1"/>
      <text x="0" y="0" fill="black">Viewbox: [-1, 1]x[-1, 3]</text>
      <text x="0" y="2" fill="black">width 200px height 200px</text>
    </svg>
  </div>
  <div  style="padding:10px;background-color:AntiqueWhite;border: 2px solid brown;float:left;
  clear:both;">
    <svg width="624px" height="200px" xmlns="http://www.w3.org/2000/svg" viewBox="-1.0 -1.0 10 2">
      <rect x="-1" y="-1" width="10" height="2" fill="beige" stroke="black" stroke-width=".1"/>
      <text x="4" y="-.5" fill="black">Viewbox: [-1, 9]x[-1, 1]</text>
      <text x="4" y=".5" fill="black">width 624px height 200px</text>
    </svg>
  </div>
</body>
</html>
 

Output

 
 

© 2007–2025 XoaX.net LLC. All rights reserved.