Skip to content

feat: allow .svg files to be inlined#1716

Closed
aleclarson wants to merge 1 commit intovitejs:mainfrom
aleclarson:feat/inline-svg
Closed

feat: allow .svg files to be inlined#1716
aleclarson wants to merge 1 commit intovitejs:mainfrom
aleclarson:feat/inline-svg

Conversation

@aleclarson
Copy link
Contributor

@aleclarson aleclarson commented Jan 25, 2021

Base64 is unnecessary for SVG files: #1197 (comment)

Also using Buffer.byteLength instead of character length when comparing with the assetsInlineLimit option.

Closes #1204

Base64 is unnecessary for SVG files:
https://github.com/vitejs/vite/issues/1197\#issuecomment-738780169

Also using `Buffer.byteLength` instead of character length when comparing with the `assetsInlineLimit` option.
@aleclarson
Copy link
Contributor Author

  • todo: avoid inlining svg fragments

url = `data:${mime.getType(file)};base64,${content.toString('base64')}`
// svgs can be inlined without base64
url = file.endsWith('.svg')
? `data:image/svg+xml;utf8,${content}`
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This won't escape unsafe characters. Might be worth taking a similar approach to svg-url-loader? See Explanation, Usage and Implementation.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The data uri has a mime type, so I'm skeptical that the "unsafe characters" specification applies here.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a URI, so yes you need to escape unsafe characters or it won't work.
E.g. for <path fill="#ffffff" />, the # starts the URL fragment and everything breaks, so it needs to be escaped to <path fill="%23ffffff" />

@princed
Copy link

princed commented Mar 21, 2021

Hi @aleclarson, do you need a hand with this PR?
I'd be interested to see it landed.

@Shinigami92 Shinigami92 added p2-nice-to-have Not breaking anything but nice to have (priority) enhancement New feature or request 🔍 review needed labels Mar 22, 2021
@aleclarson
Copy link
Contributor Author

@princed Sure, you can fork it and open another PR 👍

@princed
Copy link

princed commented Apr 8, 2021

@aleclarson @nhardy @Shinigami92
My updated version #2909

@aleclarson aleclarson closed this Apr 19, 2021
@aleclarson aleclarson deleted the feat/inline-svg branch June 24, 2021 23:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request p2-nice-to-have Not breaking anything but nice to have (priority)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Support inlining SVG assets

5 participants