top | item 39293093

JavaScript in SVGs

21 points| Architrixs | 2 years ago |devdailydigest.tech

11 comments

order

pseudosavant|2 years ago

The more I learn about SVG the more amazed I am at its capabilities. Realtime updated SVG charts/images is a very interesting idea. I wonder what kind of component model you could build around SVG? If the SVG JS can determine the SVG's document origin, you could parse GET parameters to dynamically render the SVG based on the URL.

solardev|2 years ago

FYI SVG charts have been around for a while and there are many libraries that use them: https://blog.logrocket.com/comparing-most-popular-javascript...

Depending on your use cases and complexity though, sometimes it's better to render to canvas instead (usually for performance reasons). JS and WASM are way more optimized than SVG is, so sometimes it's better to do the heavy calcs and then render raw pixels, instead of relying on SVG geometries.

sroussey|2 years ago

Yeah, but JS modules only on Firefox. :p

Still though, I think this was a mistake to do.

Hopefully scripts are disabled when including svg via an img tag.

rezmason|2 years ago

I think for many reasons the security model for code execution in HTML and SVG ought to be completely identical. They ought to just be slightly different DOM specifications.

In other words, if I can set an SVG file as the image of an img tag or as the URL in a background-image style property, then I ought to be able to use an HTML file, too— and JS should run in both or neither, with the same sandbox properties. Probably neither.

Likewise, if I can set an HTML file as the contents of an iframe, then I ought to be able to use an SVG file that way, too— and JS should run in both or neither, with the same sandbox properties. Probably both.

pcthrowaway|2 years ago

Can't wait for someone to put react in an svg

beny23|2 years ago

Sounds like an attack vector

uicompat|2 years ago

I know you’re implying the js specifically but using svg rendering as an attack vector was where the name “operation triangulation” came from with the recent high profile exploit.

They would draw a triangle and then hash the result to get a detailed bowser fingerprint of the victims machine.

https://m.youtube.com/watch?v=1f6YyH62jFE

johnsutor|2 years ago

Yet another reason to ensure CSP headers…