SVG is not fully working

[elementalTIMING]

Hi,

are there any SVG tags or "constructs" that are not supported? In my plugin I'm trying to create an image with a gradient background. So I did:

async onWillAppear(ev: WillAppearEvent<mySetings>): Promise<void> {
	let i = 0;
	setInterval(() => {
		const svg = 
			`<svg width="144" height="144">
				<defs>
					<linearGradient id="gradient" x1="0%" x2="100%" y1="0%" y2="0%">
						<stop offset="0%" stop-color="#00B8FF" />
						<stop offset="100%" stop-color="#0046FF" />
					</linearGradient>
				</defs>

				<rect width="144" height="144" fill="url(#gradient)" />

				<text x="72" y="40" dominant-baseline="middle" text-anchor="middle" fill="#ff0">
					${i++}
				</text>
			</svg>`;

		ev.action.setImage('data:image/svg+xml;charset=utf8,' + svg);
	}, 1000);
}

But the defs breaks the code. The image is not painted as soon a <defs> is in the SVG.
How can I create a gradient background?

Thx for your support!

[elementalTIMING]

The same with <style>

<svg width="144" height="144">
	<style>
		text {
			font-family:Impact;
			font-size: 48px;
		}
	</style>

	<rect width="144" height="144" fill="url(#gradient)" />

	<text x="72" y="40" dominant-baseline="middle" text-anchor="middle" fill="#ff0">
		${i++}
	</text>
</svg>

Does not work! Are there limitations and/or is there a list of these limitations? Or is it a bug?

[tiptronic]

hi @elementalTIMING,

1. you can't use <style> (second example), because that's CSS and not natively supported. (Best is to stick with SVG tiny 1.2 spec)
2. did you try to encode your output (because in the first example it contains non-ascii values (e.g. %)?

ev.action.setImage('data:image/svg+xml;charset=utf8,' + encodeURIComponent(svg));

[elementalTIMING]

hi @tiptronic,

thanks a lot for the hint with the encodeURIComponent(). Stupid mistake which has cost me 3 hours of my life. Now it works like a charm.

[tiptronic]

@elementalTIMING I re-opened the case, because that seems to be a common oversight... so it might help others as well

[WillFM]

Maybe consider calling out what and what is not supported on the SDK docs? I do not believe this is called out anywhere on the dev site.

[tiptronic]

@WillFM well, encoding data which is outside the ASCII-range is common practice when using XML.

List_of_XML_and_HTML_character_entity_reference

For SVG (in code) itself it is likely best to stick with SVG tiny 1.2 (which is the smallest denomiator across all Stream Deck versions), but that mostly depends on where you are using the svg, your target audience and what you are creating. If you use SVG-files, supported features are mostly depend on your operating system (or that of your audience).

There are new docs in the works and maybe we can re-visit SVG in more detail there.