First-party SVG support

[nicoburns]

This issues tracks a first-party SVG implementation in blitz-dom and blitz-paint.

Tasks

• Enable SVG CSS properties in Stylo (this PR Enable basic SVG-related CSS properties for Servo servo/stylo#383 enables some of them)
• Synthesize the CSS properties in the synthesize_presentational_hints_for_legacy_attributes https://github.com/DioxusLabs/blitz/blob/main/packages/blitz-dom/src/stylo.rs#L790 (like this PR does for Servo https://github.com/servo/servo/pull/45405/changes#diff-0c9e01a4915e7f3fa1e348d9047ffc3b145d41a4661d1f6b9211407aa8d59017R268)
• Stop parsing inline SVGs with usvg here: https://github.com/DioxusLabs/blitz/blob/main/packages/blitz-dom/src/layout/construct.rs#L131. Instead we will likely want a custom processing pass, but you may be able to skip this for the initial implementation. (perhaps we could feature flag this at first so that people can choose between resvg and the first-party impl)
• Add SVG rendering support to blitz-paint. This will likely work very similarly to anyrender_svg (https://github.com/DioxusLabs/anyrender/blob/main/crates/anyrender_svg/src/render.rs) but reading from the Blitz DOM and Stylo types rather than usvg types.

SVG Elements

• Core
  • <svg>
  • <g>,
• Reuse
  • <defs>
  • <symbol>
  • <use>
• Shapes
  • <rect>
  • <circle>
  • <ellipse>
  • <line>
  • <polygon>
  • <polyline>
  • <path>
• Paint servers
  • <linearGradient>
  • <radialGradient>
  • <pattern>
  • <marker>
• Clipping and Masking
  • <clipPath>
  • <mask>
• Text
  • <textPath>
  • <text>
  • <tspan>
• <filter> (and subelements)
• Other
  • <foreignObject>
  • <view>

[rit3sh-x]

@nicoburns is the first task resolved?

[nicoburns]

Partially. The linked PR was downscoped to a subset of the properties. servo/stylo#396 has the full set.

[rit3sh-x]

@nicoburns can I work on this issue then?

[nicoburns]

You can. Heads up: it's a big feature so I expect we might need to iterate on the solution quite a bit before we can land it.

[rit3sh-x]

@nicoburns should I gate it behind a feature flag or replace usvg? Also should we bypass taffy for svg geometry?

[nicoburns]

Behind a feature flag, and for now, only for inline SVGs

[rit3sh-x]

@nicoburns I was looking at the 16 SVG properties gated behind engine = "gecko" in stylo (things like paint-order, text-anchor, stop-color, etc.).

For Blitz to render SVG properly, we need these properties exposed. I see servo/stylo#396 removes the gates, but it's marked [do not merge]. I'm guessing because enabling them for Servo would break web-compat (Servo would claim to support properties it can't actually render).

Would you be open to a PR that moves these from engine = "gecko" -> servo_pref = "layout.svg.enabled" (default off)? Same pattern as the mask-* properties that use layout.unimplemented. That way:

• Servo's web-facing behavior stays unchanged (pref defaults off)
• Blitz can enable the pref and use the properties
• The properties stay fully generated in stylo, just runtime-gated instead of compile-time

Does that sound reasonable, or is there a reason the compile-time gate should stay?

[nicoburns]

@rit3sh-x Just use that branch as a git dependency. We'll be able to get some variant of it merged, but we should sort out our implementation first. As Servo is also in the process of implementing SVG, there's a good chance that are bunch of the properties we need will be enabled anyway by the time we're ready. And there's also a good chance that our initial implementation doesn't need all of the properties.