<div style="display: flex; flex-wrap: wrap; white-space: pre-wrap; align-items: center; "><img height="20" width="20" style="border-radius:50%; margin-right: 4px;" decoding="async" src="https://avatars.githubusercontent.com/u/1231218?s=20&v=4" /><strong>1ec5</strong> left a comment <a href="https://github.com/openstreetmap/openstreetmap-website/issues/5880#issuecomment-3063135535">(openstreetmap/openstreetmap-website#5880)</a></div>
<p dir="auto">Pardon my ignorance, but could someone remind me why we wound up using inline SVGs all over in the first place? Was there a particular benefit we were aiming for, or is it just convenient? I see some potential tangible benefits of separate source files:</p>
<ul dir="auto">
<li>We can visually inspect any changes to the image directly inside GitHub’s code review interface, just as with a PNG or JPEG. <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/tomhughes/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/tomhughes">@tomhughes</a> <a href="https://github.com/openstreetmap/openstreetmap-website/pull/5884#issuecomment-2898778060" data-hovercard-type="pull_request" data-hovercard-url="/openstreetmap/openstreetmap-website/pull/5884/hovercard">doesn’t know much about SVG</a>, but he should be able to take one look at the change and tell whether it’s going to change the image size, mess with its colors, or introduce esoteric syntax that popular SVG renderers will mangle.</li>
<li>We could more easily integrate something like <a href="https://svgo.dev/" rel="nofollow">SVGO</a> to lint and optimize the SVG, minimizing the things the reviewer would have to nitpick about more manually.</li>
<li>It would promote reuse. Projects like iD have seen their icons get reused in other projects because it’s easier to find and extract them from the project.</li>
</ul>

<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-3063135535">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLOZHCFPVELHRN4NDH33H7XHNAVCNFSM6AAAAAB2KIRQGKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTANRTGEZTKNJTGU">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLNHBGIDQMVO2ZKHMNT3H7XHNA5CNFSM6AAAAAB2KIRQGKWGG33NNVSW45C7OR4XAZNMJFZXG5LFINXW23LFNZ2KUY3PNVWWK3TUL5UWJTVWSO6S6.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/3063135535</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-3063135535",
"url": "https://github.com/openstreetmap/openstreetmap-website/issues/5880#issuecomment-3063135535",
"name": "View Issue"
},
"description": "View this Issue on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>