SiteLint documentation and guidelines

Svg incorrect size unit

Description

This rule ensures that SVG elements use appropriate units for width and height attributes. Using incorrect or unsupported units for these attributes can lead to rendering issues, affecting the accessibility and usability of the SVG content. Properly sized SVGs ensure that visual information is presented accurately across different devices and screen sizes.

Disabilities impacted

  • Visual impairments: users with visual impairments rely on properly scaled SVGs for clarity and legibility. Incorrect size units can cause scaling issues, making the content difficult to see or read.
  • Motor impairments: users who navigate using alternative input devices need consistently scaled SVGs to interact with content effectively.
  • Cognitive disabilities: users with cognitive disabilities benefit from well-sized and clearly visible SVGs, aiding in comprehension and reducing cognitive load.

Why it matters

Correctly sized SVGs ensure that graphical content is accessible and visually consistent across different devices and screen sizes. Using appropriate units prevents rendering issues that can distort the appearance of the SVG, making it difficult for users to perceive and interact with the content. Proper sizing also enhances the overall user experience by maintaining visual integrity and readability.

Coding problems and solutions

Common coding problems

  • Using unsupported units: specifying width and height with units that are not supported (e.g., using pt, pc, or other non-standard units).
  • Omitting units: not specifying units for width and height, relying on default pixel units, which may not be appropriate for responsive designs. Specifically, when CSS is not available, default with and height are used.
  • Inconsistent units: mixing different units (e.g., em, %, px) within the same SVG, leading to inconsistent rendering.

How to fix it

Use supported units

Ensure that width and height are specified using supported units such as pixels (px), percentage (%), or viewBox for responsive SVGs.

Incorrect example
<svg width="100pt" height="100pt">
    <!-- SVG content -->
</svg>
Correct example
<svg width="100px" height="100px">
    <!-- SVG content -->
</svg>

Omit units for default pixel sizing

If relying on default pixel units, ensure that the dimensions are appropriate for the design.

Incorrect example
<svg width="200pc" height="200pc">
    <!-- SVG content -->
</svg>
Correct example
<svg width="200" height="200">
    <!-- SVG content -->
</svg>

Use consistent units for responsive design

For responsive designs, use percentage or viewBox to ensure the SVG scales correctly across different screen sizes.

Incorrect Example
<svg width="50%" height="100px" viewBox="0 0 100 100">
    <!-- SVG content -->
</svg>
Correct example
<svg width="50%" height="50%" viewBox="0 0 100 100">
    <!-- SVG content -->
</svg>

Known limitations

  • Complex SVGs: for complex SVGs with intricate designs, ensure that all units are consistently applied and that the SVG scales appropriately.
  • Cross-browser compatibility: different browsers may render SVGs differently. Testing across multiple browsers and devices is recommended.
  • Accessibility support: ensure that the SVGs are accessible to screen readers and other assistive technologies, providing descriptive titles and ARIA labels where necessary.

Resources