<p dir="auto">Part of <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="50833928" data-permission-text="Title is private" data-url="https://github.com/openstreetmap/openstreetmap-website/issues/850" data-hovercard-type="issue" data-hovercard-url="/openstreetmap/openstreetmap-website/issues/850/hovercard" href="https://github.com/openstreetmap/openstreetmap-website/issues/850">#850</a></p>
<p dir="auto">This pull request replaces PNG icons with their minimized SVG variants, to ensure screens with high pixel densities can display the OpenStreetMap website with beautiful graphics.</p>
<p dir="auto">Currently includes:</p>
<ul dir="auto">
<li>Terms illustration (<a href="http://127.0.0.1:3000/user/terms" rel="nofollow">http://127.0.0.1:3000/user/terms</a>)</li>
<li>Sign up illustrations (<a href="http://127.0.0.1:3000/user/new" rel="nofollow">http://127.0.0.1:3000/user/new</a>)</li>
<li>Welcome sprites (<a href="http://127.0.0.1:3000/welcome" rel="nofollow">http://127.0.0.1:3000/welcome</a>)</li>
<li>Menu "hamburger" icon</li>
<li>CC BY SA copyright logo</li>
<li>Avatar default icons</li>
<li>OpenID connect icon (127.0.0.1:3000/login)</li>
<li>Routing sprites (<a href="http://127.0.0.1:3000/directions?engine=fossgis_osrm_car&route=52.0991%2C4.2970%3B51.9244%2C4.4778" rel="nofollow">http://127.0.0.1:3000/directions?engine=fossgis_osrm_car&route=52.0991%2C4.2970%3B51.9244%2C4.4778</a>)</li>
<li>OSM icon (<a href="http://127.0.0.1:3000" rel="nofollow">http://127.0.0.1:3000</a>)</li>
</ul>
<p dir="auto">For each of the icons, I replaced the PNG with the corresponding SVG. The PNG variant has been removed. Also, I simplified and minimized the SVGs for improved compression and less data transfer.</p>
<p dir="auto">In all cases, I can create separate pull requests if that makes the review process easier.</p>
<p dir="auto">Let me know if I can add more changes to this pull requests for the remaining images, or if I should create separate pull requests.</p>
<h3 dir="auto">Browser support</h3>
<p dir="auto">I could not find documentation about which browsers are supposed to be supported by the OpenStreetMap website.</p>
<p dir="auto">Internet Explorer 11 is the only browser that might have problems displaying SVG graphics related to scaling. This browser is no longer supported.</p>
<p dir="auto">See <a href="https://caniuse.com/svg" rel="nofollow">https://caniuse.com/svg</a></p>
<hr>
<h4>You can view, comment on, or merge this pull request online at:</h4>
<p> <a href='https://github.com/openstreetmap/openstreetmap-website/pull/4775'>https://github.com/openstreetmap/openstreetmap-website/pull/4775</a></p>
<h4>Commit Summary</h4>
<ul>
<li><a href="https://github.com/openstreetmap/openstreetmap-website/pull/4775/commits/f0c363b0337253e177930e1d1ea0efbbbb42b50f" class="commit-link">f0c363b</a> Terms illustration</li>
<li><a href="https://github.com/openstreetmap/openstreetmap-website/pull/4775/commits/6047bbeac60c0fc0c575d1925648dd9c2da1587a" class="commit-link">6047bbe</a> sign up illustration</li>
<li><a href="https://github.com/openstreetmap/openstreetmap-website/pull/4775/commits/abc5a117c82e06e5c12d59f2147821672cfc99f4" class="commit-link">abc5a11</a> sign up illustration + arm</li>
<li><a href="https://github.com/openstreetmap/openstreetmap-website/pull/4775/commits/5d1070ed4ffa8e99d10e1cc4e6f2046d1986c9d9" class="commit-link">5d1070e</a> welcome sprites</li>
<li><a href="https://github.com/openstreetmap/openstreetmap-website/pull/4775/commits/89278a5a866e421c533ffa01f4b828e2e5a49b25" class="commit-link">89278a5</a> minimize</li>
<li><a href="https://github.com/openstreetmap/openstreetmap-website/pull/4775/commits/f150de3570f80f84c0e5750a26eaccafb8946851" class="commit-link">f150de3</a> Menu icons</li>
<li><a href="https://github.com/openstreetmap/openstreetmap-website/pull/4775/commits/9bc0a3d358aea54f45cd4b8f8684fb7c13b25e43" class="commit-link">9bc0a3d</a> CC BY SA icon</li>
<li><a href="https://github.com/openstreetmap/openstreetmap-website/pull/4775/commits/c1b2be16b629b426b0ab344488b9798603c27b17" class="commit-link">c1b2be1</a> Avatar default SVG</li>
<li><a href="https://github.com/openstreetmap/openstreetmap-website/pull/4775/commits/a82c52e62f2bfb97a0966637bea0727e93e54227" class="commit-link">a82c52e</a> OpenID Connect icons</li>
<li><a href="https://github.com/openstreetmap/openstreetmap-website/pull/4775/commits/7ddd07d6249048f10920d2852a5828543060e15e" class="commit-link">7ddd07d</a> Routing sprites</li>
<li><a href="https://github.com/openstreetmap/openstreetmap-website/pull/4775/commits/c3098a7ef69d80a3e6a7a6c53a41b88600a4c7b2" class="commit-link">c3098a7</a> OSM logo</li>
</ul>
<h4 style="display: inline-block">File Changes </h4> <p style="display: inline-block">(<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4775/files">36 files</a>)</p>
<ul>
<li>
<strong>D</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4775/files#diff-6fd1c935a3c1b67aa40d7149f6c519b5c0f0b9a8420d2b0f5a220a6cb3243e00">app/assets/images/avatar_large.png</a>
(0)
</li>
<li>
<strong>D</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4775/files#diff-56695e97615531f3095756edc0f435e88c4c4e7cc735ddce73560e91f3bff3a8">app/assets/images/avatar_small.png</a>
(0)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4775/files#diff-8a3f2576e27e7467d54e4b8d2cf411f12d1b0b9391fa50cb2bf7c9bc967d101b">app/assets/images/cc-by-sa.svg</a>
(1)
</li>
<li>
<strong>D</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4775/files#diff-2f45d1cef24d517c22e5082590af27d0083b1581dc8cef9217f706f365a109f1">app/assets/images/cc_button.png</a>
(0)
</li>
<li>
<strong>D</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4775/files#diff-7183566ea15fd572c94e55bf57e6d0d646cff071ec92aa4756997df9c4a892cb">app/assets/images/menu-icon.png</a>
(0)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4775/files#diff-0cf05e945a757a50f9f1411d41679859e29eabf65b1c56d1f4d07b2123023191">app/assets/images/menu-icon.svg</a>
(1)
</li>
<li>
<strong>D</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4775/files#diff-612922797b116cb2cfbae6d8054aff8469815b3b38169e82f3bef5dbf205f147">app/assets/images/openid.png</a>
(0)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4775/files#diff-95e4f709f20494bde5ff0cb9e6994594d50cd7afbf521d366e3a12b7a2a2e17e">app/assets/images/openid.svg</a>
(1)
</li>
<li>
<strong>D</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4775/files#diff-513e293b35e1e9326527fe3ceaad9298e79b6be6f0737936dee97f9ee603586b">app/assets/images/openid_input.png</a>
(0)
</li>
<li>
<strong>D</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4775/files#diff-a844419c14de25577713276a3d3ab74bc21a407c8caf2d35a8c8697c7d50d639">app/assets/images/openid_small.png</a>
(0)
</li>
<li>
<strong>D</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4775/files#diff-b21e14be59ceb1780c03ad4c9d27c2397dc795314493e2804a9468c675f6f7ee">app/assets/images/osm_logo.png</a>
(0)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4775/files#diff-644c9eaf14ad602d344c280f56366473a14da6e404914fec34b2822806befb07">app/assets/images/osm_logo.svg</a>
(3337)
</li>
<li>
<strong>D</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4775/files#diff-3bdf4aee9a709b9464cf4abc66a9dbeb2e6027b7d29badd4446b24a735dcafb2">app/assets/images/osm_logo_256.png</a>
(0)
</li>
<li>
<strong>D</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4775/files#diff-7762fa949f0772a7475ec9f0ed8881fc7388106030a3447e1ba95623e49c8862">app/assets/images/osm_logo_30.png</a>
(0)
</li>
<li>
<strong>D</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4775/files#diff-af30d842002948a28bd39b07ebf2b6a67e94a4d945df43c71c241caf64e5689a">app/assets/images/osm_logo_512.png</a>
(0)
</li>
<li>
<strong>D</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4775/files#diff-2bd127a4102c1ae1ede0baab30c2fb1aa9d16cbee6819e1b9f17e3d43ac7ae6c">app/assets/images/routing-sprite.png</a>
(0)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4775/files#diff-f37d2e1cc8c9eb5d441c27d74864e85daeed2b4a53b4f609d0292cbdecfef778">app/assets/images/routing-sprite.svg</a>
(574)
</li>
<li>
<strong>D</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4775/files#diff-d93846a3d055e89f86fb6fb502ac9ec39fdba266a0d56dcbb24f4507dde27d77">app/assets/images/sign-up-illustration-arm.png</a>
(0)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4775/files#diff-3fa3674d9023ab321bc2c3a48b409ed6adafac0c5d328bf6a07778e8fe4bb592">app/assets/images/sign-up-illustration-arm.svg</a>
(1)
</li>
<li>
<strong>D</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4775/files#diff-53359ac8817b6fe6c7206a3e6616477dc4fd22d182d89603823b3288b61501da">app/assets/images/sign-up-illustration.png</a>
(0)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4775/files#diff-ca2139cd448efd0bd562c79d3edb28c36ab5ef5458dee73425abce40326564cb">app/assets/images/sign-up-illustration.svg</a>
(1360)
</li>
<li>
<strong>D</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4775/files#diff-21cd58f9c6940cab06f9e2d156fd04d5db7a2478e4d80317dd5fc033ec53bac3">app/assets/images/terms-illustration.png</a>
(0)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4775/files#diff-7f1933f50f5ca45b6ba4027d890af5c93e48c4026c614dd40dc8be7d5888f4cd">app/assets/images/terms-illustration.svg</a>
(1621)
</li>
<li>
<strong>D</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4775/files#diff-70b66f63e81a3cf93c7d44c94ccee2e2005be84a4e4f94498c6ee1b21dcd35f4">app/assets/images/welcome-sprite.png</a>
(0)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4775/files#diff-0cfb3e8d4665e47dabb3ed63574ce6335161014955a2e537ff55ef5f0dfe3b48">app/assets/images/welcome-sprite.svg</a>
(289)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4775/files#diff-e86a39e6d0b163f152db8843fc7d647a3f5d648de4a74f1732bef4474b6e5bc8">app/assets/stylesheets/common.scss</a>
(18)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4775/files#diff-3b130313f33af70814d5335654e0d36dd7225fde4555e9db4aeb59daf7da6924">app/helpers/open_graph_helper.rb</a>
(4)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4775/files#diff-b4fc005393d27baeb208c32dfc3bd576364fa35e6d76a69ea8b99da62616f80e">app/helpers/user_helper.rb</a>
(4)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4775/files#diff-55254045ba774e4c360d7bbfde054665072d2ab49abc3f21add15a37bba65a1c">app/mailers/user_mailer.rb</a>
(6)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4775/files#diff-7f8e6daf6b14dfa1ea3508bb5ef160b8da73d73418b58e89563c8505f8f99318">app/views/changesets/index.atom.builder</a>
(2)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4775/files#diff-6d2ef58207c92d1533287af551a075122ba98240a861819047a2ae77b7674f0b">app/views/layouts/_header.html.erb</a>
(2)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4775/files#diff-32662374155481d62f434c2617848b7d00825d0e4ea6e85d3a274dd82cc710d3">app/views/layouts/error.html.erb</a>
(2)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4775/files#diff-5654cfc158c888a40321c1e90f9ea3a0208ae80616b15ff0fa5e939b8f795e87">app/views/sessions/new.html.erb</a>
(2)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4775/files#diff-8cc9e288241b096c5a676a2dc5af351a55df8c6437641b62cb7adeb0050823e9">app/views/site/_any_questions.html.erb</a>
(2)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4775/files#diff-4a88c3e7ab4c125e4b2e18bfa3ebd3527a85edb0453170dc44db6a1a42ae9b06">app/views/site/welcome.html.erb</a>
(26)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4775/files#diff-59bb77618596eb59f4849a9e62ad9396772a8af3f05b6d08d6e53a39f8e02c97">test/helpers/user_helper_test.rb</a>
(2)
</li>
</ul>
<h4>Patch Links:</h4>
<ul>
<li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/4775.patch'>https://github.com/openstreetmap/openstreetmap-website/pull/4775.patch</a></li>
<li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/4775.diff'>https://github.com/openstreetmap/openstreetmap-website/pull/4775.diff</a></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/pull/4775">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLP63PPRCHXFOXLDGKTZBM6Y3AVCNFSM6AAAAABHOPQMTWVHI2DSMVQWIX3LMV43ASLTON2WKOZSGI4DOMRYGQ4DSMI">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLJ2IEC43UTXMUQ3ACLZBM6Y3A5CNFSM6AAAAABHOPQMTWWGG33NNVSW45C7OR4XAZNFJFZXG5LFVJRW63LNMVXHIX3JMTHIQVJSTM.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/pull/4775</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/pull/4775",
"url": "https://github.com/openstreetmap/openstreetmap-website/pull/4775",
"name": "View Pull Request"
},
"description": "View this Pull Request on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>