Skip to content

svitejs/svelte-preprocess-svg

Repository files navigation

@svitejs/svelte-preprocess-svg

npm version CI

Optimize inline svg in svelte components

Features

  • wrap svg content in @html to reduce component size
  • svgo transform
  • custom transforms
  • include, exclude and skipTransform options

Why

Inline svg - especially when they contain many nodes and attributes - can lead to pretty large compiler output with lots of function calls. Wrapping the content of the svg in an {@html content} directive results in a single string variable inserted with innerHTML.

Check the compiler output in this repl for an example and also the benchmark playground project, which is bundling all svelte-feather-icons.

benchmark vendor.js bytes uncompressed gzip brotli
regular 327975 27323 19420
with svelte-preprocess-svg 296567 21575 15991
delta -10% -21% -18%

Caveats

The @html transform does not work with dynamic svg. It's useful for icons and other static svg that don't contain any svelte directives. Dynamic attributes on the <svg> itself are ok.

Documentation

see here

Packages

Package Changelog
@svitejs/svelte-preprocess-svg Changelog

Development

  • pnpm i to install dependencies
  • pnpm dev to run development build
  • pnpm test to run tests
  • pnpm build to run build

License

MIT