Skip to content

Commit 11a74a4

Browse files
mina86mina86
committed
logos: replace PNG images on the Community/Logos page with SVG
Virtually all browsers support SVG at this point.¹ Replace the PNG images on the Logos page with SVG. This has two benefits: the bandwidth is reduced from 24KB to 2.4KB and the SVG images can be scaled to any size (e.g. if user zooms in). To make this happen, change the SVG logo images slightly: - merge g, i and t PATHs into a single PATH element, - add IDs to the icon and text PATHs and - if fill colour is the same for both, move the FILL attribute to root SVG element. Those changes make it possible to USE the logo and text individually and change their FILL colour. This way, the Logos page needs to reference only one SVG file. The one visual difference is in handling dark theme. The website has a global style which reduces brightness of all IMG elements. This causes the logos to look darker than they are in reality when viewing the page in dark mode. With this change, the logo colours are unaffected by the theme. ¹ https://caniuse.com/svg-html5 Signed-off-by: Michał Nazarewicz <mina86@mina86.com>
1 parent 672dfc1 commit 11a74a4

13 files changed

+58
-17
lines changed

‎content/community/logos.html‎

Lines changed: 39 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,30 @@
99
- /downloads/logos.html
1010
---
1111

12+
<style>
13+
.light-theme-logo { background: var(--light-theme-logo-bg, none) }
14+
.dark-theme-logo { background: var(--dark-theme-logo-bg, none) }
15+
16+
@media screen and (prefers-color-scheme: light) {
17+
:root { --dark-theme-logo-bg: #333; }
18+
}
19+
@media screen and (prefers-color-scheme: dark) {
20+
:root { --light-theme-logo-bg: #fcfcfa; }
21+
}
22+
:root[data-theme="light"] { --light-theme-logo-bg: none; --dark-theme-logo-bg: #333 }
23+
:root[data-theme="dark"] { --light-theme-logo-bg: #fcfcfa; --dark-theme-logo-bg: none }
24+
</style>
25+
1226
<div id="main">
1327
<h1>Logos</h1>
1428
<div class="two-column">
1529
<div class="column-left">
1630
<ul class="content-list">
1731
<li>
18-
<a href=""><img src="{{< relurl "images/logos/2color-lightbg@2x.png" >}}" width="294", height="100"></a>
32+
<svg width="294" height="100" viewBox="-10 -10 239 112" class="light-theme-logo">
33+
<use href="{{< relurl "images/logos/downloads/Git-Logo-Black.svg" >}}#icon" fill="#f03c2e"/>
34+
<use href="{{< relurl "images/logos/downloads/Git-Logo-Black.svg" >}}#text" fill="#362701"/>
35+
</svg>
1936
<h4>Full color Git logo for light backgrounds</h4>
2037
<p class="description">
2138
<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>
2643
</p>
2744
</li>
2845
<li>
29-
<a href=""><img src="{{< relurl "images/logos/1color-orange-lightbg@2x.png" >}}" width="294", height="100"></a>
46+
<svg width="294" height="100" viewBox="-10 -10 239 112" class="light-theme-logo">
47+
<use href="{{< relurl "images/logos/downloads/Git-Logo-Black.svg" >}}#icon" fill="#f03c2e"/>
48+
<use href="{{< relurl "images/logos/downloads/Git-Logo-Black.svg" >}}#text" fill="#f03c2e"/>
49+
</svg>
3050
<h4>Orange Git logo for light backgrounds</h4>
3151
<p class="description">
3252
<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>
3757
</p>
3858
</li>
3959
<li>
40-
<a href=""><img src="{{< relurl "images/logos/1color-lightbg@2x.png" >}}" width="294", height="100"></a>
60+
<svg width="294" height="100" viewBox="-10 -10 239 112" class="light-theme-logo">
61+
<use href="{{< relurl "images/logos/downloads/Git-Logo-Black.svg" >}}#icon" fill="#100f0d"/>
62+
<use href="{{< relurl "images/logos/downloads/Git-Logo-Black.svg" >}}#text" fill="#100f0d"/>
63+
</svg>
4164
<h4>One color Git logo for light backgrounds</h4>
4265
<p class="description">
4366
<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>
4871
</p>
4972
</li>
5073
<li>
51-
<a href=""><img src="{{< relurl "images/logos/1color-darkbg@2x.png" >}}" width="294", height="100"></a>
74+
<svg width="294" height="100" viewBox="-10 -10 239 112" class="dark-theme-logo">
75+
<use href="{{< relurl "images/logos/downloads/Git-Logo-Black.svg" >}}#icon" fill="#fff"/>
76+
<use href="{{< relurl "images/logos/downloads/Git-Logo-Black.svg" >}}#text" fill="#fff"/>
77+
</svg>
5278
<h4>One color Git logo for dark backgrounds</h4>
5379
<p class="description">
5480
<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>
6389
<div class="column-right">
6490
<ul class="content-list">
6591
<li>
66-
<a href=""><img src="{{< relurl "images/logos/logomark-orange@2x.png" >}}" width="100", height="100"></a>
92+
<svg width="294" height="100" viewBox="-10 -10 112 112" class="light-theme-logo">>
93+
<use href="{{< relurl "images/logos/downloads/Git-Logo-Black.svg" >}}#icon" fill="#f03c2e"/>
94+
</svg>
6795
<h4>Orange logomark for light backgrounds</h4>
6896
<p class="description">
6997
<a href="{{< relurl "images/logos/downloads/Git-Icon-1788C.png" >}}">PNG (bitmap)</a>
@@ -74,7 +102,9 @@ <h4>Orange logomark for light backgrounds</h4>
74102
</p>
75103
</li>
76104
<li>
77-
<a href=""><img src="{{< relurl "images/logos/logomark-black@2x.png" >}}" width="100", height="100"></a>
105+
<svg width="294" height="100" viewBox="-10 -10 112 112" class="light-theme-logo">>
106+
<use href="{{< relurl "images/logos/downloads/Git-Logo-Black.svg" >}}#icon" fill="#100f0d"/>
107+
</svg>
78108
<h4>Black logomark for light backgrounds</h4>
79109
<p class="description">
80110
<a href="{{< relurl "images/logos/downloads/Git-Icon-Black.png" >}}">PNG (bitmap)</a>
@@ -85,7 +115,9 @@ <h4>Black logomark for light backgrounds</h4>
85115
</p>
86116
</li>
87117
<li>
88-
<a href=""><img src="{{< relurl "images/logos/logomark-white@2x.png" >}}" width="100", height="100"></a>
118+
<svg width="294" height="100" viewBox="-10 -10 112 112" class="dark-theme-logo">
119+
<use href="{{< relurl "images/logos/downloads/Git-Logo-Black.svg" >}}#icon" fill="#fff"/>
120+
</svg>
89121
<h4>White logomark for dark backgrounds</h4>
90122
<p class="description">
91123
<a href="{{< relurl "images/logos/downloads/Git-Icon-White.png" >}}">PNG (bitmap)</a>

‎script/generate-git-logos.js‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -256,16 +256,26 @@ const iconScale = `scale(${+(92 / 78).toFixed(6)})`;
256256

257257
// Generates and saves the logo (icon + text) image file.
258258
async function generateLogo(variant, iconFill, textFill) {
259+
// If icon and text fills are the same, add a single fill attribute on the SVG
260+
// element.
261+
//
262+
// We’re doing this because we’re using the SVG file on the website via USE
263+
// element and want to override the FILL for logo and text. If the PATH
264+
// element has FILL we cannot USE it and then override FILL. However, if we
265+
// put FILL on SVG we can then USE the PATH elements and set FILL to a new
266+
// value.
267+
const [ svgFillAttr, iconFillAttr, textFillAttr ] = iconFill == textFill
268+
? [ ` fill="${iconFill}"`, '', '' ]
269+
: [ '', ` fill="${iconFill}"`, ` fill="${textFill}"` ];
270+
259271
const iconPath =
260-
`<path fill="${iconFill}"` +
272+
`<path id="icon"${iconFillAttr}` +
261273
` transform="${iconScale} ${iconTransform}" d="${iconGlyph}"/>`;
262274
const textPaths =
263-
`<path fill="${textFill}" d="${gGlyph}"/>` +
264-
`<path fill="${textFill}" d="${iGlyph}"/>` +
265-
`<path fill="${textFill}" d="${tGlyph}"/>`;
275+
`<path id="text"${textFillAttr} d="${gGlyph}${iGlyph}${tGlyph}"/>`;
266276
const svg =
267277
`<svg xmlns="http://www.w3.org/2000/svg" width="219pt" height="92pt"` +
268-
` viewBox="0 0 219 92">${iconPath}${textPaths}</svg>`;
278+
`${svgFillAttr} viewBox="0 0 219 92">${iconPath}${textPaths}</svg>`;
269279
saveFile(`Git-Logo-${variant}.svg`, svg);
270280

271281
saveFile(`Git-Logo-${variant}.png`, renderPng(svg));
@@ -296,7 +306,6 @@ async function generateLogo(variant, iconFill, textFill) {
296306
saveFile(`Git-Logo-${variant}.eps`, await buildEPS(ps, svg, { mode: 'height', value: 92 }));
297307
}
298308

299-
300309
// =========================== Variant definitions ===========================
301310

302311
const orange = '#f03c2e';

‎static/images/logos/1color-darkbg@2x.png‎

-4.84 KB
Binary file not shown.

‎static/images/logos/1color-lightbg@2x.png‎

-4.11 KB
Binary file not shown.

‎static/images/logos/1color-orange-lightbg@2x.png‎

-4.61 KB
Binary file not shown.

‎static/images/logos/2color-lightbg@2x.png‎

-4.79 KB
Binary file not shown.

‎static/images/logos/downloads/Git-Logo-1788C.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎static/images/logos/downloads/Git-Logo-2Color.svg‎

Lines changed: 1 addition & 1 deletion
Loading

0 commit comments

Comments
 (0)