Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Non-standard SVG #84

Open
Moxinilian opened this issue May 20, 2020 · 9 comments
Open

Non-standard SVG #84

Moxinilian opened this issue May 20, 2020 · 9 comments
Labels
help wanted

Comments

@Moxinilian
Copy link

Hello!

In the released 12.0.1 emoji font, the SVG components do not correctly comply with the standard by not providing a bounding box size, making some SVG parsers fail. I find that odd, as it seems the asset files do contain a bounding box.

I don’t really understand the transform business too in the font, so I can’t really fix it myself.

Could this change be made in the font? Or if it is like a file size issue, could it be an option we can opt-in with the compiler?

Thanks in advance!
@13rac1
Copy link
Owner

13rac1 commented May 21, 2020

The black and white or color SVGs? Can you provide specific examples?

@Moxinilian
Copy link
Author

The color SVGs. Here is an example of what the TTF file contains.

<svg xmlns="http://www.w3.org/2000/svg" id="glyph833">
	<g transform="translate(0 -6.75) translate(0,-1638.4) scale(56.8888888889)">
		<path d="M20 21.5a1.5 1.5 0 0 1-3 0v-3a1.5 1.5 0 1 1 3 0v3z" fill="#67757F" />
		<path d="M27.138 33.817C27.183 35.022 26.206 36 25 36H12.183A2.183 2.183 0 0 1 10 33.817V21c0-1.205.115-2.183 2.183-2.183S15 23 25 21c1.091 0 2.183.978 2.138 2.183v10.634z" fill="#E1E8ED" />
		<path d="M18.687 18.538c-2.595 0-6.962-1.934-6.962-5.898 0-3.988 4.351-5.414 7.005-11.401.751-1.693.999-1.107 1.86-.076 2.06 2.463 5.058 7.483 5.058 11.574-.001 4.641-4.64 5.801-6.961 5.801z" fill="#FCAB40" />
		<path d="M18.687 17.447c-4.184 0-3.482-5.802 0-9.283 2.321 1.16 5.801 9.283 0 9.283z" fill="#FDCB58" />
		<path d="M11 29a1 1 0 1 1-2 0v-7a1 1 0 1 1 2 0v7zm4 3a1 1 0 1 1-2 0v-7a1 1 0 1 1 2 0v7zm0-11a1 1 0 1 1-2 0v-1a1 1 0 1 1 2 0v1z" fill="#CCD6DD" />
	</g>
</svg>

I'm not sure about OTSVG compliance, it might be okay. The issue I was having is that the SVG parser I use only supports "regular" SVG, which its lack of provided size makes it fail.
I don't really know if it's something the compiler for Twemoji can solve, but if it can it would be great if one could build it with that enabled!

@13rac1
Copy link
Owner

13rac1 commented May 23, 2020

What is the unicode hex for this glyph?

@Moxinilian
Copy link
Author

This is the candle emoji, U+1F56F.
But they all lack viewBox or size attributes.

@13rac1
Copy link
Owner

13rac1 commented May 26, 2020

I just remembered. Removing viewbox is intentional, though I'm not sure if still required: https://github.com/13rac1/scfbuild/blob/9acc7fc5fedbf48683d8932dd5bd7583bf922bae/scfbuild/builder.py#L102-L107

            # Remove the viewBox/height/width attributes since they are
            # processed inconsistently by Gecko and Edge renderers.
            try:
                del svg_root.attrib['viewBox']
            except KeyError:
                pass

Commit: 13rac1/scfbuild@c63c13c

Relevant background: 13rac1/emojione-color-font#50

@Moxinilian
Copy link
Author

Moxinilian commented May 26, 2020 •
edited
Loading

Oh, I see! That's unfortunate.
In that case, if you don't feel like making it a compile-time option, I can just tweak the script for it to work the way I need it.
Thank you for the help!

@knghtbrd
Copy link

knghtbrd commented Aug 8, 2020

Seems appropriate to test whether this still causes a problem or not. Removing the viewbox is probably not a good idea if Gecko/Edge have fixed it. Particularly because browsers in particular tend to semi-automatically update themselves nowadays.

@13rac1
Copy link
Owner

13rac1 commented Sep 12, 2020

@iKarith That's true. There's no good way to automate this test though.

Anyone want to run down if this is needed anymore? Will need all browsers and other font renders tested.

@rafael-patronilo
Copy link

rafael-patronilo commented May 24, 2021 •
edited
Loading

Hi, I switched to twemoji today (on Windows 10) and I found a bug with emojis on SVGs on firefox:

<html>
<head>
	<meta charset="utf-8">
</head>
<body>
	<svg>
		<text stroke-width="0" stroke="#000000" x="50%" y="50%">🌲</text>
	</svg>
</body>
</html>

produces:
image
I don't know much about svg, could this be related to this issue?

@knghtbrd knghtbrd mentioned this issue Mar 24, 2023
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
help wanted
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@13rac1 @knghtbrd @Moxinilian @rafael-patronilo