Menu
I have an svg that is wrapped in a span. The svg has a set height and width of 15px.
<span>
<svg xmlns="http://www.w3.org/2000/svg" id="remove-circle" viewBox="0 0 1200 1200.0071" width="15px" height="15px"><path d="..."/></svg>
</span>
I wrap the svg in a span so I can more easily position it, but it then has a height of 19px. I have tried setting the line-height to 0, but that didn't change anything. What do I need to do to make the span the same size as the svg?
394
Any height or width you set for the SVG with CSS will override the height and width attributes on the <svg> . So a rule like svg {width: 100%; height: auto;} will cancel out the dimensions and aspect ratio you set in the code, and give you the default height for inline SVG.
The thing is: SVG images don't have a "size" in the sense you are probably thinking of. On the other hand, they DO have a height-to-width ratio. This ratio can usually be found in the viewBox attribute.
The viewBox attribute defines the position and dimension, in user space, of an SVG viewport. The value of the viewBox attribute is a list of four numbers: min-x , min-y , width and height .
I was able to reproduce this locally and fixed it by applying the following CSS to the surrounding <span>
span {
display: inline-flex;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
