Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Vite doesn't inline SVG assets

See original GitHub issue

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!

Issue Analytics

State:
Created 3 years ago
Reactions:2
Comments:6 (5 by maintainers)

Top GitHub Comments

3reactions

aleclarsoncommented, Dec 4, 2020

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.

1reaction

underfincommented, Dec 4, 2020

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

Top Results From Across the Web

How to add inline SVGs in a nuxt3 vite project

i found this works <img src="~/assets/images/icons/push-icon-chatops.svg" /> however i need an inline item. so i would do something like this < ...

Static Asset Handling

Assets smaller in bytes than the assetsInlineLimit option will be inlined as base64 data URLs. Git LFS placeholders are automatically excluded from inlining ......

Dealing with SVG icons in Vue + Vite

This is just a simple custom Vue component that accepts a prop called name and loads <InlineSvg /> under the hood. As a...

vite-svg-loader

Vite plugin to load SVG files as Vue components. Latest version: 4.0.0, last published: 21 hours ago. Start using vite-svg-loader in your project...

How to Import SVGs in a React and Vite app

Are you having difficulties importing SVGs into your React app? ... customizable, and can be animated using CSS when used inline.