Change size of SVG to conform to polygon


I am trying SVG for the first time, and have been messing around with the view box and widths.

<div class="icon-row">
<svg><polygon height="auto"width="auto"points="75,93 0,50 75,6.69"/></svg>
<svg><polygon points="75,93 0,50 75,6.69"/></svg>
<svg><polygon points="75,93 0,50 75,6.69"/></svg>


svg {
  border: 1px solid black;
  width: 100px;
  height: 100px;
  transform: rotate(90deg);
.icon-row {
  width: 100%;
  border: 1px solid red;

In the CSS, not adding a custom width and height for the SVG will cause the SVG to go off the screen.

How can I make it so the view box and SVG will just conform to the point sizes? This is to remove any padding or space at the bottom of the SVG. I tried auto width and heights but it doesn’t work.


I am not an expert in SVG, but as each element in HTML, it has a predefined size. Your polygon is positioned at the top left of your SVG block. In using the property/value transform: rotate(90deg); for the SVG, it is then normal that a part of your SVG block is not seeable and go out of the page, except if you apply yourself a width/height for your SVG that corresponds the size of your polygon

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.