Vite: Vite doesn't inline SVG assets

Created on 3 Dec 2020 · 5Comments · Source: vitejs/vite

https://github.com/vitejs/vite/blob/480367b83a5d418e76a4a6bccd004abb97413c22/src/node/build/buildPluginAsset.ts#L60-L63
Hi. I noticed that svg files is explicitly excluded in the assetsInlineLimit feature, and I'm wondering why that is so. Renaming the extension to .SVG (thus bypassing the .endsWith check) works fine in my project.

This limit exists since the first time the feature was added, and I'm unable to find any kind of comments or documentation about it. Could someone shed some light on this please? Thanks!

Source

andylizi

👍1

Most helpful comment

We don't want to use base64 with svg files. See here: https://css-tricks.com/probably-dont-base64-svg/

Basically, base64 is larger in size, and svg files don't need it to be inlined. In fact, svg files even compress better without base64, because there's more repetition.

If svg files aren't inlined currently, they should be. Just without base64.

aleclarson on 4 Dec 2020

👍3

All 5 comments

Look like !id.endsWith(.svg) should be removed.. @antfu @aleclarson what do you think?

underfin on 4 Dec 2020

👎1

We don't want to use base64 with svg files. See here: https://css-tricks.com/probably-dont-base64-svg/

Basically, base64 is larger in size, and svg files don't need it to be inlined. In fact, svg files even compress better without base64, because there's more repetition.

If svg files aren't inlined currently, they should be. Just without base64.

aleclarson on 4 Dec 2020

👍3

@aleclarson Thanks for yor clarify.

underfin on 5 Dec 2020

Are there plans to support inlining svg without base64?

andylizi on 5 Dec 2020