Updated: Will Safari get an updated SVG engine in 2023?

[AmoebeLabs]

Great News (2023)

Big things are underway for the SVG engine in Safari that should solve ALL problems!

Januari 19, 2023: Status of the new SVG engine in WebKit

Since late 2019, Igalia has been working on a new SVG engine, dubbed Layer-Based SVG Engine (LBSE), that will unify the HTML/SVG rendering pipelines in WebCore. This will resolve long-standing design issues of the “legacy” SVG engine and unlock a bunch of new exciting possibilities for Web developers to get creative with SVG. Hardware-accelerated compositing, driven by CSS transform animations, 3D perspective transformations for arbitrary SVG elements, CSS z-index support for all SVG graphics elements, and proper coverage rectangle computations and repaints are just a few highlights of the capabilities the future SVG engine will offer.

In this article, an overview is given about the problems that LBSE aims to solve, and the importance of a performant, well-integrated SVG engine especially for the embedded market. Finally, the current upstreaming status is summarized including an outlook for the year 2023.

If this change lands in Safari (maybe 17.x at the end of this year??), this means:

• the SVG rendering engine should conform to standards, ie be compatible to chromium based browsers
• full support for the foreignObject (that bug is from 2012!) object, so I can mix HTML with SVG, which would open a lot of possibilities for the Swiss Army Knife card.
• hardware acceleration, ie possibly good performance for filters/shadows!

Safari svg problems, workarounds and solutions

Known foreignObject bug

Rendering icons. must calculate position on client window

2020.10.22. Discord via Bram Kragten. Icons are async loaded. This might be the problem with Safari: a not loaded icon can't be calculated. Testing shows that after the third render, the icon path can be queried for the path.

Possible Solution:

• draw the icon with zero height/width and visibility = hidden.
• wait until the icon is loaded (how????), or check with every render if the icon is loaded
• draw the icon as intended as an svg path in a viewbox 0 0 24 24.

This should mean that svg stacking is working, scaling is working, and that the icon is not in front anymore of a slider or anything else that should be in front of the icon!!!!

Icon not rendering if no other objects around

Could it be possible to simply use this: https://www.sitepoint.com/how-to-translate-from-dom-to-svg-coordinates-and-back-again/ to get the Safari client coordiantes. Already used for clicks in slider, so use also for this stuff to place icon not on svg coordinates, but xlated to client coords?? Or are these the whole screen, and not the card size coordinates????

use other object, circle or rect behind icon. change color and icon is rendered.

Getting fontsize. NOw using 12

const fontSize = window.getComputedStyle(el).fontSize

See previous solution for foreignObject. This could also solve this issue I assume

Animation handling

If an animation is stopped/removed on for example an icon, Safari remembers the current position of the icon, where other browsers reset the icon position to the start.