In my experience, cross-browser compatibility with SVGs has presented several challenges. One significant issue is the inconsistent rendering of SVGs across different browsers. For instance, Internet Explorer and Edge have been known to render SVGs differently than Chrome or Firefox. This inconsistency can lead to design elements appearing distorted or not displaying at all.
Another challenge is the lack of support for certain SVG features in some browsers. Features like SMIL animations are unsupported in IE and require workarounds such as using JavaScript libraries. Similarly, CSS properties like ‘transform-origin’ behave differently across browsers causing positioning issues.
Lastly, file size and performance can be a concern. While SVGs are generally smaller than their bitmap counterparts, complex SVGs can become large and slow down page load times, especially on mobile devices with slower network speeds.
