Nuxt•3mo ago

Handling large SVGs

Hello, 1. I have a content site that I am startically rendering. 2. I have SVGs that I want to include on certain pages 3. I want to be able to control the sizing of the SVG programmatically based on the screen so my strategy was to create vue components like this for the SVGS

<template>
  <svg :w="w" :h="h" <!--- rest of svg --> </svg>
</template>

<script setup>
const { w, h } = defineProps({
  w: {
    type: Number,
    default: 500,
  },
  h: {
    type: Number,
    default: 500,
  },
});
</script>

<template>
  <svg :w="w" :h="h" <!--- rest of svg --> </svg>
</template>

<script setup>
const { w, h } = defineProps({
  w: {
    type: Number,
    default: 500,
  },
  h: {
    type: Number,
    default: 500,
  },
});
</script>

this worked really well, except because the SVGs are so large the component file is large and I cannot deploy it easily on nuxthub/cloudflare. I was recommended to move to the SVGs to the /public/ folder however this means two things: 1. I need to fetch the SVGs in onmounted, so there is a loading flash when they load 2. I cannot use props to control the sizing of the SVGs according to page logic What is the best strategy for managing large SVGs?

1 Reply

hiimmox•3mo ago

Have you tried with vite-svg-loader ? You could use SVGO to optimize your SVG. Otherwise, maybe try fetching in the server with useAsyncData ?

Gaming

Programming

Handling large SVGs