There is a problem when designing this vector image, it seems to be spaces or positioning error of the vector image.
The errors are not in the styles
css
the problem only occurs in the following image.
<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>
In this vector image it does not cause a problem.
<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>
The problem that the vector image causes is the support image :
Note: The borders where the vector image is located are the same with the error caused by the support image in all vector images, the only problem that it causes is the support vector image.
UPDATE by request of Alvaro Montoro
The CSS style is as follows:
.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;
}
in the HTML
<div class="icon-big Fleft"><i class="icon-support"></i></div>
Modify the SVG, hoping it will work on top of your HTML
The procedure I did was to open it in Inkscape and scale it to use 100% of the
viewbox
, as you will see when saving it inkscape uses relative paths instead of absolute ones, so you will have drastic changes in thepath
With the property
stroke-width
you can make the edges finerI have copied the image and I have saved it in an SVG in a server that I have online. So I have put your code:
And the picture looks very small, but as you show in your picture. If you change the CSS so that the background image is larger and centered (with
background-size
andbackground-position
respectively) the problem is solved: