Question: I'm trying to create an SVG with base and height 100px. But not sure if it is correct. I'm not getting the exact output as I need. Below is the code sample

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

Please correct me where I'm doing wrong. I really appreciate your help.

Thank you!

Answer: 
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.

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

```html
<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: 

```html
 <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](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polygon) 

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

```html
<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 

```html
<!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/> 

[![enter image description here](https://i.stack.imgur.com/o3obl.png)](https://i.stack.imgur.com/o3obl.png)
```html
<svg id="triangle" viewBox="0 0 100 100">
            <polygon points="0 0, 100 0 50 100" fill="blue" stroke="red"/>
      </svg>
```