Display: Add link to top bar logo + load logo svg first

assets/css/scss/atoms/_platform_logo.scss

@@ -0,0 +1,9 @@
+.platform-logo {
+  a {
+    @apply block;
+  }
+
+  img, picture {
+    @apply h-10 max-h-10 w-auto block;
+  }
+}

assets/css/scss/index.scss

@@ -29,6 +29,7 @@
 @import "atoms/messages";
 @import "atoms/overlay";
 @import "atoms/password";
+@import "atoms/platform_logo";
 @import "atoms/progressbar";
 @import "atoms/radio";
 @import "atoms/skeleton";

assets/vue/components/layout/PlatformLogo.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { usePlatformConfig } from "../../store/platformConfig"
 import { useVisualTheme } from "../../composables/theme"
+import BaseAppLink from "../basecomponents/BaseAppLink.vue"
 
 const platformConfigStore = usePlatformConfig()
 const { getThemeAssetUrl } = useVisualTheme()
@@ -9,9 +10,19 @@ const siteName = platformConfigStore.getSetting("platform.site_name")
 </script>
 
 <template>
-  <img
-    :alt="siteName"
-    :title="siteName"
-    :src="getThemeAssetUrl('images/header-logo.png')"
-  />
+  <div class="platform-logo">
+    <BaseAppLink :to="{ name: 'Index' }">
+      <picture>
+        <source
+          :srcset="getThemeAssetUrl('images/header-logo.svg')"
+          type="image/svg+xml"
+        />
+        <img
+          :alt="siteName"
+          :title="siteName"
+          :src="getThemeAssetUrl('images/header-logo.png')"
+        />
+      </picture>
+    </BaseAppLink>
+  </div>
 </template>