SVGs with gradients losing gradients

[b-d-m-p]

Describe the bug SVGs with image gradients, which appear fine in browser, are missing gradients after sapper compiles and loads them.

To Reproduce Put an SVG with gradients in a sapper component and load it in browser.

To help us help you, if you've found a bug please consider the following:

• If possible, we recommend creating a small repo that illustrates the problem. I tried recreating issue, but it doesn't happen in the test repo, so It is connected to my rollup config, I am imagining.

Expected behavior To be able to display svgs with gradients without losing the gradient.

Information about your Sapper Installation:

• The output of npx envinfo --system --npmPackages svelte,sapper,rollup,webpack --binaries --browsers

  System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i7-8569U CPU @ 2.80GHz
    Memory: 2.24 GB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.18.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.4 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Chrome: 86.0.4240.198
    Chrome Canary: 89.0.4343.0
    Firefox: 72.0.2
    Firefox Developer Edition: 84.0
    Safari: 14.0
  npmPackages:
    rollup: ^1.20.0 => 1.32.1 
    sapper: ^0.27.0 => 0.27.16 
    svelte: ^3.0.0 => 3.24.0 

• Your hosting environment (i.e. Local, GCP/AWS/Azure, Vercel/Begin, etc...) Local

Severity

How severe an issue is this bug to you? Is this annoying, blocking some users, blocking an upgrade or blocking your usage of Sapper entirely? It's quite severe for me since I can't update the site for my company.

Additional context What it looks like in sapper

What it should look like

This is happening with multiple different mages. The images appear fine alone in browser or if added into the body of the sapper page with dev tools, so I think the compile step is doing it.

My rollup config

import resolve from "@rollup/plugin-node-resolve";
import replace from "@rollup/plugin-replace";
import commonjs from "@rollup/plugin-commonjs";
import svelte from "rollup-plugin-svelte";
import babel from "rollup-plugin-babel";
import { terser } from "rollup-plugin-terser";
import config from "sapper/config/rollup.js";
import marked from "marked";
import sveltePreprocess from "svelte-preprocess";
import pkg from "./package.json";
import json from "@rollup/plugin-json";

const mode = process.env.NODE_ENV;
const dev = mode === "development";
const legacy = !!process.env.SAPPER_LEGACY_BUILD;

const onwarn = (warning, onwarn) =>
  (warning.code === "CIRCULAR_DEPENDENCY" &&
    /[/\\]@sapper[/\\]/.test(warning.message)) ||
  onwarn(warning);

const dedupe = (importee) =>
  importee === "svelte" || importee.startsWith("svelte/");

const markdown = () => ({
  transform(md, id) {
    if (!/\.md$/.test(id)) return null;
    const data = marked(md);
    return {
      code: `export default ${JSON.stringify(data.toString())};`,
    };
  },
});

const preprocess = sveltePreprocess({ postcss: true });

export default {
  client: {
    input: config.client.input(),
    output: config.client.output(),
    plugins: [
      replace({
        "process.browser": true,
        "process.env.NODE_ENV": JSON.stringify(mode),
      }),
      svelte({
        dev,
        hydratable: true,
        emitCss: true,
        preprocess,
      }),
      resolve({
        browser: true,
        dedupe,
      }),
      commonjs(),

      legacy &&
        babel({
          extensions: [".js", ".mjs", ".html", ".svelte"],
          runtimeHelpers: true,
          exclude: ["node_modules/@babel/**"],
          presets: [
            [
              "@babel/preset-env",
              {
                targets: "> 0.25%, not dead",
              },
            ],
          ],
          plugins: [
            "@babel/plugin-syntax-dynamic-import",
            [
              "@babel/plugin-transform-runtime",
              {
                useESModules: true,
              },
            ],
          ],
        }),

      !dev &&
        terser({
          module: true,
        }),
      json(),
    ],

    onwarn,
  },

  server: {
    input: config.server.input(),
    output: config.server.output(),
    plugins: [
      markdown(),
      replace({
        "process.browser": false,
        "process.env.NODE_ENV": JSON.stringify(mode),
      }),
      svelte({
        generate: "ssr",
        dev,
        preprocess,
      }),
      resolve({
        dedupe,
      }),
      commonjs(),
      json(),
    ],
    external: Object.keys(pkg.dependencies).concat(
      require("module").builtinModules ||
        Object.keys(process.binding("natives"))
    ),

    onwarn,
  },

  serviceworker: {
    input: config.serviceworker.input(),
    output: config.serviceworker.output(),
    plugins: [
      resolve(),
      replace({
        "process.browser": true,
        "process.env.NODE_ENV": JSON.stringify(mode),
      }),
      commonjs(),
      !dev && terser(),
    ],

    onwarn,
  },
};

[peopledrivemecrazy]

Is the SVG saved safe for the web? I have had this issue when exporting from AI and viewed on chrome, the colours do not match.

[b-d-m-p]

@peopledrivemecrazy I tried a tool to do that but got mixed results. How are you doing it?

[peopledrivemecrazy]

it has something to do with your base settings check here there could be hints https://community.adobe.com/t5/illustrator/ai-file-save-in-svg-changing-colours/td-p/10436674

[b-d-m-p]

Mine are made in Figma, so it doesn't have CMYK like Illustrator. Thanks though.