HTML Guides for inline-block

The display attribute on an <svg> element does not accept CSS values like inline-block. The display attribute in SVG is a presentation attribute that only accepts SVG-specific values: inline, block, list-item, none, and a few others defined in the SVG specification, but not inline-block.

SVG presentation attributes map to a limited subset of CSS properties, and their allowed values don't always match the full range of CSS values. The display presentation attribute on SVG elements accepts values like inline, block, none, run-in, table, and related table display values, but inline-block is not among them.

To apply inline-block display behavior to an <svg> element, use a style attribute or a CSS rule instead of the display presentation attribute.

Invalid example

<svgdisplay="inline-block"width="100"height="100"xmlns="http://www.w3.org/2000/svg">

<circlecx="50"cy="50"r="40"fill="red"/>

</svg>

Valid example

Use the style attribute to set inline-block:

<svgstyle="display:inline-block"width="100"height="100"xmlns="http://www.w3.org/2000/svg">

<circlecx="50"cy="50"r="40"fill="red"/>

</svg>

Or apply it through CSS:

<style>

.icon{

display: inline-block;

}

</style>

<svgclass="icon"width="100"height="100"xmlns="http://www.w3.org/2000/svg">

<circlecx="50"cy="50"r="40"fill="red"/>

</svg>