Why is my inline svg not displayed properly on Safari (desktop and mobile)?
I'm trying to use an inline svg graphic on a couple of WordPress websites. One of the reasons for an inline svg is the ability to style the graphic without having to do it manually and then uploading the graphic as a file.
Since I'm new to svg, I'm sure there will be some errors in the code, but overall it seems to work on different browsers/resolutions etc. Only on Safari the svg is not displaying properly. Instead of being displayed hoizontally centered it is displayed offset to the right cutting of a part of the graphic. Actually it looks as if the first symbol ist centered, although this could be coincidence.
If I play around with the viewbox a bit, I can get it centered like it should be - but then the svg doesn't display properly on the other browsers.
Any idea where I'm going wrong? Is it an error in my code or a known bug to Safari?
<p style="font-size: 2.3em; text-align: center;"><a href="#"><svg width="135px" viewBox="0 0 563 301" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" style="padding-top: 16px;">
<!--Definition of one volunteer symbol -->
<symbol id="volunteer" width="200" height="301" viewBox="0 0 200 301" style="fill: var(--color-1);">
<circle id="head" cx="101" cy="30" r="30" />
<path id="body" d="M189.34,44.94c-9.88,10.26-20.74,21.77-31.9,33-4.46,4.49-9.1,9.16-14.49,12.3-8.16,4.76-9.64,11.23-9.58,20.06q.66,86.7.15,173.4c0,5.13-2.44,11.54-6,14.91-2.55,2.39-9.93,2.33-13.37.32s-6.17-7.77-6.24-11.93c-.52-32.66-.28-65.33-.38-98,0-7.29-3.35-10.29-8.38-7.19-2.06,1.26-3,5.73-3,8.74-.15,32.09.07,64.17,0,96.26,0,11.05-7.79,16.8-17.68,13.4-6.87-2.36-8.51-7.92-8.5-14.48Q70,245,70,204.23c0-33-.16-65.91.09-98.86,0-5.46-1.76-8.62-5.82-12.3C45.4,76,27.09,58.43,8.67,41a48,48,0,0,1-4.84-6.1c-4.29-5.66-5.9-11.47.1-16.92,5.29-4.79,12.59-3.43,18.37,2.52,12.07,12.42,24.54,24.46,36.47,37C77.05,76.7,99.14,79,123.19,72.41a27.75,27.75,0,0,0,11.08-6.48C149.65,51.56,165,37.11,179.78,22.15c7.77-7.86,14.16-8.68,21.88-1.1,0,0,3.34,2.5-.66,9.5Z" />
</symbol>
<!-- Setting the symbols in place - left, middle, right -->
<use xlink:href="#volunteer" x="0" y="0" style="opacity:1.0" />
<use xlink:href="#volunteer" x="180" y="0" style="opacity:.4" />
<use xlink:href="#volunteer" x="360" y="0" style="opacity:1.0" />
</svg></a></p>
<h3 style="text-align: center;"><a href="#">Headline</a></h3>
<p style="text-align: center;">Lorem ipsum <a href="#">Link text</a></p>Any help is appreciated!
Add a width and a height to the use elements:
https://www.w3.org/TR/SVG11/struct.html#UseElement
The referenced ‘symbol’ and its contents are deep-cloned into the generated tree, with the exception that the ‘symbol’ is replaced by an ‘svg’. This generated ‘svg’ will always have explicit values for attributes ‘width’ and ‘height’. If attributes ‘width’ and/or ‘height’ are provided on the ‘use’ element, then these attributes will be transferred to the generated ‘svg’. If attributes ‘width’ and/or ‘height’ are not specified, the generated ‘svg’ element will use values of '100%' for these attributes.