<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">I've seen a lot of PRs recently where we are inlining SVGs into the output html, rather than having them as sprites or standalone images. I can see the benefit of doing so, particularly for the ability to set <code class="notranslate">stroke="currentColor"</code>.</p>
<p dir="auto">However, there are some downsides of putting them in the erb templates. It makes the icons hard to edit, for example with tools like Inkscape (without a lot of copy+pasting back and forward). For some erb templates it can also become a large amount of effectively "binary" data on show - it's not really possible to read the <code class="notranslate">path</code> and figure out what it shows or how to edit it, and so it's not much different than having inline PNG data.</p>
<p dir="auto">Is there another approach that we can use, that allows the SVGs to be inlined in the output, but kept as separate SVG files in the source code? Perhaps some <code class="notranslate">inline_svg</code> helpers that can read the files, output either the desired paths or the whole file, and that makes any changes required to convert the input file into what we want to output (e.g. changing the stroke colour) automatically?</p>
<p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/hlfan/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/hlfan">@hlfan</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/AntonKhorev/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/AntonKhorev">@AntonKhorev</a> you both have the most experience with these, is there something that I haven't considered?</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">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLLR2HKNSWG6KVKUOED2XQTUNAVCNFSM6AAAAAB2KIRQGKVHI2DSMVQWIX3LMV43ASLTON2WKOZSHE3DOMRRGQYDMNQ">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLPBCEJTM2B6Z7P6BLD2XQTUNA5CNFSM6AAAAAB2KIRQGKWGG33NNVSW45C7OR4XAZNFJFZXG5LFVJRW63LNMVXHIX3JMTHLBXAX6I.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</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="gravitystorm" height="20" width="20" style="border-radius:50%; margin-right: 4px;" decoding="async" src="https://avatars.githubusercontent.com/u/360803?s=20&v=4" /><strong>gravitystorm</strong> created an issue <a href="https://github.com/openstreetmap/openstreetmap-website/issues/5880">(openstreetmap/openstreetmap-website#5880)</a></div>
<p dir="auto">I've seen a lot of PRs recently where we are inlining SVGs into the output html, rather than having them as sprites or standalone images. I can see the benefit of doing so, particularly for the ability to set <code class="notranslate">stroke="currentColor"</code>.</p>
<p dir="auto">However, there are some downsides of putting them in the erb templates. It makes the icons hard to edit, for example with tools like Inkscape (without a lot of copy+pasting back and forward). For some erb templates it can also become a large amount of effectively "binary" data on show - it's not really possible to read the <code class="notranslate">path</code> and figure out what it shows or how to edit it, and so it's not much different than having inline PNG data.</p>
<p dir="auto">Is there another approach that we can use, that allows the SVGs to be inlined in the output, but kept as separate SVG files in the source code? Perhaps some <code class="notranslate">inline_svg</code> helpers that can read the files, output either the desired paths or the whole file, and that makes any changes required to convert the input file into what we want to output (e.g. changing the stroke colour) automatically?</p>
<p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/hlfan/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/hlfan">@hlfan</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/AntonKhorev/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/AntonKhorev">@AntonKhorev</a> you both have the most experience with these, is there something that I haven't considered?</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">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLLR2HKNSWG6KVKUOED2XQTUNAVCNFSM6AAAAAB2KIRQGKVHI2DSMVQWIX3LMV43ASLTON2WKOZSHE3DOMRRGQYDMNQ">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLPBCEJTM2B6Z7P6BLD2XQTUNA5CNFSM6AAAAAB2KIRQGKWGG33NNVSW45C7OR4XAZNFJFZXG5LFVJRW63LNMVXHIX3JMTHLBXAX6I.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</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",
"url": "https://github.com/openstreetmap/openstreetmap-website/issues/5880",
"name": "View Issue"
},
"description": "View this Issue on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>