Well this a label I have on a svg image, it works fine on all browsers except Safari where it will not show up and I can't get why this part of the svg doesn't show up....
<g>
<g>
<defs>
<rect id="SVGID_7_" x="221.463" y="851.163" width="187.789" height="38.692"></rect>
</defs>
<clipPath id="SVGID_8_">
<use xlink:href="#SVGID_7_" overflow="visible"></use>
</clipPath>
<path clip-path="url(#SVGID_8_)" fill="#120F0B" d="M221.463,862.222c0-2.149,1.755-3.904,3.902-3.904h76.462 c2.146,0,5.144-1.242,6.662-2.759l3.254-3.255c1.52-1.52,4.003-1.522,5.522-0.003l3.255,3.258 c1.521,1.517,4.516,2.759,6.665,2.759h78.164c2.146,0,3.902,1.755,3.902,3.904v23.73c0,2.146-1.756,3.903-3.902,3.903H225.365c-2.147,0-3.902-1.757-3.902-3.903V862.222z"/>
</g>
<text transform="matrix(1 0 0 1 277.3213 876.9551)" fill="#FFFFFF" font-family="'FedraSansStd-Normal'" font-size="9.64">Drinkwaterbalans</text>
</g>
and this is the svg tag from the top:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="600px" height="1000px" viewBox="0 0 625 1000"
enable-background="new 0 0 625 1000" xml:space="preserve"
preserveAspectRatio="xMinYMin none">
This is already asked in Stackoverflow. You can refer this link for your answer. Not able to render SVG image in Safari
You need to put your SVG declaration before your SVG tag. Add the
<g>
tag after the<body>
tag and put the<svg>
tag after the<g>
tag.Found the answer !
if i removed :
the grafic shows up even in Safari! and corect