This works in webkit. --File name: drawing-9.svg <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!-- Created with Inkscape (http://www.inkscape.org/) --> <svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1/"> <defs> <path id="petal" d="M8,6.5s-2-3.5-1-5.5c0.5-1,1.5-1,2,0,1,2-1,5.5-1,5.5z" fill="#000"/> </defs> <g id="flower"> <use xlink:href="#petal" height="16" width="16" y="0" x="0"/> <use opacity="0.9" xlink:href="#petal" transform="matrix(0.70710678,-0.70710678,0.70710678,0.70710678,-3.3137085,8)" height="16" width="16" y="0" x="0"/> <use opacity="0.8" xlink:href="#petal" transform="matrix(0,-1,1,0,0,16)" height="16" width="16" y="0" x="0"/> <use opacity="0.7" xlink:href="#petal" transform="matrix(-0.70710678,-0.70710678,0.70710678,-0.70710678,8,19.313708)" height="16" width="16" y="0" x="0"/> <use opacity="0.6" xlink:href="#petal" transform="matrix(-1,0,0,-1,16,16)" height="16" width="16" y="0" x="0"/> <use opacity="0.5" xlink:href="#petal" transform="matrix(-0.70710678,0.70710678,-0.70710678,-0.70710678,19.313708,8)" height="16" width="16" y="0" x="0"/> <use opacity="0.4" xlink:href="#petal" transform="matrix(0,1,-1,0,16,0)" height="16" width="16" y="0" x="0"/> <use opacity="0.3" xlink:href="#petal" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,8,-3.3137085)" height="16" width="16" y="0" x="0"/> <animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0,8,8;45,8,8;90,8,8;135,8,8;180,8,8;225,8,8;270,8,8;315,8,8;360,8,8" keyTimes="0;0.125;0.25;0.375;0.5;0.625;0.75;0.875;1" begin="0s" dur="1s" repeatCount="indefinite" calcMode="discrete" /> </g> </svg> This does not work in webkit. This works in Firefox and Opera. --File name: drawing-9defs.svg <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!-- Created with Inkscape (http://www.inkscape.org/) --> <svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1/"> <defs> <path id="petal" d="M8,6.5s-2-3.5-1-5.5c0.5-1,1.5-1,2,0,1,2-1,5.5-1,5.5z" fill="#000"/> <g id="flower"> <use xlink:href="#petal" height="16" width="16" y="0" x="0"/> <use opacity="0.9" xlink:href="#petal" transform="matrix(0.70710678,-0.70710678,0.70710678,0.70710678,-3.3137085,8)" height="16" width="16" y="0" x="0"/> <use opacity="0.8" xlink:href="#petal" transform="matrix(0,-1,1,0,0,16)" height="16" width="16" y="0" x="0"/> <use opacity="0.7" xlink:href="#petal" transform="matrix(-0.70710678,-0.70710678,0.70710678,-0.70710678,8,19.313708)" height="16" width="16" y="0" x="0"/> <use opacity="0.6" xlink:href="#petal" transform="matrix(-1,0,0,-1,16,16)" height="16" width="16" y="0" x="0"/> <use opacity="0.5" xlink:href="#petal" transform="matrix(-0.70710678,0.70710678,-0.70710678,-0.70710678,19.313708,8)" height="16" width="16" y="0" x="0"/> <use opacity="0.4" xlink:href="#petal" transform="matrix(0,1,-1,0,16,0)" height="16" width="16" y="0" x="0"/> <use opacity="0.3" xlink:href="#petal" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,8,-3.3137085)" height="16" width="16" y="0" x="0"/> <animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0,8,8;45,8,8;90,8,8;135,8,8;180,8,8;225,8,8;270,8,8;315,8,8;360,8,8" keyTimes="0;0.125;0.25;0.375;0.5;0.625;0.75;0.875;1" begin="0s" dur="1s" repeatCount="indefinite" calcMode="discrete" /> </g> </defs> </svg> --File name: drawing-9ext.svg <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" height="112" width="64" version="1.1"> <use xlink:href="drawing-9defs.svg#flower" x="0" y ="0"/> </svg> The svg status page (http://www.webkit.org/projects/svg/status.xml) says the use element is implemented. I have other examples where external use fails for webkit, but works great in mozilla and presto (https://github.com/nullterminated/ponder/tree/master/ERR2d2w/WebServerResources/img). Inner shadows, drop shadows, gradients... Lots of things fail with external use. Webkit 12499 was closed as resolved, but these issues persist. It would be nice if the svg status page mention these failings and list use in yellow until the problems are fixed.
Seeing this same issue as well. The new Firefox renders everything fine, but Chrome and Safari do not.
Created attachment 460945 [details] drawing-9.svg
Created attachment 460946 [details] drawing9-defs.svg
The content of attachment 460946 [details] has been deleted
Created attachment 460947 [details] drawing-9defs.svg
Created attachment 460948 [details] drawing-9ext.svg
I might have made a mistake copying/pasting the content to create the files, but both cases seem to work the same way in Firefox, Chrome, and Safari (as of 2022). Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.