Nuxt•3mo ago

Prevent Nuxt Image from transforming SVGs inside Nuxt Content

Is there anyway to prevent Nuxt Image from transforming SVGs when they are written in the markdown format, besides the obvious <img> tag? Example:

[![Deploy to NuxtHub](https://hub.nuxt.com/button.svg)](https://hub.nuxt.com/new?repo=atinux/content-wind)

[![Deploy to NuxtHub](https://hub.nuxt.com/button.svg)](https://hub.nuxt.com/new?repo=atinux/content-wind)

4 Replies

kapa.ai•3mo ago

Hi @djmtype. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry, but the knowledge sources do not explicitly mention a built-in way to prevent Nuxt Image from transforming SVGs when they are referenced in Markdown files using Nuxt Content. The documentation covers how to use images in Markdown and how Nuxt Image handles different formats, including SVG, but it does not provide a specific configuration or method to exclude SVGs from being processed or transformed by Nuxt Image when used in this context Images in Markdown NuxtImg format prop. If you need SVGs to be served as-is, you might consider referencing them directly from the /public directory in your Markdown, as shown in the documentation, which should serve them statically without transformation:

![my image](/image.svg)

![my image](/image.svg)

However, if Nuxt Image is still transforming SVGs in your setup, the knowledge sources do not provide a documented way to disable this behavior specifically for SVGs. You may need to consult further resources or experiment with configuration, but this is not covered in the provided documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@710462032679272519> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

djmtypeOP•3mo ago

It also seems to ignore my densities in Nuxt config, as I still get 2x returned.

image: {
    format: ['webp'],
    densities: [1, 1.5], // Did not request 2x
    screens: {} // Doesn't matter if screens is specified or not
  },

image: {
    format: ['webp'],
    densities: [1, 1.5], // Did not request 2x
    screens: {} // Doesn't matter if screens is specified or not
  },

Retuned HTML:

<a href="https://hub.nuxt.com/new?repo=atinux/content-wind" rel="nofollow"><img alt="Deploy to NuxtHub" data-nuxt-img="" srcset="https://hub.nuxt.com/button.svg 1x, https://hub.nuxt.com/button.svg 1.5x, https://hub.nuxt.com/button.svg 2x" src="https://hub.nuxt.com/button.svg"></a>

<a href="https://hub.nuxt.com/new?repo=atinux/content-wind" rel="nofollow"><img alt="Deploy to NuxtHub" data-nuxt-img="" srcset="https://hub.nuxt.com/button.svg 1x, https://hub.nuxt.com/button.svg 1.5x, https://hub.nuxt.com/button.svg 2x" src="https://hub.nuxt.com/button.svg"></a>

djmtypeOP•3mo ago

I guess one workaround is to follow this instruction, but this isn't ideal for Nuxt Studio editors. https://github.com/nuxt/content/issues/390#issuecomment-1695894864

GitHub

Optimize images in markdown? · Issue #390 · nuxt/content

Hi there, How would I automatically optimize static images in markdown files on build?

Gaming

Programming

Prevent Nuxt Image from transforming SVGs inside Nuxt Content

Did you find this page helpful?