3

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>
10
  • ¿Podrías compartir el código HTML+CSS que falla con las imágenes SVG?
    – Alvaro Montoro
    Commented el 31 ene. 2017 a las 18:12
  • Hola @AlvaroMontoro Editado la pregunta aunque el problema no es en el HTML/CSS.
    – J. Mick
    Commented el 31 ene. 2017 a las 18:28
  • Te estaba poniendo un comentario cuando editaste la pregunta. No podía duplicar el problema, voy a probar con tu código. Gracias
    – Alvaro Montoro
    Commented el 31 ene. 2017 a las 18:29
  • Sigo sin poder reproducir el problema en local. Esto es lo que veo cuando ejecuto tu código: i.imgur.com/FaNnvgB.png
    – Alvaro Montoro
    Commented el 31 ene. 2017 a las 18:33
  • @AlvaroMontoro El problema ahí del ejemplo es que la imagen vectorial quedan muy pequeña, yo juego con el tamaño deseado en la class .icon-support mediante width: 40px; height: 40px;
    – J. Mick
    Commented el 31 ene. 2017 a las 18:34

2 respuestas 2

2

Modifique el SVG, esperando que asi funcione sobre tu HTML

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="100%"
   height="100%"
   viewBox="0 0 500 500"
   id="svg2">
  <defs
     id="defs12" />
  <path
     d="m 481.5651,209.85405 v 135.06579 c 0,6.47601 -5.2774,11.77488 -11.75341,11.77488 h -66.642 c -6.4438,0 -11.71763,-5.2953 -11.71763,-11.77488 V 209.85405 c 0,-6.48316 5.2774,-11.77488 11.71763,-11.77488 h 12.55843 V 168.74395 C 415.58143,94.731467 355.71239,34.840962 281.67844,34.751514 H 215.54807 C 141.51769,34.840962 81.680857,94.735045 81.537741,168.74395 v 29.33522 h 13.792813 c 6.479576,0 11.756986,5.29172 11.756986,11.77488 v 135.06579 c 0,6.47601 -5.27741,11.77488 -11.756986,11.77488 H 80.807848 c 11.828545,36.81304 46.294482,63.47199 87.057522,63.54712 h 21.18118 v -5.0198 c 0,-5.18795 4.22192,-9.82849 9.38841,-10.30078 l 44.76671,-4.13247 c 5.20585,-0.47229 14.30446,4.75145 14.30446,25.91474 0,21.16329 -9.10219,25.14908 -14.30446,24.67679 l -44.76671,-4.16825 c -5.16649,-0.43651 -9.38841,-5.09493 -9.38841,-10.28289 v -4.96971 h -21.18118 c -47.31418,0 -87.204216,-31.86122 -99.397706,-75.26475 H 28.724326 c -6.440224,0 -11.756987,-5.2953 -11.756987,-11.77488 V 209.85405 c 0,-6.48316 5.313185,-11.77488 11.756987,-11.77488 h 35.160045 v -29.33522 c 0,-83.730065 67.912159,-151.627916 151.663699,-151.627916 h 66.13037 c 83.78374,0 151.6637,67.897851 151.6637,151.627916 v 29.33522 h 36.46955 c 6.47601,0 11.75341,5.2953 11.75341,11.77488 z"
     id="path4"
     style="fill:#777777" />
  <path
     d="m 340.53135,224.26584 h -14.84829 c -4.65843,0 -8.40807,3.74964 -8.40807,8.37229 v 34.48382 c 0,4.64412 3.74964,8.39018 8.40807,8.39018 h 14.84829 c 4.65843,0 8.40807,-3.74606 8.40807,-8.39018 v -34.48382 c -0.004,-4.62265 -3.75322,-8.37229 -8.40807,-8.37229 z"
     id="path6"
     style="fill:#484b4d" />
  <path
     d="m 153.08863,224.26584 c -4.62265,0 -8.37229,3.74964 -8.37229,8.37229 v 34.48382 c 0,4.64412 3.74964,8.39018 8.37229,8.39018 h 14.92343 c 4.62265,0 8.36871,-3.74606 8.36871,-8.39018 v -34.48382 c 0,-4.62265 -3.74606,-8.37229 -8.36871,-8.37229 h -14.92343 z"
     id="path8"
     style="fill:#484b4d" />
