Is it possible to change the width of an Svg shape<polygon> ?

Question:

Here is the SVG image. In it I am trying to reduce the width

 <polygon id="life" class="green" points="951.3,104.5 930.5,140.5 333,140.5 333,53.5 1515,53.5 1485.5,104.5         "/>

Snippet:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 1620 376" style="enable-background:new 0 0 1620 376;" xml:space="preserve">
   <style type="text/css">
      .green{fill:green;enable-background:new;}
   </style>
   <polygon id="life" class="green" points="951.3,104.5 930.5,140.5 333,140.5 333,53.5 1515,53.5 1485.5,104.5 		"/>
</svg>

Answer:

It's not clear from the question what width you want to reduce:

  • Decrease the width of the shape itself, but how much to reduce is not clear.

  • Decrease the width of the space an svg takes up inside HTML?

If the first option, then you need to redraw the figure of the desired width and length in a vector editor. To do this, open a vector editor, set the document size close to the size of the shape you need, and draw the desired shape within the boundaries of this document, trying to leave minimal indents from the borders of the document. The figure is very simple and it will not be difficult for you.

If it's the second option – you don't want to redraw the shape, but need to reduce too much padding from the shape to the edges of the SVG, then you can use the following technique:

Here is your SVG, the red border shows the borders of the svg document.
It was added with styles: style="border:1px solid red;"

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 1620 376" style="border:1px solid red;">
   <style type="text/css">
      .green{fill:green;enable-background:new;}
   </style>
   <polygon id="life" class="green" points="951.3,104.5 930.5,140.5 333,140.5 333,53.5 1515,53.5 1485.5,104.5 		"/>
</svg>

It can be seen that there are very large paddings from the figure to the edges of the svg document. What size is the red border, how much space will the svg take up in the HTML. And no amount of CSS tricks will help to reduce these indents. You need to reduce these indents directly in SVG. To do this, add a viewport that is width height in the header of the svg file. If you need an adaptive image, then the width and height must be specified as a percentage.

To reduce the indents, change the aspect ratio – make the height 8 times smaller

376 /8 = 47px Exactly the same proportion should be
viewport ,- width="100" height="12.5%"

 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
   width="100%" height="12.5%" viewBox="0 0 1620 47"  style="border:1px solid red;">
   <style type="text/css">
  .green{fill:green;enable-background:new;}
   </style>
   <g transform="translate(-300 -74)">
   <polygon id="life" class="green" points="951.3,104.5 930.5,140.5 333,140.5 333,53.5 1515,53.5 1485.5,104.5 		"/>
</g>
   </svg>

<g transform="translate(-300 -74)"> is used to fine-tune the position of the shape.

In particular, if you want to make a narrower polygon, move it up with this command.

<g transform="translate(-300 -80)">
Post Views: 2
Scroll to Top