From 258b472aa584ce98bb58fefc729b594b6d13aa3e Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Sun, 19 Sep 2021 10:25:53 +0200
Subject: [PATCH] docs: fix graphic in safari (#43502)

Fixes that the "Loved by millions" graphic doesn't look correctly on Safari.

Note that this fix is somewhat repetitive, but I couldn't find a better one. These are the other things I tried:
* Setting units on the size of `#angular-logo`.
* Setting the size of `#angular-logo` inside the `style` tag.
* Setting the size with inline styles.

Fixes #43498.

PR Close #43502
---
 aio/content/images/marketing/home/loved-by-millions.svg | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/aio/content/images/marketing/home/loved-by-millions.svg b/aio/content/images/marketing/home/loved-by-millions.svg
index d2e8cfd240e..4cc8089e85e 100644
--- a/aio/content/images/marketing/home/loved-by-millions.svg
+++ b/aio/content/images/marketing/home/loved-by-millions.svg
@@ -5,12 +5,16 @@
   </style>
   <title>Loved by Millions</title>
   <defs>
-    <symbol id="angular-logo" viewBox="0 0 200 200" width="32" height="32">
+    <!--
+      The `transform` is necessary to work around a Safari issue (see #43498).
+      It's 0.16, because the view box is 200 and our target width is 32 (200 * 0.16 = 32).
+    -->
+    <g id="angular-logo" transform="scale(0.16)">
       <polygon points="100,0 6.9,33.2 21.1,156.3 100,200 178.9,156.3 193.1,33.2" fill="#dd0031" />
       <polygon points="100,0 100,200 178.9,156.3 193.1,33.2 100,0" fill="#c3002f" />
       <path d="M100,22.1L41.8,152.6h21.7l11.7-29.2h49.4l11.7,29.2h21.7L100,22.1z M117,105.4H83l17-40.9L117,105.4z"
         fill="#fff" />
-    </symbol>
+    </g>
   </defs>
   <rect class="water" width="1300" height="700" />
   <path class="land"