Menu icon Foundation
How can I do a SVG Zurb webicon ?

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 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.

Thanks!

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>
            

         

webiconsplaygroundsvg

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 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.

Thanks!

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>