Image size in the SVG

Question

I am having difficulties to decrease the size of the star in my system, I have tried to take the width and height of the svg element, I have tried to put the 'viewbox', and so far I have not gotten any results, I am without ideas k

<?php  if($nota == 5) {?> 
<svg xmlns="http://www.w3.org/2000/svg viewbox="2 2 0 40">
    <polygon points="100,10 40,198 190,78 10,78 160,198"  fill="black" style="fill:yellow"/>
</svg>
<?php } 
?>

Answer 1

You actually have a quote missing from your SVG tag, but that’s not the only problem, the measurements of your viewbox is quite strange considering the values of the points of the polygon. Moreover, whether the third or the fourth value of the viewbox for 0 svg canvas will not have "space" to render the element

I adjusted the quotation marks and put the viewbox of the size of the largest sides 198 and solved. You can use the width:height of the size you want, as long as you keep the ratio 1:1 not to get "empty space" inside the svg canvas. So try to keep type 100px high and wide, or 120px etc...

svg {
    width: 198px;
    height: 198px;
}

<svg xmlns="http://www.w3.org/2000/svg" viewbox="2 2 198 198">
    <polygon points="100,10 40,198 190,78 10,78 160,198"  fill="black" style="fill:yellow"/>
</svg>

Answer 2

First you need to define the dimensions of the SVG area you want. As the figure is represented by a square, suppose you want a star with 100x100 pixels. Then set the width and the height in 100px:

CSS:

svg{
   width: 100px;
   height: 100px;
}

Now you need to set the coordinates within that area (for the star, they are 5 coordinates), separated by comma being x,y (x is the horizontal axis and y the vertical axis) at the points indicated below:

As SVG has 100x100 pixels of dimension, the values of the figure above are the approximate percentages to build a perfect star, ie:

1º vértice: x = 50%, y = 0%
2º vértice: x = 19,49%, y = 100%
3º vértice: x = 100%, y = 37,93%
4º vértice: x = 0%, y = 37,93%
5º vértice: x = 80,51%, y = 100%

Example:

svg{
   width: 100px;
   height: 100px;
}

<svg xmlns="http://www.w3.org/2000/svg">
    <polygon points="50,0 19.49,100 100,37.93 0,37.93 80.51,100"  fill="black" style="fill:yellow"/>
</svg>

Depending on the size of the star you want, just apply the percentages proportionally in the coordinates according to the square dimensions.