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)
    <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