Should i load SVG files with @nuxt/image or use a simple img tag?

[oemer-aran]

Comparison

With img tag

using string:

<img src="/images/my-vector.svg"/>

or using import (only relevant for local images):

<img :src="importedSvg"/>
//...
import importedSvg from "@base/assets/images/my-vector.svg"

With nuxt-img

only string possible:

<nuxt-img src="/images/my-vector.svg"/>

My thoughts

• Using nuxt-img or nuxt-picture for every image keeps the code consistent and easy to understand
• Using simple img tag for .svg files would save an unnecessary request to the ipx endpoint
• Using simple img tag allows to use imported .svg

What is your opinion? Is there an official recommendation?

[robinscholz]

I’d suggest inlining them as Vue components with vite-svg-loader

import svgLoader from 'vite-svg-loader'

export default defineNuxtConfig({
  vite: {
    plugins: [
      svgLoader(),
    ],
  },
})

[kalnode]

What's the advantage of this? That SVGO optimization is automatically applied to SVGs ?

[robinscholz]

@kalnode

Yes, that’s one advantage. Other than that I’d argue its good practice to include svgs as actual markup.

[kalnode]

Yes, I lean towards (plain <svg>'s). However if a library presents multiple advantages then I may leverage it, however if the main selling point of SVGO is optimization, there's less appeal to me as my SVGs are manually optimized to begin with.

[robinscholz]

biggest selling point imo for inline svg’s is adding fill="currentColor" and having the ability to style them with css text-color, for i.e. light and dark mode.

[kalnode]

That's one of my manual optimizations lol. For year's I've been adding fill="currentColor".
For dynamic svg's (like uploaded by end-users) I'll for-sure be checking out SVGO to do this stuff automatically.

[yudin-s]

I would not use NuxtImg for SVG by default.

For SVGs the usual image-optimization benefits are mostly not there: there is no useful raster resize/quality/format pipeline, and routing the file through IPX can add an unnecessary request/transform layer. If the SVG is a local icon or illustration, I would use one of these instead:

<img src="/images/my-vector.svg" alt="...">

or import it from assets if your setup needs bundling/fingerprinting:

<script setup lang="ts">
import iconUrl from "~/assets/images/my-vector.svg"
</script>

<template>
  <img :src="iconUrl" alt="...">
</template>

If you need to style the SVG internals, inline it as a Vue component, for example with vite-svg-loader, as mentioned above.

I would reserve NuxtImg / NuxtPicture for raster images where Nuxt Image can actually help: responsive sizes, provider URLs, format conversion, quality, CDN/provider integration, etc. NuxtImg can technically point at an SVG, but I would treat that as a consistency choice rather than an optimization choice.