Fix SVG miscoloring issue

Author: hhvrc

src/lib/components/svg/ChromeLogo.svelte

@@ -19,12 +19,12 @@
 >
   <title>Google Chrome</title>
   <defs>
-    <linearGradient id="a" x1="3.2173" y1="15" x2="44.7812" y2="15" gradientUnits="userSpaceOnUse">
+    <linearGradient id="chrome-a" x1="3.2173" y1="15" x2="44.7812" y2="15" gradientUnits="userSpaceOnUse">
       <stop offset="0" stop-color="#d93025" />
       <stop offset="1" stop-color="#ea4335" />
     </linearGradient>
     <linearGradient
-      id="b"
+      id="chrome-b"
       x1="20.7219"
       y1="47.6791"
       x2="41.5039"
@@ -35,7 +35,7 @@
       <stop offset="1" stop-color="#fbbc04" />
     </linearGradient>
     <linearGradient
-      id="c"
+      id="chrome-c"
       x1="26.5981"
       y1="46.5015"
       x2="5.8161"
@@ -52,15 +52,15 @@
   />
   <path
     d="M24,12H44.7812a23.9939,23.9939,0,0,0-41.5639.0029L13.6079,30l.0093-.0024A11.9852,11.9852,0,0,1,24,12Z"
-    style="fill:url(#a)"
+    style="fill:url(#chrome-a)"
   />
   <circle cx="24" cy="24" r="9.5" fill="#1a73e8" />
   <path
     d="M34.3913,30.0029,24,48A24,24,0,0,0,44.78,12.0031H23.9989l-.0025.0093A11.985,11.985,0,0,1,34.3913,30.0029Z"
-    style="fill:url(#b)"
+    style="fill:url(#chrome-b)"
   />
   <path
     d="M13.6086,30.0031,3.218,12.006A24,24,0,0,0,24.0025,48L34.3931,30.0029l-.0067-.0068a11.9852,11.9852,0,0,1-20.7778.007Z"
-    style="fill:url(#c)"
+    style="fill:url(#chrome-c)"
   />
 </svg>

src/lib/components/svg/EdgeLogo.svelte

@@ -20,7 +20,7 @@
   <title>Microsoft Edge</title>
   <defs>
     <radialGradient
-      id="b"
+      id="edge-b"
       cx="161.8"
       cy="68.9"
       r="95.4"
@@ -30,7 +30,7 @@
       <stop offset=".7" stop-opacity="0" /><stop offset=".9" stop-opacity=".5" /><stop offset="1" />
     </radialGradient>
     <radialGradient
-      id="d"
+      id="edge-d"
       cx="-340.3"
       cy="63"
       r="143.2"
@@ -42,7 +42,7 @@
       <stop offset="1" />
     </radialGradient>
     <radialGradient
-      id="e"
+      id="edge-e"
       cx="113.4"
       cy="570.2"
       r="202.4"
@@ -56,7 +56,7 @@
       <stop offset=".7" stop-color="#36c752" />
     </radialGradient>
     <radialGradient
-      id="f"
+      id="edge-f"
       cx="376.5"
       cy="568"
       r="97.3"
@@ -67,7 +67,7 @@
       <stop offset="1" stop-color="#66eb6e" stop-opacity="0" />
     </radialGradient>
     <linearGradient
-      id="a"
+      id="edge-a"
       x1="63.3"
       y1="84"
       x2="241.7"
@@ -79,7 +79,7 @@
       <stop offset="1" stop-color="#114a8b" />
     </linearGradient>
     <linearGradient
-      id="c"
+      id="edge-c"
       x1="157.3"
       y1="161.4"
       x2="46"
@@ -96,31 +96,31 @@
   <path
     d="M235.7 195.5a93.7 93.7 0 0 1-10.6 4.7 101.9 101.9 0 0 1-35.9 6.4c-47.3 0-88.5-32.5-88.5-74.3a31.5 31.5 0 0 1 16.4-27.3c-42.8 1.8-53.8 46.4-53.8 72.5 0 74 68.1 81.4 82.8 81.4 7.9 0 19.8-2.3 27-4.6l1.3-.4a128.3 128.3 0 0 0 66.6-52.8 4 4 0 0 0-5.3-5.6Z"
     transform="translate(-4.6 -5)"
-    style="fill:url(#a)"
+    style="fill:url(#edge-a)"
   />
   <path
     d="M235.7 195.5a93.7 93.7 0 0 1-10.6 4.7 101.9 101.9 0 0 1-35.9 6.4c-47.3 0-88.5-32.5-88.5-74.3a31.5 31.5 0 0 1 16.4-27.3c-42.8 1.8-53.8 46.4-53.8 72.5 0 74 68.1 81.4 82.8 81.4 7.9 0 19.8-2.3 27-4.6l1.3-.4a128.3 128.3 0 0 0 66.6-52.8 4 4 0 0 0-5.3-5.6Z"
     transform="translate(-4.6 -5)"
-    style="isolation:isolate;opacity:.35;fill:url(#b)"
+    style="isolation:isolate;opacity:.35;fill:url(#edge-b)"
   />
   <path
     d="M110.3 246.3A79.2 79.2 0 0 1 87.6 225a80.7 80.7 0 0 1 29.5-120c3.2-1.5 8.5-4.1 15.6-4a32.4 32.4 0 0 1 25.7 13 31.9 31.9 0 0 1 6.3 18.7c0-.2 24.5-79.6-80-79.6-43.9 0-80 41.6-80 78.2a130.2 130.2 0 0 0 12.1 56 128 128 0 0 0 156.4 67 75.5 75.5 0 0 1-62.8-8Z"
     transform="translate(-4.6 -5)"
