zenn.dev 2日前

Affinity で `xlink:href` で継承される色属性を含むSVG図形が適切に描画されない

SVGのxlink:hrefで色情報を継承するグラデーション定義において、AffinityのSVGパーサーはgradientUnits属性を正しく継承せずobjectBoundingBoxにフォールバックしてしまうため、userSpaceOnUse前提で作られたグラデーションがベタ塗りのように表示される不具合を検証した記事。W3C仕様上は参照元の未定義属性を子要素が継承すべきだが、Affinityはこれを満たしておらず、子要素にgradientUnitsを明示的に重複指定することで回避できると報告している。

SVGのxlink:hrefで色情報を継承するグラデーション定義において、AffinityのSVGパーサーはgradientUnits属性を正しく継承せずobjectBoundingBoxにフォールバックしてしまうため、userSpaceOnUse前提で作られたグラデーションがベタ塗りのように表示される不具合を検証した記事。W3C仕様上は参照元の未定義属性を子要素が継承すべきだが、Affinityはこれを満たしておらず、子要素にgradientUnitsを明示的に重複指定することで回避できると報告している。
↗ 元記事を開く
zenn.dev 5日前

メッシュグラデーションをSVGで「真面目に」近似する

SVGは2D自由度のメッシュグラデーションを標準サポートしないため、既存機能だけで近似する手法を検討した記事。クーンズパッチと双三次色補間の理論を整理し、形状はfeDisplacementMapで、色補間はSource over合成の凸結合性を利用したBernstein基底レイヤー方式でlinearGradient/マスクの重ね合わせにより再現する。さらにパッチ間の隙間対策・変位マップの精度向上・折り返し判定など実用化に向けた調整も行っている。

SVGは2D自由度のメッシュグラデーションを標準サポートしないため、既存機能だけで近似する手法を検討した記事。クーンズパッチと双三次色補間の理論を整理し、形状はfeDisplacementMapで、色補間はSource over合成の凸結合性を利用したBernstein基底レイヤー方式でlinearGradient/マスクの重ね合わせにより再現する。さらにパッチ間の隙間対策・変位マップの精度向上・折り返し判定など実用化に向けた調整も行っている。
↗ 元記事を開く