Skip to content

Support inlining SVG assets #1204

@andylizi

Description

@andylizi

I was asked to open another issue for this.

Describe the bug

Vite doesn't inline svg files when the documentation says it would.

Reproduction

https://bitbucket.org/andylizi/test-vite-svg-inline/

Expected behavior

  • logo.svg should be inlined, as assetsInlineLimit claims to inline any static asset files under the default 4kb limit.

    vite/src/node/config.ts

    Lines 315 to 320 in 9904cb1

    /**
    * Static asset files smaller than this number (in bytes) will be inlined as
    * base64 strings. Default limit is `4096` (4kb). Set to `0` to disable.
    * @default 4096
    */
    assetsInlineLimit: number

Actual behavior

  • logo.svg is not inlined.

System Info

  • vite version: v1.0.0-rc.13
  • Operating System: Windows 10 (64-bit)
  • Node version: v14.8.0

Related code

if (!id.endsWith(`.svg`) && content.length < Number(inlineLimit)) {
url = `data:${mime.lookup(id)};base64,${content.toString('base64')}`
content = undefined
}

Preferred solution

Adding support for svg inlining would be great.
Unfortunately extra steps are required to do it properly, as #1197 mentioned: Probably Don’t Base64 SVG and Optimizing SVGs in data URIs.

Alternative solution

Document this behavior in config.ts so users wouldn't be surprised by this.

Workaround

Rename .svg to uppercase .SVG. This isn't ideal but it works for now.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions