Displaying small svg pictures in html tags

Question

I would like an SVG picture of a triangle inside a <div> tag. I would like it to appear at the top of the <div> tag. I tried this:

    <div style='width:20px;height:10px;background-color:blue'>
      <svg width="20px" 
           height="10px" 
           version="1.1" 
           viewBox='0 0 20 10' 
           xmlns="http://www.w3.org/2000/svg">
        <polygon points="0 10, 20 10, 10 0" 
                 fill="black" 
                 stroke-width="0"/>
      </svg>
    </div>

But the triangle is displayed lower than it should be. What is weird is that if I multiply by 3 every coordinate/size in the above code, then everything is displayed correctly. I tried it in codepen with Chrome/Firefox/Edge and it is the same behavior everywhere.

My question is : Am I misusing something somewhere, or is there a bug in displaying small SVG pictures ?

Answer 1

You need to add display:flex to your div:

    <div style='width:20px;height:10px;background-color:blue;display:flex;'>
      <svg width="20px" 
           height="10px" 
           version="1.1" 
           viewBox='0 0 20 10' 
           xmlns="http://www.w3.org/2000/svg">
        <polygon points="0 10, 20 10, 10 0" 
                 fill="black" 
                 stroke-width="0"/>
      </svg>
    </div>