<span style="color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;">
  <p dir="auto">Some SVGs could follow a straightforward process: read the file and remove unnecessary attributes, like <code class="notranslate">xmlns</code>.<br>
Like the magnifying glass in the search bar:<br>
<a href="https://github.com/openstreetmap/openstreetmap-website/blob/2075eb8329e5e011e8acaa90ade8229f6c9ea88b/app/views/layouts/_search.html.erb#L16-L23">https://github.com/openstreetmap/openstreetmap-website/blob/2075eb8329e5e011e8acaa90ade8229f6c9ea88b/app/views/layouts/_search.html.erb#L16-L23</a><br>
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.<br>
Some icons, like those in <code class="notranslate">about.html</code> and <code class="notranslate">welcome.html</code>, also need extra CSS classes.</p>
<h3 dir="auto">Handling <code class="notranslate">currentColor</code></h3>
<p dir="auto">For icons using <code class="notranslate">currentColor</code>, we could:</p>
<ul dir="auto">
<li>Add a <code class="notranslate">color</code> attribute in the <code class="notranslate"><svg></code> root (though I’m not sure how well editors handle that), or</li>
<li>Use a placeholder color that gets replaced with <code class="notranslate">currentColor</code>.<br>
Magenta (<code class="notranslate">#ff00ff<span class="ml-1 d-inline-block border circle color-border-subtle" style="background-color: #ff00ff; height: 8px; width: 8px;"></span></code>) could work well since it has been used as a transparency key in images without alpha support.</li>
</ul>
<p dir="auto">This keeps the templates clean without requiring modifications to the SVG structure.<br>
That said, going beyond this, we’d run into:</p>
<h3 dir="auto">Element Reuse</h3>
<p dir="auto">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 <code class="notranslate"><use></code> elements in each entry.<br>
But this means those overlapping definitions get tucked away in <code class="notranslate"><defs></code>, <code class="notranslate"><symbol></code>, or hidden elements like <code class="notranslate">d-none</code>.<br>
So putting that 1:1 in an SVG file isn’t ideal.<br>
A better approach could be:</p>
<ul dir="auto">
<li>Putting each definition in a separate SVG in a subdirectory, prefixing the element IDs with the folder name, and removing duplicate definitions.</li>
<li>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.</li>
</ul>
<p dir="auto">That should cover all currently inlined SVGs.</p><p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/issues/5880#issuecomment-2774654320">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLKJVQQJHXK2PZJPWE32XTKVDAVCNFSM6AAAAAB2KIRQGKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDONZUGY2TIMZSGA">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLIWEN46LTBP7SCEVFL2XTKVDA5CNFSM6AAAAAB2KIRQGKWGG33NNVSW45C7OR4XAZNMJFZXG5LFINXW23LFNZ2KUY3PNVWWK3TUL5UWJTVFMHOXA.gif" height="1" width="1" alt="" /><span style="color: transparent; font-size: 0; display: none; visibility: hidden; overflow: hidden; opacity: 0; width: 0; height: 0; max-width: 0; max-height: 0; mso-hide: all">Message ID: <span><openstreetmap/openstreetmap-website/issues/5880/2774654320</span><span>@</span><span>github</span><span>.</span><span>com></span></span></p>
</span>


<div style="display: flex; flex-wrap: wrap; white-space: pre-wrap; align-items: center; "><img alt="hlfan" height="20" width="20" style="border-radius:50%; margin-right: 4px;" decoding="async" src="https://avatars.githubusercontent.com/u/50826859?s=20&v=4" /><strong>hlfan</strong> left a comment <a href="https://github.com/openstreetmap/openstreetmap-website/issues/5880#issuecomment-2774654320">(openstreetmap/openstreetmap-website#5880)</a></div>
<p dir="auto">Some SVGs could follow a straightforward process: read the file and remove unnecessary attributes, like <code class="notranslate">xmlns</code>.<br>
Like the magnifying glass in the search bar:<br>
<a href="https://github.com/openstreetmap/openstreetmap-website/blob/2075eb8329e5e011e8acaa90ade8229f6c9ea88b/app/views/layouts/_search.html.erb#L16-L23">https://github.com/openstreetmap/openstreetmap-website/blob/2075eb8329e5e011e8acaa90ade8229f6c9ea88b/app/views/layouts/_search.html.erb#L16-L23</a><br>
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.<br>
Some icons, like those in <code class="notranslate">about.html</code> and <code class="notranslate">welcome.html</code>, also need extra CSS classes.</p>
<h3 dir="auto">Handling <code class="notranslate">currentColor</code></h3>
<p dir="auto">For icons using <code class="notranslate">currentColor</code>, we could:</p>
<ul dir="auto">
<li>Add a <code class="notranslate">color</code> attribute in the <code class="notranslate"><svg></code> root (though I’m not sure how well editors handle that), or</li>
<li>Use a placeholder color that gets replaced with <code class="notranslate">currentColor</code>.<br>
Magenta (<code class="notranslate">#ff00ff<span class="ml-1 d-inline-block border circle color-border-subtle" style="background-color: #ff00ff; height: 8px; width: 8px;"></span></code>) could work well since it has been used as a transparency key in images without alpha support.</li>
</ul>
<p dir="auto">This keeps the templates clean without requiring modifications to the SVG structure.<br>
That said, going beyond this, we’d run into:</p>
<h3 dir="auto">Element Reuse</h3>
<p dir="auto">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 <code class="notranslate"><use></code> elements in each entry.<br>
But this means those overlapping definitions get tucked away in <code class="notranslate"><defs></code>, <code class="notranslate"><symbol></code>, or hidden elements like <code class="notranslate">d-none</code>.<br>
So putting that 1:1 in an SVG file isn’t ideal.<br>
A better approach could be:</p>
<ul dir="auto">
<li>Putting each definition in a separate SVG in a subdirectory, prefixing the element IDs with the folder name, and removing duplicate definitions.</li>
<li>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.</li>
</ul>
<p dir="auto">That should cover all currently inlined SVGs.</p>

<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/issues/5880#issuecomment-2774654320">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLKJVQQJHXK2PZJPWE32XTKVDAVCNFSM6AAAAAB2KIRQGKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDONZUGY2TIMZSGA">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLIWEN46LTBP7SCEVFL2XTKVDA5CNFSM6AAAAAB2KIRQGKWGG33NNVSW45C7OR4XAZNMJFZXG5LFINXW23LFNZ2KUY3PNVWWK3TUL5UWJTVFMHOXA.gif" height="1" width="1" alt="" /><span style="color: transparent; font-size: 0; display: none; visibility: hidden; overflow: hidden; opacity: 0; width: 0; height: 0; max-width: 0; max-height: 0; mso-hide: all">Message ID: <span><openstreetmap/openstreetmap-website/issues/5880/2774654320</span><span>@</span><span>github</span><span>.</span><span>com></span></span></p>

<script type="application/ld+json">[
{
"@context": "http://schema.org",
"@type": "EmailMessage",
"potentialAction": {
"@type": "ViewAction",
"target": "https://github.com/openstreetmap/openstreetmap-website/issues/5880#issuecomment-2774654320",
"url": "https://github.com/openstreetmap/openstreetmap-website/issues/5880#issuecomment-2774654320",
"name": "View Issue"
},
"description": "View this Issue on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>