Created attachment 466335 [details] Safari svg output I faced a major issue in displaying accurately svg symbols that are then reused in the svg object. Investigating this a bit I realized that even the simplest moz dev example was not displaying as expected. Symbols that are defined and then reused later in the svg object don't display with the right size and position compared with what was expected. Firefox and Chrome are displaying them as expected. The issue is the same with Safari 16.3, 16.4, Latest Safari technology preview on both intel and apple platform Here is the example: <svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg"> <!-- Our symbol in its own coordinate system --> <symbol id="myDot" width="10" height="10" viewBox="0 0 2 2"> <circle cx="1" cy="1" r="1" /> </symbol> <!-- A grid to materialize our symbol positioning --> <path d="M0,10 h80 M10,0 v20 M25,0 v20 M40,0 v20 M55,0 v20 M70,0 v20" fill="none" stroke="pink" /> <!-- All instances of our symbol --> <use href="#myDot" x="5" y="5" style="opacity:1.0" /> <use href="#myDot" x="20" y="5" style="opacity:0.8" /> <use href="#myDot" x="35" y="5" style="opacity:0.6" /> <use href="#myDot" x="50" y="5" style="opacity:0.4" /> <use href="#myDot" x="65" y="5" style="opacity:0.2" /> </svg>
It seems to be fixed on WebKit ToT (264046@main), although I do have some patches to fix SVG bugs etc but nothing touching SVG Symbol. They are about clean-up of deleting old functions and also making dominant-baseline inherited.
I've tested it and confirm that it's fixed in the latest 264048@main build. Thanks.