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

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:

SVG as border-image on retina screens

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top