-    style="fill:url(#c)"
+    style="fill:url(#edge-c)"
   />
   <path
     d="M110.3 246.3A79.2 79.2 0 0 1 87.6 225a80.7 80.7 0 0 1 29.5-120c3.2-1.5 8.5-4.1 15.6-4a32.4 32.4 0 0 1 25.7 13 31.9 31.9 0 0 1 6.3 18.7c0-.2 24.5-79.6-80-79.6-43.9 0-80 41.6-80 78.2a130.2 130.2 0 0 0 12.1 56 128 128 0 0 0 156.4 67 75.5 75.5 0 0 1-62.8-8Z"
     transform="translate(-4.6 -5)"
-    style="opacity:.41;fill:url(#d);isolation:isolate"
+    style="opacity:.41;fill:url(#edge-d);isolation:isolate"
   />
   <path
     d="M157 153.8c-.9 1-3.4 2.5-3.4 5.6 0 2.6 1.7 5.2 4.8 7.3 14.3 10 41.4 8.6 41.5 8.6a59.6 59.6 0 0 0 30.3-8.3 61.4 61.4 0 0 0 30.4-52.9c.3-22.4-8-37.3-11.3-43.9C228 28.8 182.3 5 132.6 5a128 128 0 0 0-128 126.2c.5-36.5 36.8-66 80-66 3.5 0 23.5.3 42 10a72.6 72.6 0 0 1 30.9 29.3c6.1 10.6 7.2 24.1 7.2 29.5s-2.7 13.3-7.8 19.9Z"
     transform="translate(-4.6 -5)"
-    style="fill:url(#e)"
+    style="fill:url(#edge-e)"
   />
   <path
     d="M157 153.8c-.9 1-3.4 2.5-3.4 5.6 0 2.6 1.7 5.2 4.8 7.3 14.3 10 41.4 8.6 41.5 8.6a59.6 59.6 0 0 0 30.3-8.3 61.4 61.4 0 0 0 30.4-52.9c.3-22.4-8-37.3-11.3-43.9C228 28.8 182.3 5 132.6 5a128 128 0 0 0-128 126.2c.5-36.5 36.8-66 80-66 3.5 0 23.5.3 42 10a72.6 72.6 0 0 1 30.9 29.3c6.1 10.6 7.2 24.1 7.2 29.5s-2.7 13.3-7.8 19.9Z"
     transform="translate(-4.6 -5)"
-    style="fill:url(#f)"
+    style="fill:url(#edge-f)"
   />
 </svg>

src/lib/components/svg/OperaLogo.svelte

@@ -20,7 +20,7 @@
   <title>Opera</title>
   <defs>
     <linearGradient
-      id="a"
+      id="opera-a"
       gradientTransform="matrix(0 -54.944 -54.944 0 23.62 79.474)"
       gradientUnits="userSpaceOnUse"
       x2="1"
@@ -31,7 +31,7 @@
       <stop offset="1" stop-color="#a70014" />
     </linearGradient>
     <linearGradient
-      id="b"
+      id="opera-b"
       gradientTransform="matrix(0 -48.595 -48.595 0 37.854 76.235)"
       gradientUnits="userSpaceOnUse"
       x2="1"
@@ -44,11 +44,11 @@
   <g transform="matrix(1.3333 0 0 -1.3333 0 107.2)">
     <path
       d="m28.346 80.398c-15.655 0-28.346-12.691-28.346-28.346 0-15.202 11.968-27.609 26.996-28.313.44848-.02115.89766-.03314 1.3504-.03314 7.2574 0 13.876 2.7289 18.891 7.2137-3.3227-2.2036-7.2074-3.4715-11.359-3.4715-6.7504 0-12.796 3.3488-16.862 8.6297-3.1344 3.6999-5.1645 9.1691-5.3028 15.307v1.3349c.13821 6.1377 2.1683 11.608 5.302 15.307 4.0666 5.2809 10.112 8.6297 16.862 8.6297 4.1526 0 8.038-1.2679 11.361-3.4729-4.9904 4.4643-11.569 7.1876-18.786 7.2144-.03596 0-.07122.0014-.10718.0014z"
-      fill="url(#a)"
+      fill="url(#opera-a)"
     />
     <path
       d="m19.016 68.025c2.6013 3.0709 5.9607 4.9227 9.631 4.9227 8.2524 0 14.941-9.356 14.941-20.897s-6.6891-20.897-14.941-20.897c-3.6703 0-7.0297 1.851-9.6303 4.922 4.0659-5.2809 10.111-8.6297 16.862-8.6297 4.1519 0 8.0366 1.2679 11.359 3.4715 5.802 5.1906 9.4554 12.735 9.4554 21.133 0 8.397-3.6527 15.941-9.4533 21.131-3.3234 2.205-7.2088 3.4729-11.361 3.4729-6.7504 0-12.796-3.3488-16.862-8.6297"
-      fill="url(#b)"
+      fill="url(#opera-b)"
     />
   </g>
 </svg>