Create a equilateral triangle using SVG in HTML with base and height 100px

I'm trying to create an equilateral triangle in SVG with base and height 100px. I'm not getting the exact output I need, below is the code sample:

<svg id="triangle" viewBox="0 0 100 100">
    <polygon points="50 15, 100 100, 0 100"/>
</svg>

Solution

Wrap in a container and set the size as a percentage. Then it will be possible to adjust the size and the shape will be adaptive.

.container {
width:30%;
height:30%;
}

<div class="container">
        <svg id="triangle" viewBox="0 0 100 100">
            	<polygon points="50 15, 100 100, 0 100"/>
        </svg>
     </div>

second option without using the container:

 <svg id="triangle" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="30%" height="30%" viewBox="0 0 100 100">
                	<polygon points="50 15, 100 100, 0 100"/>
 </svg>

third option

Write syntax as per specification polygon

The comma must separate the coordinate "X" and "Y"

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"   viewBox="0 0 100 100" style="border:1px solid gray;" >   
	
	<polygon points="50, 13.397 100, 100 0, 100"/>
</svg>

Update

Reply to comments

The compiler still giving me an error that it is not a valid triangle.

To validate the file I added the required parameters

<!DOCTYPE html>
<head> 
<title>Triangle</title>
</head> 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"   viewBox="0 0 100 100"  >   
	
	<polygon points="50, 13.397 100, 100 0, 100/>    
</svg>

Download this file to the validator https://validator.nu/