Bad value “inline-block” for attribute “display” on element “svg”.

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

<svg display="inline-block" width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

Valid example

Use the style attribute to set inline-block:

<svg style="display: inline-block" width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

Or apply it through CSS:

<style>
  .icon {
    display: inline-block;
  }
</style>
<svg class="icon" width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

Learn more:

MDN Reference

MDN - SVG Element

→

MDN Reference

MDN - SVG Attribute: display

→

MDN Reference

MDN - CSS display property

→