Plugin adds a quote to imported svgs

[vndre]

using import SVG from '...' outputs HTML as following:

<button class="pw-toggle svelte-4cprdg"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">[REDACTED]</svg>"</button>

Notice the single quote character after the svg tag, this produces an extra element like this:

I checked the plugin and after the source is decoded the string includes a beginning and ending quote like so: "<svg>...</svg>" so the regex exec returns a third element (named svgBody afterwards) like this: ><path>...</path>"

I fixed it by editing the regex so it matches the code until the last quote:

before: const svgRegex = new RegExp(/(<svg.*?)(>.*)/, "s"); after: const svgRegex = new RegExp(/(<svg.*?)(>.*)"/, "s");

result:

[MKRhere]

I cannot reproduce this; do you perhaps have a plugin above this that transforms SVG into string somehow?

[vndre]

I cannot reproduce this; do you perhaps have a plugin above this that transforms SVG into string somehow?

I don't think so, this is my plugin list in order:

@rollup/plugin-replace
@rollup/plugin-alias
rollup-plugin-svelte
@rollup/plugin-node-resolve
@rollup/plugin-commonjs
rollup-plugin-svelte-svg

Sadly I don't have the time to dig deeper into my rollup, but I guess if you are unable to reproduce it it must be something unique to me, let me try to reproduce it somewhere else.

[MKRhere]

@vndre If you're able to make a minimal reproduction, I can try to solve it. FWIW, this is the order my plugins are setup:

rollup-plugin-svelte
rollup-plugin-svelte-svg
@rollup/plugin-node-resolve
@rollup/plugin-commonjs

Feel free to reopen if you can reproduce it in a fresh project.

[mikestead]

Seeing the same issue, tried a couple of different icons, heres a google one

<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
  <g transform="matrix(1, 0, 0, 1, 27.009001, -39.238998)">
    <path fill="#4285F4" d="M -3.264 51.509 C -3.264 50.719 -3.334 49.969 -3.454 49.239 L -14.754 49.239 L -14.754 53.749 L -8.284 53.749 C -8.574 55.229 -9.424 56.479 -10.684 57.329 L -10.684 60.329 L -6.824 60.329 C -4.564 58.239 -3.264 55.159 -3.264 51.509 Z"/>
    <path fill="#34A853" d="M -14.754 63.239 C -11.514 63.239 -8.804 62.159 -6.824 60.329 L -10.684 57.329 C -11.764 58.049 -13.134 58.489 -14.754 58.489 C -17.884 58.489 -20.534 56.379 -21.484 53.529 L -25.464 53.529 L -25.464 56.619 C -23.494 60.539 -19.444 63.239 -14.754 63.239 Z"/>
    <path fill="#FBBC05" d="M -21.484 53.529 C -21.734 52.809 -21.864 52.039 -21.864 51.239 C -21.864 50.439 -21.724 49.669 -21.484 48.949 L -21.484 45.859 L -25.464 45.859 C -26.284 47.479 -26.754 49.299 -26.754 51.239 C -26.754 53.179 -26.284 54.999 -25.464 56.619 L -21.484 53.529 Z"/>
    <path fill="#EA4335" d="M -14.754 43.989 C -12.984 43.989 -11.404 44.599 -10.154 45.789 L -6.734 42.369 C -8.804 40.429 -11.514 39.239 -14.754 39.239 C -19.444 39.239 -23.494 41.939 -25.464 45.859 L -21.484 48.949 C -20.534 46.099 -17.884 43.989 -14.754 43.989 Z"/>
  </g>
</svg>

I've tried various plugin orderings in sapper. Using v1.0.0-beta1.0.1. Perhaps SSR related? Can confirm the regex change in original post seems to fix it.

[MKRhere]

@mikestead Think you could make a minimal reproduction where I can try this?

[MKRhere]

@vndre Did you also experience this bug with Sapper?

[mikestead]

@MKRhere yep using sapper, could be an SSR issue. Here's a sapper template project stripped back a little with the issue https://github.com/mikestead/svelte-sapper-svg-issue

[MKRhere]

Thanks for the sapper template @mikestead. Issue should be completely fixed in be44ca0bd82ccd9ea79f8881b707a7a9320b6f8a from v1.0.0-beta.2.

Debugging with your template, I found that in the default Sapper setup, SVG is pre-transpiled to export default "data:image/svg+xml,<uri-encoded-svg-string>", which 25a66a5cc9b943dbc25ec5ec6e2c7241b8f649d0 caused to decode as URI, but ignored everything else, which Svelte then handled. This caused the ignored " in the end.

In the non-Sapper environment, we only receive the raw SVG as string, so this issue never happened.

[mikestead]

@MKRhere cheers for the fix, confirmed working as expected.