IOS6 did have some bugs with how SVG dimensions are calculated on retina displays. I don't know if this has been addressed yet, but there is more information in this question:
Why SVG doesn't work in Safari even after all the changes suggested?
Question
I'm trying to make home-made social buttons using Zurb webicons. However, I didn't have all the buttons on the pack so I created one o them using AI. The problem is that my zurbs buttons behave the same in all browsers and my AI SVG don't. On firefox, everything is ok, but on Safari the size is almost the double.
I don't know very much about SVG but I tried many things (specially the tips of this post: How does Safari calculate size of svg objects?) and nothing works. I could, nevertheless, identify that the problem comes from the height/width of "rect". If I delete it, the image disppears. If I use %, the size is good but there's no round corners anymore.
If someone could have a look, here is the code of the facebook button I took from zurb:
<!-- Code SVG Facebook -->
<?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="Icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-14 -14 48 48" enable-background="new -14 -14 48 48" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="90.0527" y1="-99.7603" x2="90.0527" y2="-106.3809" gradientTransform="matrix(7.2338 0 0 -7.2338 -641.4998 -735.5619)">
<stop offset="0" style="stop-color:#4B71B8"/>
<stop offset="1" style="stop-color:#293F7E"/>
</linearGradient>
<path fill="#334E8F" fill="url(#SVGID_1_)" d="M33.931,27.993c0,3.304-2.689,5.983-6.002,5.983H-8.082c-3.315,0-6.001-2.683-6.001-5.983V-7.928
c0-3.308,2.687-5.988,6.001-5.988h36.011c3.312,0,6.002,2.681,6.002,5.988V27.993z"/>
<path fill="#FFFFFF" d="M25.613-4.557c0,0-3.707,0-6.166,0c-3.662,0-7.732,1.535-7.732,6.835c0.019,1.845,0,3.613,0,5.603H7.481
v6.728h4.366v19.37h8.021V14.48h5.295l0.479-6.618h-5.913c0,0,0.016-2.946,0-3.8c0-2.093,2.184-1.974,2.312-1.974
c1.042,0,3.059,0.003,3.578,0v-6.646H25.613z"/>
</svg>
<!-- ********************************* -->
<foreignObject width="0" height="0" overflow="hidden">
{% image output='images/webicon-facebook.png' '@MyBundle/Resources/public/images/webicon-facebook.png' %}
<img width="46em" height="46em" src="{{ asset_url }}" alt="Logo Facebook" />
{% endimage %}
</foreignObject>
And this is my code done using AI:
<!-- Code SVG Facebook Like -->
<?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="Icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<rect x="6.167" y="6" fill="#334E8F" stroke="#334E8F" stroke-width=11 stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit=10 width="36" height="36"/>
<g>
<path fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit=10 d="M40.863,25.109c1.829-1.835,1.264-5.548-1.903-5.548
l-8.332,0.006c0.315-1.78,0.773-4.728,0.755-5.007c-0.174-2.637-1.844-5.846-1.914-5.978c-0.303-0.57-1.839-1.345-3.385-1.012
C24.085,8,23.881,9.284,23.889,9.638c0,0,0.088,3.515,0.096,4.451c-0.954,2.115-4.248,7.673-5.248,8.101
c-0.237-0.145-0.51-0.224-0.791-0.224H7.418c-0.891,0-1.613,0.728-1.613,1.626l0.001,14.668c0.062,0.791,0.728,1.411,1.516,1.411
h9.452c0.838,0,1.52-0.687,1.52-1.532v-0.487c0,0,0.352-0.024,0.51,0.077c0.608,0.389,1.36,0.879,2.34,0.879h14.112
c5.273,0,4.707-4.72,4.226-5.365c0.891-0.979,1.442-2.703,0.69-4.067C40.755,28.56,41.773,26.864,40.863,25.109z M16.797,38.139
H7.323V23.5h9.474V38.139z M38.403,24.984l-0.086,0.362c2.431,0.696,1.137,3.52-0.605,3.705l-0.086,0.363
c2.33,0.597,1.22,3.507-0.605,3.704l-0.085,0.362c1.903,0.315,1.444,3.59-1.44,3.59l-14.352,0.006
c-1.014,0-1.933-1.165-2.681-1.165l-0.65-0.001V24.644c0.811-0.509,1.807-1.164,2.362-1.641c1.047-0.899,5.331-7.88,5.331-8.753
c0-0.873-0.097-4.652-0.097-4.652s0.843-1.091,2.718-0.296c0,0,1.578,2.984,1.738,5.362c0,0-0.708,4.898-1.093,6.435h9.949
C41.158,21.1,40.692,24.62,38.403,24.984z"/>
<path fill="#334E8F" d="M38.721,21.099h-9.949c0.384-1.537,1.093-6.435,1.093-6.435c-0.161-2.378-1.738-5.362-1.738-5.362
c-1.875-0.796-2.718,0.296-2.718,0.296s0.097,3.779,0.097,4.652c0,0.873-4.284,7.854-5.331,8.753
c-0.555,0.477-1.551,1.132-2.362,1.641v11.267l0.65,0.001c0.748,0,1.667,1.165,2.681,1.165l14.352-0.006
c2.884,0,3.344-3.276,1.44-3.59l0.085-0.362c1.825-0.198,2.935-3.108,0.605-3.704l0.086-0.363c1.742-0.185,3.036-3.009,0.605-3.705
l0.086-0.362C40.692,24.62,41.158,21.1,38.721,21.099z"/>
</g>
</svg>
<!-- ********************************* -->
<foreignObject width="0" height="0" overflow="hidden">
{% image output='images/webicon-facebook.png' '@MyBundle/Resources/public/images/webicon-facebook.png' %}
<img width="3em" height="3em" src="{{ asset_url }}" alt="Logo Facebook" />
{% endimage %}
</foreignObject>
Thanks!
No correct solution
OTHER TIPS