Bad value “none” for attribute “font-weight” on element “g”.

The SVG font-weight presentation attribute controls the boldness or lightness of glyphs used to render text. According to the SVG specification, this attribute is only valid on text content elements: <text>, <tspan>, <textPath>, and the deprecated <tref>. While the <g> element is a general-purpose container for grouping SVG elements, it does not accept font-weight as a direct attribute in valid markup.

The value "none" compounds the problem because it is not a recognized value for font-weight in any context. The allowed values are:

• normal (equivalent to 400)
• bold (equivalent to 700)
• bolder (relative to parent)
• lighter (relative to parent)
• A numeric value: 100, 200, 300, 400, 500, 600, 700, 800, or 900

This matters for standards compliance and predictable rendering across browsers. While some browsers may silently ignore invalid attributes or values, relying on that behavior leads to fragile code. Using valid attributes on the correct elements ensures consistent results and avoids validation errors.

If you need to apply a font-weight to multiple text elements inside a <g>, use CSS instead. You can apply a style via the style attribute on the <g>, a class, or an inline <style> block. CSS font-weight is inherited, so child text elements will pick it up.

Examples

Invalid: font-weight="none" on a <g> element

<svg viewBox="0 0 200 30" xmlns="http://www.w3.org/2000/svg">
  <g font-weight="none">
    <text y="20">Hello</text>
  </g>
</svg>

This triggers the validation error because <g> does not accept the font-weight attribute directly, and "none" is not a valid value.

Fixed: font-weight on the <text> element with a valid value

<svg viewBox="0 0 200 30" xmlns="http://www.w3.org/2000/svg">
  <g>
    <text y="20" font-weight="bold">Hello</text>
  </g>
</svg>

Fixed: using a numeric weight on <text>

<svg viewBox="0 0 200 30" xmlns="http://www.w3.org/2000/svg">
  <text y="20" font-weight="700">Bold text</text>
  <text x="100" y="20" font-weight="400">Normal text</text>
</svg>

Fixed: applying font-weight to a <g> via CSS

If you want all text inside a <g> to share the same weight, use the style attribute or a CSS class. CSS-based font-weight on a <g> is valid because CSS inheritance applies to all descendant text content.

<svg viewBox="0 0 300 30" xmlns="http://www.w3.org/2000/svg">
  <g style="font-weight: bold">
    <text y="20">This is bold</text>
    <text x="150" y="20">Also bold</text>
  </g>
</svg>

Fixed: using an inline <style> block

<svg viewBox="0 0 300 30" xmlns="http://www.w3.org/2000/svg">
  <style>
    .heavy { font-weight: 900; }
  </style>
  <g class="heavy">
    <text y="20">Heavy text</text>
    <text x="150" y="20">Also heavy</text>
  </g>
</svg>

Learn more:

MDN Reference

MDN - SVG attribute font-weight

→

MDN Reference

MDN - CSS property font-weight

→