[APP][Pro] NEW: Dashboard Studio - A completely free-form dashboard designer

Apps
,
677

I’m using Raw svg code in 2 images with the following snippet code.

{
  "snippetHeader": "Dashboard Studio Snippet",
  "snippetType": "widget-snippet",
  "snippetFormatVersion": 1,
  "version": "1.6.3",
  "source": {
    "dashboardName": "Dash3",
    "page": 1,
    "createdAt": "2026-04-10T15:28:53.239Z"
  },
  "master": {
    "currentPage": 1
  },
  "widgets": {
    "image_799582892": {
      "type": "image",
      "overrides": {
        "x": 240,
        "y": 410,
        "width": 710,
        "height": 60,
        "zIndex": 1,
        "page": "1",
        "sourceType": "svg",
        "url": "images/placeholder.png",
        "svgRaw": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 730 20\" width=\"730\" height=\"20\">\n    <defs>\n        <linearGradient id=\"rainbowGradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n            <stop offset=\"0%\" stop-color=\"hsl(0, 100%, 50%)\" />\n            <stop offset=\"16.67%\" stop-color=\"hsl(60, 100%, 50%)\" />\n            <stop offset=\"33.33%\" stop-color=\"hsl(120, 100%, 50%)\" />\n            <stop offset=\"50%\" stop-color=\"hsl(180, 100%, 50%)\" />\n            <stop offset=\"66.67%\" stop-color=\"hsl(240, 100%, 50%)\" />\n            <stop offset=\"83.33%\" stop-color=\"hsl(300, 100%, 50%)\" />\n            <stop offset=\"100%\" stop-color=\"hsl(360, 100%, 50%)\" />\n        </linearGradient>\n        <filter id=\"glow\">\n            <feGaussianBlur stdDeviation=\"6\" result=\"blur\"/>\n            <feMerge>\n                <feMergeNode in=\"blur\"/>\n                <feMergeNode in=\"SourceGraphic\"/>\n            </feMerge>\n        </filter>\n    </defs>\n    <rect x=\"0\" y=\"0\" width=\"730\" height=\"20\" rx=\"0\" ry=\"0\" fill=\"url(#rainbowGradient)\" filter=\"url(#glow)\"/>\n</svg>",
        "moveX": 0,
        "moveY": 0,
        "label": "",
        "liveRefresh": false,
        "refreshInterval": 1,
        "intervalUnit": "seconds",
        "metaName": "Second"
      },
      "bindings": {}
    },
    "image_436964341": {
      "type": "image",
      "overrides": {
        "x": 240,
        "y": 340,
        "width": 710,
        "height": 60,
        "zIndex": 1,
        "page": "1",
        "sourceType": "svg",
        "url": "images/placeholder.png",
        "svgRaw": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 730 20\" width=\"730\" height=\"20\">\n    <defs>\n        <linearGradient id=\"rainbowGradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n            <stop offset=\"0%\" stop-color=\"#cce7f6\" />\n            <stop offset=\"100%\" stop-color=\"#ffbf00\" />\n        </linearGradient>\n    </defs>\n    <rect x=\"0\" y=\"0\" width=\"730\" height=\"20\" rx=\"0\" ry=\"0\" fill=\"url(#rainbowGradient)\"/>\n</svg>\n",
        "moveX": 0,
        "moveY": 0,
        "label": "",
        "liveRefresh": false,
        "refreshInterval": 1,
        "intervalUnit": "seconds",
        "metaName": "First"
      },
      "bindings": {}
    }
  }
}

One image should be this:
image
And the other one like this:
image

Somehow these svg images are linked, so I see two times the same image, depending on the defining order. It sounds strange and it is strange to me. I would like to know what is happening, and how to solve this.

EDIT:
The solution is: both had a linearGradient called “rainbowGradient”. When I change this name in one of the svg’s the problem has solved.
Apparently, these SVG codes do not work completely independently of each other.