[openstreetmap/openstreetmap-website] Can we avoid inlining svgs into erb templates? (Issue #5880)

[Marwin Hochfelsner]

hlfan left a comment (openstreetmap/openstreetmap-website#5880)

Some SVGs could follow a straightforward process: read the file and remove unnecessary attributes, like `xmlns`.
Like the magnifying glass in the search bar:
https://github.com/openstreetmap/openstreetmap-website/blob/2075eb8329e5e011e8acaa90ade8229f6c9ea88b/app/views/layouts/_search.html.erb#L16-L23
For these purely white icons, we could include metadata for editors like Inkscape, so they don’t disappear against a white background, as long as the inlining helper can strip it out automatically.
Some icons, like those in `about.html` and `welcome.html`, also need extra CSS classes.

### Handling `currentColor`
For icons using `currentColor`, we could:
- Add a `color` attribute in the `<svg>` root (though I’m not sure how well editors handle that), or
- Use a placeholder color that gets replaced with `currentColor`.
Magenta (`#ff00ff`) could work well since it has been used as a transparency key in images without alpha support.

This keeps the templates clean without requiring modifications to the SVG structure.
That said, going beyond this, we’d run into:

### Element Reuse
Currently, the changesets list includes the same icons for each entry. The more efficient way is to define them once outside the list and reference them with `<use>` elements in each entry.
But this means those overlapping definitions get tucked away in `<defs>`, `<symbol>`, or hidden elements like `d-none`.
So putting that 1:1 in an SVG file isn’t ideal.
A better approach could be:
- Putting each definition in a separate SVG in a subdirectory, prefixing the element IDs with the folder name, and removing duplicate definitions.
- Keeping all definitions in a single SVG file and using transforms to separate the icons, with metadata in the root to drop the transforms when inlined.

That should cover all currently inlined SVGs.

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

Message ID: <openstreetmap/openstreetmap-website/issues/5880/2774654320 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20250402/dac8111e/attachment-0001.htm>