fix: svg elements remove header info

Author: gureckis

components/ArrowDraw.vue

@@ -18,18 +18,7 @@ const colorscheme = computed(() => {
 </script>
 
 <template>
-  <svg
-    version="1.1"
-    id="Layer_1"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-    x="0px"
-    y="0px"
-    viewBox="0 0 196 73"
-    style="enable-background: new 0 0 196 73"
-    xml:space="preserve"
-    :width="width"
-  >
+  <svg viewBox="0 0 196 73" :width="width">
     <path
       class="st0"
       :class="colorscheme"

components/ArrowHeads.vue

@@ -16,14 +16,7 @@ const colorscheme = computed(() => {
 })
 </script>
 <template>
-  <svg
-    id="Layer_1"
-    data-name="Layer 1"
-    xmlns="http://www.w3.org/2000/svg"
-    version="1.1"
-    viewBox="0 0 356 204"
-    :width="width"
-  >
+  <svg viewBox="0 0 356 204" :width="width">
     <path
       class="cls-1"
       :class="colorscheme"

components/Box.vue

@@ -1,10 +1,9 @@
 <script setup>
 import { computed } from 'vue'
-import { resolveColor } from '../layoutHelper'
 const props = defineProps({
   shape: {
     type: String,
-    default: 's-s-2-100',
+    default: 's-s-2-10',
   },
   color: {
     type: String,

components/Thumb.vue

@@ -29,13 +29,7 @@ const thumbRotation = computed(() => {
 </script>
 
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    version="1.1"
-    viewBox="0 0 800 800"
-    :width="width"
-    :style="{ transform: thumbRotation }"
-  >
+  <svg viewBox="0 0 800 800" :width="width" :style="{ transform: thumbRotation }">
     <defs></defs>
     <g id="bg">
       <polygon