Filling A Simple Svg In A Div

Here is my relevant HML with SVG: It renders fine but leaves padding above and below the arrow inside the div. I tried using SVG as background to the div after base64 encoding the

Solution 1:

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.

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

Solution 2:

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.