</svg>

El procedimiento que realize fue abrirlo en Inkscape y lo escale a que usara el 100% del viewbox, como veras al guardarlo inkscape usa path relativos en lugar de absolutos, por lo cual tendras cambios drasticos en el path


Con la propiedad stroke-width puedes hacer los bordes mas finos

7
  • Hola @jasilva Funciona perfectamente, tengo el programa de **Inkscape ** hace unos días atrás lo instale pero aun no se como usarlo, podrías decirme que pasos hiciste en el programa para que la imagen vectorial tenga esos cambios deseados.
    – J. Mick
    Commented el 31 ene. 2017 a las 18:15
  • por cierto amigo en aquel programa puedo perfeccionar también los bordes de la imagen para obtener unos bordes más delgados o más fino porque en esta ocasión las propiedades stroke-width: 0.1px; width: 1px; no funciona podrias mencionar aquello en tu pregunta si no es mucho pedir amigo.
    – J. Mick
    Commented el 31 ene. 2017 a las 18:19
  • Con "F1" selecciona todos los path( en este caso tres) y cuandos esten todos selecionados, apareceran 8 flechas para escalar y las arrastras, para mover todo proporcionalmente, puedes ver aqui
    – jasilva
    Commented el 31 ene. 2017 a las 18:27
  • parece fácil, amigo y con Inkscape también es posible editar los bordes o perfeccionar los bordes a más delgado/fino las líneas del dibujo se puede o no.
    – J. Mick
    Commented el 31 ene. 2017 a las 18:30
  • @J.Mick Si lo recomendables es crear los svg en un editor, ya que es muy complejo estar manipulando los path a mano. Para el stroke trata de usar stroke:#000000;stroke-width:1;stroke-opacity:1 aunque opacity en teoria por defaul es 1
    – jasilva
    Commented el 31 ene. 2017 a las 18:30
2

He copiado la imagen y la he guardado en un SVG en un servidor que tengo online. Entonces he puesto tu código:

.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(http://alvaromontoro.com/images/support.svg);
  content: "";
  display: inline-block;
  background-size: cover;
  position: relative;
  top: 8px;
}
<div class="icon-big Fleft"><i class="icon-support"></i></div>

Y la imagen se ve muy pequeña, pero como lo muestras en tu imagen. Si cambias el CSS para que la imagen de fondo tenga un tamaño más grande y esté centrada (con background-size y background-position respectivamente) el problema se resuelve:

.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: 100%;
  height: 100%;
  background-image: url(http://alvaromontoro.com/images/support.svg);
  display: inline-block;
  background-size: 150% 150%;
  background-position:center center;
}
<div class="icon-big Fleft"><i class="icon-support"></i></div>

3
  • Es una muy buena opción amigo pero por otra parte la imagen vectorial quedaría con aquel problema, sigue con el tema para aclarar cual era en realidad el problema un +1 por una segunda alternativa gracias.
    – J. Mick
    Commented el 31 ene. 2017 a las 19:01
  • @J.Mick Si lo que quieres es editar la imagen, puedes abrirla con GIMP, cortarla y exportar los paths. Es un método rápido, aunque el código no será tan limpio como el que tienes. Pero creo que también te serviría: alvaromontoro.com/images/support2.svg
    – Alvaro Montoro
    Commented el 31 ene. 2017 a las 19:07
  • Gracias amigo otro programa muy interesante que lo tendre encuenta a la hora de editar y diseñar imágenes vectoriales. pero al parecer Inkscape es mucho más mejor o más limpio e optimizado como se puede observar en la respuesta de jasilva la imagen la edito con este programa Inkscape.
    – J. Mick
    Commented el 31 ene. 2017 a las 19:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.