Filling a simple SVG in a div

Answer 1

The fill needs to be on the path instead of the svg element.

Also, try adding the width="24" and height="24" to the svg element.

Answer 2

I'm not very sure I understand your question. Maybe this is what you need:

I've changed the viewBox to viewBox="0 3 24 18". In order to get this value I've console.log(thePath.getBBox())

The method getBBox() returns an object with the position and the size of the bounding box of the path. I'm using this values for the new viewBox

viewBox = bb.x bb.y bb.width bb.height

Where bb is the bounding box.

<div style="width:24px;height:18px;margin:0px;padding:0px;background:black;">
        <svg viewBox="0 3 24 18">
          <path id="thePath" fill="red" d="M24 12l-9-9v7h-15v4h15v7z"/>
        </svg>
     </div>