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

Created on 2 September 2022, over 2 years ago
Updated 20 February 2023, over 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.
  • Status changed to Fixed about 1 month ago
  • πŸ‡ΊπŸ‡ΈUnited States lemming

    ViewBox or height & width are required in order for browsers to fit the image to the HTML elements or space.

    The BoxIcons now provides this information and works correctly with the module. I'm going to call this fixed since it has been updated on the icon provider side.

  • πŸ‡ΊπŸ‡ΈUnited States lemming
  • Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.71.5 2024