logos: optimise SVG images (#2139)

The main motivation for this change was unnecessary double point in the
icon path. The top point of the right corner of the icon are in fact two
separate points. I’ve used Inkscape’s ‘Join selected nodes’ function to
merge them. I’ve then rounded coordinates in the path to two decimal
points (again using Inkscape) and finally using a simple regex eliminate
unnecessary spaces in the `d` attribute.

Working on that I've noticed that the clip paths don’t actually do
anything: the paths do not go over the clip paths. I’ve thus removed the
clip paths.

The styles for the path were over-specified. `fill-opacity: 1`,
`fill-rule: nonzero` and `stroke: none` are all initial values of the
properties, so I’ve stripped them out.

Finally, in the Logo images, the `width` attribute was specified without
a unit. To match the `height` and the Icon images, I’ve added `pt` unit.

Cc: @jasonlong

Author: dscho

content/community/logos.html

@@ -9,13 +9,30 @@
 - /downloads/logos.html
 ---
 
+<style>
+.light-theme-logo { background: var(--light-theme-logo-bg, none) }
+.dark-theme-logo  { background: var(--dark-theme-logo-bg, none) }
+
+@media screen and (prefers-color-scheme: light) {
+  :root { --dark-theme-logo-bg: #333; }
+}
+@media screen and (prefers-color-scheme: dark) {
+  :root { --light-theme-logo-bg: #fcfcfa; }
+}
+:root[data-theme="light"] { --light-theme-logo-bg: none; --dark-theme-logo-bg: #333 }
+:root[data-theme="dark"]  { --light-theme-logo-bg: #fcfcfa; --dark-theme-logo-bg: none }
+</style>
+
 <div id="main">
   <h1>Logos</h1>
   <div class="two-column">
     <div class="column-left">
       <ul class="content-list">
         <li>
-          <img src="{{< relurl "images/logos/2color-lightbg@2x.png" >}}" width="294" height="100">
+          <svg width="294" height="100" viewBox="-10 -10 239 112" class="light-theme-logo">
+            <use href="{{< relurl "images/logos/downloads/Git-Logo-Black.svg" >}}#icon" fill="#f03c2e"/>
+            <use href="{{< relurl "images/logos/downloads/Git-Logo-Black.svg" >}}#text" fill="#362701"/>
+          </svg>
           <h4>Full color Git logo for light backgrounds</h4>
           <p class="description">
             <a href="{{< relurl "images/logos/downloads/Git-Logo-2Color.png" >}}">PNG (bitmap)</a>
@@ -26,7 +43,10 @@ <h4>Full color Git logo for light backgrounds</h4>
           </p>
         </li>
         <li>
-          <img src="{{< relurl "images/logos/1color-orange-lightbg@2x.png" >}}" width="294" height="100">
+          <svg width="294" height="100" viewBox="-10 -10 239 112" class="light-theme-logo">
+            <use href="{{< relurl "images/logos/downloads/Git-Logo-Black.svg" >}}#icon" fill="#f03c2e"/>
+            <use href="{{< relurl "images/logos/downloads/Git-Logo-Black.svg" >}}#text" fill="#f03c2e"/>
+          </svg>
           <h4>Orange Git logo for light backgrounds</h4>
           <p class="description">
             <a href="{{< relurl "images/logos/downloads/Git-Logo-1788C.png" >}}">PNG (bitmap)</a>
@@ -37,7 +57,10 @@ <h4>Orange Git logo for light backgrounds</h4>
           </p>
         </li>
         <li>
-          <img src="{{< relurl "images/logos/1color-lightbg@2x.png" >}}" width="294" height="100">
+          <svg width="294" height="100" viewBox="-10 -10 239 112" class="light-theme-logo">
+            <use href="{{< relurl "images/logos/downloads/Git-Logo-Black.svg" >}}#icon" fill="#100f0d"/>
+            <use href="{{< relurl "images/logos/downloads/Git-Logo-Black.svg" >}}#text" fill="#100f0d"/>
+          </svg>
           <h4>One color Git logo for light backgrounds</h4>
           <p class="description">
             <a href="{{< relurl "images/logos/downloads/Git-Logo-Black.png" >}}">PNG (bitmap)</a>
@@ -48,7 +71,10 @@ <h4>One color Git logo for light backgrounds</h4>
           </p>
         </li>
         <li>
-          <img src="{{< relurl "images/logos/1color-darkbg@2x.png" >}}" width="294" height="100">
+          <svg width="294" height="100" viewBox="-10 -10 239 112" class="dark-theme-logo">
+            <use href="{{< relurl "images/logos/downloads/Git-Logo-Black.svg" >}}#icon" fill="#fff"/>
+            <use href="{{< relurl "images/logos/downloads/Git-Logo-Black.svg" >}}#text" fill="#fff"/>
+          </svg>
           <h4>One color Git logo for dark backgrounds</h4>
           <p class="description">
             <a href="{{< relurl "images/logos/downloads/Git-Logo-White.png" >}}">PNG (bitmap)</a>
@@ -63,7 +89,9 @@ <h4>One color Git logo for dark backgrounds</h4>
     <div class="column-right">
       <ul class="content-list">
         <li>
-          <img src="{{< relurl "images/logos/logomark-orange@2x.png" >}}" width="100" height="100">
+          <svg width="294" height="100" viewBox="-10 -10 112 112" class="light-theme-logo">>
+            <use href="{{< relurl "images/logos/downloads/Git-Logo-Black.svg" >}}#icon" fill="#f03c2e"/>
+          </svg>
           <h4>Orange logomark for light backgrounds</h4>
           <p class="description">
             <a href="{{< relurl "images/logos/downloads/Git-Icon-1788C.png" >}}">PNG (bitmap)</a>
@@ -74,7 +102,9 @@ <h4>Orange logomark for light backgrounds</h4>
           </p>
         </li>
         <li>
-          <img src="{{< relurl "images/logos/logomark-black@2x.png" >}}" width="100" height="100">
+          <svg width="294" height="100" viewBox="-10 -10 112 112" class="light-theme-logo">>
+            <use href="{{< relurl "images/logos/downloads/Git-Logo-Black.svg" >}}#icon" fill="#100f0d"/>
+          </svg>
           <h4>Black logomark for light backgrounds</h4>
           <p class="description">
             <a href="{{< relurl "images/logos/downloads/Git-Icon-Black.png" >}}">PNG (bitmap)</a>
@@ -85,7 +115,9 @@ <h4>Black logomark for light backgrounds</h4>
           </p>
         </li>
         <li>
-          <img src="{{< relurl "images/logos/logomark-white@2x.png" >}}" width="100" height="100">
+          <svg width="294" height="100" viewBox="-10 -10 112 112" class="dark-theme-logo">
+            <use href="{{< relurl "images/logos/downloads/Git-Logo-Black.svg" >}}#icon" fill="#fff"/>
+          </svg>
           <h4>White logomark for dark backgrounds</h4>
           <p class="description">
             <a href="{{< relurl "images/logos/downloads/Git-Icon-White.png" >}}">PNG (bitmap)</a>