Skip to main content

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>




Comment

Please share your knowledge to improve code and content standard. Also submit your doubts, and test case. We improve by your feedback. We will try to resolve your query as soon as possible.

New Comment