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.