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

New plugin embedLinkedImages: embed images as base64 data URIs #1058

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

shoogle
Copy link

@shoogle shoogle commented Nov 1, 2018

Clearly embedding images as base64 will make the SVG bigger, not smaller, but the SVG is still optimized in the sense that it becomes a fully self-contained resource (no external dependencies).

Embedding images has the following benefits compared to linking:

  • More portable (move the SVG without risk of losing images)
  • Fewer requests made to server / filesystem (potential speed increase)
  • Increased compatibility with SVG viewers (loading of external resources not always implemented)
  • Makes the file useable inside HTML's <img> tag (loading of external resources disallowed for security reasons)

Embedding has the following drawbacks compared to linking:

  • Increased file size of SVG (since images are embedded rather than separate)
  • Increased overall file size (base64 is inefficient compared to raw binary data)
  • Embedded resources don't benefit from browser caching to the same extent as linked resources

Hence this is a useful feature, but one that should probably be optional and disabled by default (though it is enabled by default in other SVG optimizers, such as Scour).

- Replace image file paths with image data as base64 URIs
@shoogle
Copy link
Author

shoogle commented Nov 1, 2018

Embedding is not something you can rely on an editor to do, as you might want images to be linked in the source SVG and only embedded in the published version. This keeps the source SVG small, making it easier to keep track of in a Git repository, and edit by hand if necessary.

@kimmobrunfeldt
Copy link

Not sure if svgo is the place for this task but it would certainly help our use case as well. We already optimize SVGs with svgo, and would need a way to embed external images as inline base64 versions.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants