Skip to content

Transform references in SVG file #20070

@yukulele

Description

@yukulele

Describe the bug

SVG files can import other resources.

The url of this resources should be transformed.

example:

logo.svg:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg viewBox="0 0 100 100" version="1.2" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
  <image href="./img.png">
</svg>

On build, logo.svg is converted in asset but img.png is not converted

I tried to add "logo.svg" to input files in vite.config.ts but it doesn't help.

Reproduction

https://stackblitz.com/edit/vitejs-vite-zuf5gzuh?file=vite.config.ts,index.html,src%2Flogo.svg

Steps to reproduce

input

  • index.html (containing <img src="logo.svg">)
  • logo.svg (containing <image href="img.png">)
  • img.png

output

  • index.html (containing <img src="logo-CaNPvlKk.svg">)
  • logo-CaNPvlKk.svg (containing <image href="img.png">)

expected output

  • index.html (containing <img src="logo-VewXuH7r.svg">)
  • logo-VewXuH7r.svg (containing <image href="img-BueZsOOv.png">)
  • img-BueZsOOv.png

System Info

System:
    OS: Linux 6.8 Ubuntu 24.04.2 LTS 24.04.2 LTS (Noble Numbat)
    CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
    Memory: 1.89 GB / 15.50 GB
    Container: Yes
    Shell: 4.0.2 - /usr/bin/fish
  Binaries:
    Node: 23.11.0 - ~/.volta/tools/image/node/23.11.0/bin/node
    npm: 10.9.2 - ~/.volta/tools/image/node/23.11.0/bin/npm
    bun: 1.2.11 - ~/.bun/bin/bun
  Browsers:
    Chromium: 136.0.7103.92
  npmPackages:
    vite: ^6.3.5 => 6.3.5

Used Package Manager

npm

Logs

No response

Validations

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions