EM attributes leading to false metadata
Opened this issue · 3 comments
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;
Just read the issue created by @daniele-orlando. Maybe it could also fallback to viewBox when there are %
values present. 🤔
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.
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.