Can {@htm 'svgRaw'} affect performance?

[fedorovvvv]

unplugin-icons and I are looking into the performance issue of rendering icons in svelte ❤️

And here we have a question

Are we right to create icon components with {@html '<svg>...</svg>'} instead of <svg>...</svg> without {@html ...}?

Could this affect performance?

@dominikg As far as I know, you helped integrate svelte into unplugin-icons

Our issue:
unplugin/unplugin-icons#357 (comment)

[dominikg]

which performance issue?

the one you linked leads to #11405 which seems resolved.

in theory @html is faster/smaller because it treats the argument as single string rather than adding lots of code for each node of the svg

[dominikg]

you can put both implementations in a repl and compare the code in the output tab

[fedorovvvv]

I rechecked my results and concluded that {@html } slows down html rendering

Here are my results for 10000 svg elements:
<svg>: [500, 700, 600]ms avg: 600
{@html '<svg>'}: [1500, 1800, 1700]ms avg: 1666

Accordingly, @html does this work ~177% slower
And the speed decreases exponentially depending on the number of elements

When running Record at Perfomance in DevTools, this is particularly noticeable

REPL: link

[dominikg]

unplugin-icons uses $props to forward props to the svg, so a more accurate comparison is

updated repl

now in svelte5 the inline variant emits less code than with @html but unplugin-icons only uses @html for svelte4, where it is used to avoid output like this

		c() {
			svg = svg_element("svg");
			ellipse = svg_element("ellipse");
			path = svg_element("path");
			attr(ellipse, "cx", "12");
			attr(ellipse, "cy", "12");
			attr(ellipse, "fill", "currentColor");
			attr(ellipse, "rx", "3");
			attr(ellipse, "ry", "5.74");
			attr(path, "fill", "currentColor");
			attr(path, "d", "M7.5 12c0-.97.23-4.16 3.03-6.5C9.75 5.19 8.9 5 8 5c-3.86 0-7 3.14-7 7s3.14 7 7 7c.9 0 1.75-.19 2.53-.5c-2.8-2.34-3.03-5.53-3.03-6.5M16 5c-.9 0-1.75.19-2.53.5c.61.51 1.1 1.07 1.49 1.63c.33-.08.68-.13 1.04-.13c2.76 0 5 2.24 5 5s-2.24 5-5 5c-.36 0-.71-.05-1.04-.13c-.39.56-.88 1.12-1.49 1.63c.78.31 1.63.5 2.53.5c3.86 0 7-3.14 7-7s-3.14-7-7-7");
			set_svg_attributes(svg, svg_data);
		},

see repl to show svelte4 output

[fedorovvvv]

Yeah, that's right, I mentioned that in our PR.
But it was still interesting to see which was faster.

Thank you 🧡