SVG ViewPort

viewport are used to show visible area of inside svg element. or we can say visibility area of SVG is called viewPort. This is logically decide which portion of SVG are visible of at a time. we can set height and width of svg. for example

<svg width="200px" height="200px"></svg>

In this svg we are assign height is 200px and width in 200px. if we are not provide any unit then default unit are px(pixel).

Coordinate units

Name	Meaning
px	Pixel
cm	Centimeter
mm	Millimeter
in	Inches
pc	pica (1/6 of an inch)
pt	pt for point (1⁄72 of an inch)

Check Yourself

width :

height :

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script></head>
<body>
<level for="svgWidth">width :</level><br>
  <input id="svgWidth" type="text"/><button id="newWidth">Apply</button><br>
<level for="svgHeight">height : </level><br>
<input id="svgHeight" type="text"/><button id="newHeight">Apply</button>
<br>
<svg class="viewPortExample" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="300" height="300" >
 
  <style>
  <![CDATA[
  .linkView{
  text-decoration: underline;
    cursor: pointer;
  }
  .viewPortExample{
     background: #76688ed4;
    }
  ]]>
     </style>
  <script>
    <![CDATA[
      $("#newWidth").click(function(){
        if($("#svgWidth").val()!=''){
        $(".viewPortExample").attr("width",$("#svgWidth").val());
        }
      });
        $("#newHeight").click(function(){
                if($("#svgHeight").val()!=''){
        $(".viewPortExample").attr("height",$("#svgHeight").val());
                }
      });
      ]]>
  </script>
</svg>
  </body>
</html>

SVG ViewPort

Coordinate units

Comment

New Comment