Linter Rule: SVG tag name capitalization

Rule: svg-tag-name-capitalization

Description

Enforces proper camelCase capitalization for SVG element names within SVG contexts.

Rationale

SVG elements use camelCase naming conventions (e.g., linearGradient, clipPath, feGaussianBlur) rather than the lowercase conventions used in HTML. This rule ensures that SVG elements within <svg> tags use the correct capitalization for proper rendering and standards compliance.

This rule only applies to elements within SVG contexts and does not check the <svg> tag itself (that's handled by the html-tag-name-lowercase rule).

Examples

✅ Good

<svg>
  <linearGradient id="grad1">
    <stop offset="0%" stop-color="rgb(255,255,0)" />
  </linearGradient>
</svg>

<svg>
  <clipPath id="clip">
    <rect width="100" height="100" />
  </clipPath>
  <feGaussianBlur stdDeviation="5" />
</svg>

🚫 Bad

<svg>
  <lineargradient id="grad1">
Opening SVG tag name `lineargradient` should use proper capitalization. Use `linearGradient` instead. (svg-tag-name-capitalization)
    <stop offset="0%" stop-color="rgb(255,255,0)" />
  </lineargradient>
Closing SVG tag name `lineargradient` should use proper capitalization. Use `linearGradient` instead. (svg-tag-name-capitalization)
</svg>

<svg>
  <CLIPPATH id="clip">
Opening SVG tag name `CLIPPATH` should use proper capitalization. Use `clipPath` instead. (svg-tag-name-capitalization)
`<CLIPPATH>` is written like a component, but this template never opts into slots, so the browser renders it as a literal unknown element. Add `<%# herb:slots client %>` to compile it, or lowercase the tag if it is meant as plain HTML. (herb-component-requires-slots)
    <rect width="100" height="100" />
  </CLIPPATH>
Closing SVG tag name `CLIPPATH` should use proper capitalization. Use `clipPath` instead. (svg-tag-name-capitalization)
</svg>

References

• SVG Element Reference
• SVG Naming Conventions