Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: allow .svg files to be inlined #1716

Closed
wants to merge 1 commit into from

Conversation

aleclarson
Copy link
Member

@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
Member 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
Member 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
Member 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