SVG files sometimes don't have viewBox, get width and height

Created on 2 September 2022, over 2 years ago
Updated 20 February 2023, almost 2 years ago

Problem/Motivation

When parsing the width/height for SVG icons in a directory, SvgIconHandler relies on the viewBox property to extract the width and height for the file. However, some iconsets, such as BoxIcons, don't have a viewBox property set. However they do have a width and height property.

When SvgIconHandler->build() runs and attempts to calculate the width and height, a warning is generated:

Warning: Undefined property "width".

Proposed resolution

Update discoverIcons() to also extract the width and height properties, so those can be relied on if viewBox is not present.

πŸ› Bug report
Status

Needs review

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States earthday47 New York

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • πŸ‡ΊπŸ‡ΈUnited States lemming

    Hi @earthday47 very sorry for letting this slip for so long. Meant to get back to this but needed to get a few other projects done first.

    I've waited so long that BoxIcons has released a new version that has "viewbox" added: https://www.npmjs.com/package/boxicons

    Though I still think the issue you've found here is still relevant. With SVG's the "viewbox" is important as it helps the SVG with scaling and ratio when the HTML dimensions are factored in. Distortion of the icon occurs when a "viewbox" is missing.

    I'm thinking of we probably want to implement 2 additions for these changes:

    • Use the width and height dimensions to create a "viewbox" (requires assumption on offset)
    • Allow the iconset to provide default values. So you could add a "viewbox" value in the iconset definition, to be used when icons don't provide a value. Works for situations where this info is consistent for the iconset.
Production build 0.71.5 2024