7 jun
2017

¿Cómo eliminar espacios o posicionar correctamente imagen svg?

Existe un problema al diseñar esta imagen vectorial al parecer son espacios o error de posicionamiento de la imagen vectorial.

Los errores no son en los estilos css el problema solo ocurre en la siguiente imagen.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
<path d="M303.599,261.663v37.75c0,1.81-1.475,3.291-3.285,3.291h-18.626c-1.801,0-3.275-1.48-3.275-3.291     v-37.75c0-1.812,1.475-3.291,3.275-3.291h3.51v-8.199c-0.041-20.686-16.774-37.425-37.466-37.45h-18.483     c-20.691,0.025-37.415,16.765-37.455,37.45v8.199h3.855c1.811,0,3.286,1.479,3.286,3.291v37.75c0,1.81-1.475,3.291-3.286,3.291     h-4.059c3.306,10.289,12.939,17.74,24.332,17.761h5.92v-1.403c0-1.45,1.18-2.747,2.624-2.879l12.512-1.155     c1.455-0.132,3.998,1.328,3.998,7.243s-2.544,7.029-3.998,6.897l-12.512-1.165c-1.444-0.122-2.624-1.424-2.624-2.874v-1.389     h-5.92c-13.224,0-24.373-8.905-27.781-21.036h-11.108c-1.8,0-3.286-1.48-3.286-3.291v-37.75c0-1.812,1.485-3.291,3.286-3.291     h9.827v-8.199c0-23.402,18.981-42.379,42.389-42.379h18.483c23.417,0,42.389,18.977,42.389,42.379v8.199h10.193     C302.124,258.372,303.599,259.852,303.599,261.663z" style="fill:#777777;"/>

<path d="M264.181,265.691h-4.15c-1.302,0-2.35,1.048-2.35,2.34v9.638c0,1.298,1.048,2.345,2.35,2.345h4.15     c1.302,0,2.35-1.047,2.35-2.345v-9.638C266.53,266.739,265.482,265.691,264.181,265.691z" style="fill:#484B4D;"/>

<path d="M211.792,265.691c-1.292,0-2.34,1.048-2.34,2.34v9.638c0,1.298,1.048,2.345,2.34,2.345h4.171     c1.292,0,2.339-1.047,2.339-2.345v-9.638c0-1.292-1.047-2.34-2.339-2.34H211.792z" style="fill:#484B4D;"/>

</svg>

En esta siguiente imagen vectorial no ocasiona problema.

<svg id="8827bb75-1d28-4473-954e-960dfc3694a7" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.48231 33.6619"><title>erp</title><rect x="0.5" y="23.65583" width="27.42157" height="9.50608" rx="0.80219" ry="0.80219" style="fill:none;stroke:#45beeb;stroke-linecap:round;stroke-linejoin:round"/><path d="M3763.981,2725.52925h-25.44813a1.56423,1.56423,0,0,1-1.56423-1.56423v-6.37761a1.56423,1.56423,0,0,1,1.56423-1.56423h5.01593" transform="translate(-3736.46867 -2709.18579)" style="fill:none;stroke:#45beeb;stroke-linecap:round;stroke-linejoin:round"/><polyline points="13.236 5.375 18.05 10.311 27.982 0.5" style="fill:none;stroke:#45beeb;stroke-linecap:round;stroke-linejoin:round"/></svg>

El problema que ocasiona la imagen vectorial es la imagen support:

introducir la descripción de la imagen aquí

Nota: Los bordes donde se encuentra la imagen vectorial son los mismo con el error que ocasiona la imagen support en todas las imágenes vectoriales el único problema el que ocasiona es la imagen vectorial support.


ACTUALIZACIÓN por pedido de Alvaro Montoro

El estilo CSS es el siguiente:

.Fleft {
  float:left;
}

/*EL BORDE DEL CUADRO DONDE SE ENCUENTRA LA IMAGEN*/
.icon-big {
  width: 64px;
  height: 64px;
  margin-top: 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  text-align: center;
  box-shadow: inset 0 0 0 1px #d7d7d7;
  -webkit-box-shadow: inset 0 0 0 1px #d7d7d7;
}

/*LA MANERA DE CÓMO OBTENGO LAS IMÁGENES VECTORIALES*/
.icon-support {
  width: 40px;
  height: 40px;
  background-image: url(../img/system/gray/support.svg);
  content: "";
  display: inline-block;
  background-size: cover;
  position: relative;
  top: 8px;
}

En el HTML

<div class="icon-big Fleft"><i class="icon-support"></i></div>

COMENTARIOS

DEJA TU COMENTARIO

© 2017 website by Rubit Corporation