Change size of SVG to conform to polygon

[michaelnicol]

Hello,

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>
</div>

CSS:

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.

[LucLH]

@michaelnicol,

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