SVG: Colors don't render if they're in HSL format

[Kristian]

I've attached two SVG images I've generated in JavaScript with svg.js, using HSL as my prefered colouring system.

The files look fine in browsers and in Inkscape, but AD doesn't render the colours. The shapes themselves are there though.

It's not much of a hassle to find an HSL to RGB function online, but I think SVGs should look the same in browsers and AD.

test-hsl.svg

test-rgb.svg

[Kristian]

svg.js: https://svgjs.com/

And here's the code I'm using to generate the graphics:

const numberOfCircles = 32
const draw = SVG("drawing").size(innerWidth, innerHeight)

let offset = 0
for (let dist = 50; dist <= 1000; dist += 50) {
	for (let angle = 0; angle <= Math.PI * 2; angle += Math.PI * 2 / numberOfCircles) {
		const x = innerWidth / 2 + Math.cos(angle + offset) * dist
		const y = innerHeight / 2 + Math.sin(angle + offset) * dist
		const hue = angle * 57
		draw.circle(dist / 20).move(x, y).fill(`hsl(${hue}, 50%, 50%)`)
		//draw.circle(dist / 20).move(x, y).fill("#00ff00")
		offset += 0.001
	}
}

const data = draw.svg()
const blob = new Blob([data], {type: 'image/svg+xml'});
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.download = "test.svg"
a.href = url
a.click()

 

[tokai]

I just stumbled upon this too. I generated some heavy SVG stuff in Python… and only half of it showed up in Affinity Designer. :( Turns out gradients with hsl() stop colors were simply ignored (the respective objects were invisible upon loading).

First I thought it's a mistake on my end… perhaps that hsl() stuff is not even supposed to be added to SVG, but OS X's quickview shows it fine. Also some research in the specs reveals it's there since many years: https://www.w3.org/TR/2013/WD-SVG2-20130409/color.html

 

Now I have to do extra conversion to RGB in Python (I think there's some loss of precision involved there… not sure… luckily Python has a badly documented function for that in its "colorsys" module. ;) )

 

So add me to the list of people who want this fixed/ feature added to AD! Such simple colour conversion upon loading is probably just a short finger exercise for the experienced developers @ the serif headquarters… considering all the real complexity elsewhere in the apps. :D