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.

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

UN flag doesn't match up to the source SVG #28

Closed
TheEssem opened this issue Apr 4, 2018 · 5 comments
Closed

UN flag doesn't match up to the source SVG #28

TheEssem opened this issue Apr 4, 2018 · 5 comments

Comments

@TheEssem
Copy link
Collaborator

TheEssem commented Apr 4, 2018

I've found through testing that the UN flag emoji (U+1F1FA, U+1F1F3) is slightly messed up in the middle, as you can see here:
UN flag
The continents are larger and overlap each other. It seems to happen after the layerize script, as each layer SVG is correct. Maybe it has to do with grunt-webfont? 🤔

@TheEssem
Copy link
Collaborator Author

TheEssem commented Apr 19, 2018

I investigated a bit more and found that the size of the SVGs might be to blame, as grunt-webfont seems to work better with larger SVGs, especially 512px ones. We might need to resize the SVGs somehow to fix this and other emojis. Relevant bug: sapegin/grunt-webfont#321

EDIT: After some testing, I have come to the conclusion that it is not the size of the SVGs.

@KwanEsq
Copy link
Contributor

KwanEsq commented Jul 20, 2018

Would it be worth adding an override SVG for this as a workaround? After chopping up the paths a bit with Inkscape (then trimming the markup back down again) I have an SVG that when placed in overrides produces a decent rendering.

@timdream
Copy link
Contributor

That could be a viable solution.

KwanEsq added a commit to KwanEsq/twemoji-colr that referenced this issue Jul 27, 2018
@KwanEsq
Copy link
Contributor

KwanEsq commented Jul 27, 2018

I've finally pushed my mentioned override to KwanEsq@4f3c9bb
It's possible it could be simplified a bit, but it does the job.

@KwanEsq
Copy link
Contributor

KwanEsq commented Mar 28, 2019

So to document the steps for creating the override file:

  1. Copy twemoji/2/svg/1f1fa-1f1f3.svg to twemoji-colr/overrides/1f1fa-1f1f3.svg
  2. Open twemoji-colr/overrides/1f1fa-1f1f3.svg in Inkscape
  3. Select the path with the landmasses in (7th of the 9 paths in the group)
  4. In the "Path" menu select "Break Apart"
  5. Several of the ocean sections are now solid white
  6. Select one of the new paths making up a white ocean section
  7. Shift-click every re-coloured ocean section, so they are all selected at once
  8. Open twemoji/2/svg/1f1fa-1f1f3.svg in Inkscape
  9. Flick between the modified and second copy to compare and not miss any small bits
  10. In the "Fill and Stroke" > "Fill" panel click on "Flat colour"
  11. Use the colour picker to set the background blue as the fill colour
  12. Double check you didn't miss any small bits
  13. In the "Object" menu select "Group"
  14. "File" > "Save As..."
  15. Choose "Optimised SVG" as the output format
  16. Tick the following options:
    1. Options
      1. Shorten colour values
      2. Convert CSS attributes to XML attributes
      3. Collapse groups
      4. Create groups for similar attributes
      5. Work around renderer bugs
    2. SVG Output
      1. Remove the XML declaration
      2. Remove metadata
      3. Remove comments
    3. IDs
      1. Remove unused IDs
  17. Save
  18. Optional: open the override SVG and remove the version attribute from the root svg element

KwanEsq added a commit to KwanEsq/twemoji-colr that referenced this issue Mar 28, 2019
Fixes mozilla#28.

Step-by-step creation instructions:
- Copy twemoji/2/svg/1f1fa-1f1f3.svg to twemoji-colr/overrides/1f1fa-1f1f3.svg
- Open twemoji-colr/overrides/1f1fa-1f1f3.svg in Inkscape
- Select the path with the landmasses in (7th of the 9 paths in the group)
- In the "Path" menu select "Break Apart"
- Several of the ocean sections are now solid white
- Select one of the new paths making up a white ocean section
- Shift-click every white ocean section, so they are all selected at once
- Open twemoji/2/svg/1f1fa-1f1f3.svg in Inkscape
- Flick between the modified and second copy to compare and not miss any small bits
- In the "Fill and Stroke" > "Fill" panel click on "Flat colour"
- Use the colour picker to set the background blue as the fill colour
- Double check you didn't miss any small bits
- In the "Object" menu select "Group"
- "File" > "Save As..."
- Choose "Optimised SVG" as the output format and "Save"
- Tick the following options:
    - Options
        - Shorten colour values
        - Convert CSS attributes to XML attributes
        - Collapse groups
        - Create groups for similar attributes
        - Work around renderer bugs
    - SVG Output
        - Remove the XML declaration
        - Remove metadata
        - Remove comments
    - IDs
        - Remove unused IDs
- "OK"
- Optional: open the override SVG and remove the version attribute from the root svg element
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants