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/2774654...@github.com>
_______________________________________________
rails-dev mailing list
rails-dev@openstreetmap.org
https://lists.openstreetmap.org/listinfo/rails-dev
