[openstreetmap/openstreetmap-website] OSM icons for website to SVG (PR #4799)

[Hidde Wieringa]

> copy+paste error in the issue description

Oops, fixed. I was indeed copy-pasting all of the PR descriptions as I split them off from the initial PR.

> Some people want to edit the logo: https://community.openstreetmap.org/t/binary-numbers-on-osm-logo-could-be-changed-to-have-a-real-meaning/100498

Yes indeed, I checked the history of the logo:

![image](https://github.com/openstreetmap/openstreetmap-website/assets/1073881/fa20bd58-1a3e-403a-b4b5-102590a6deec)

![image](https://github.com/openstreetmap/openstreetmap-website/assets/1073881/46666d10-9993-4a8d-b310-1ff599c424bf)

![image](https://github.com/openstreetmap/openstreetmap-website/assets/1073881/229399dc-6a80-49fe-ac7d-ed11db4c1afe)

So in more than 10 years, the logo has been created and modified once. The other 2 commits are renames.

---

On the topic of using a tool like `svgo` for minifying / optimizing such SVGs. I tried this locally, and I found some problems with this approach, taking the source design files and using them directly to produce (minified) output for the web.

Problems:
- Clips sometimes do not work as expected
- Text is not rendered correctly if the font is not present on the system, or not at all
- Images such as in the OSM logo are still persisted (outside the viewable area) into the output SVG.

I ran the `svgo` tool like 
```
svgo --input ... --output ...
```
so with the default plugins enabled. I could not find any plugins in the list of plugins that would help us solve the above problems.

Some example output of the terms SVG: ![terms](https://github.com/openstreetmap/openstreetmap-website/assets/1073881/cb148cf6-e3f0-4c8c-93c6-d139bdc98645)

My conclusion is that the `svgo` tool cannot solve the SVG minimization problem right from the source illustration files. So if the design illustrations should be kept intact, then they should be kept in a different directory (where `assets/` in the project root?).

Then the process to convert such a designer SVG file into a file ready for minimization, would be: 
- Convert all text to paths
- Remove clips by intersecting the paths in the clip with the clip mask
- Remove any content outside the viewbox
- Remove any image content

Then, I put the files in https://vecta.io/nano to minimize them, but they could also be processed by `svgo` (as long as all plugins are enabled, some are disabled at the moment in https://github.com/openstreetmap/openstreetmap-website/blob/master/config/image_optim.yml#L5).

After that I auto-formatted (Jetbrains IDE) the minimized SVGs to make them nicer to read for humans with newlines and indent.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/4799#issuecomment-2115941696
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/pull/4799/c2115941696 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20240516/9e9137c7/attachment-0001.htm>