EM attributes leading to false metadata

[tobiasegli]

Issue

I was trying to convert the icons from bootstrap-icons to a svgfont using svgicons2svgfont as described in the other issue I recently posted in svg-pathdata. I was running into issues where the glyph widths and heights will falsely be set to 1px. By checking the new bootstrap-icons markup I noticed that they are using EM values in width and height attributes on the <svg>. It make sence for them to include an 1em height, since they are able to scale based on font-size when directly inlining them. The problem is that svgicons2svgfont will falsely parse the values into a 1px length.

Expected behavior

svgicons2svgfont should ignore EM values on height and width attribues.

Actual behavior

svgicons2svgfont is always using the height and width attributes if present.

Suggestion

I suggest falling back to the values from the viewBox attribute if height or width are using an EM value. This could be achieved by changing a few lines from index.js#L246 as followd:

// using width/height attributes if present and falling back to viewBox if its values are emphemeral units
const matchEM = new RegExp(/^\d*\.?\d+em$/);

glyph.width =
    'width' in tag.attributes && !tag.attributes.width.match(matchEM)
        ? parseFloat(tag.attributes.width)
        : width;
glyph.height =
    'height' in tag.attributes && !tag.attributes.height.match(matchEM)
        ? parseFloat(tag.attributes.height)
        : height;

[tobiasegli]

Just read the issue created by @daniele-orlando. Maybe it could also fallback to viewBox when there are % values present. 🤔

[nfroidure]

Can you try to see if the em values can be changed to percents? It feels like 1em is like a 100% value but I had not check. If so, it would be even more simpler to fix the problem.

[tobiasegli]

What do you mean by if the em values can be changed? I personally am not using svgs that are having emphemeral unit or percent attributes. What I try is to generate fonts from the svg files directly from a package like the new bootstrap-icons. The team from twbs seems to be going with a little different approach than others by using 1em values. I think the only reason they do that is to have them scale based on font-size when inlining them. 100% on an <svg> is acting somewhat like height: auto;. I think it would be a good thing if svgicons2svgfont would be able to work with little bigger variety of sources; also respecting % and em units.

Is there a problem with the solution I provided in my first post? In my tests it seemed to work just fine.