Home / Questions / 247148
Accepted
qwerty
Asked: 2020-03-20 16:29:49 +0800 CST 2020-03-20 16:29:49 +0800 CST

Problem when modifying the size of an SVG

  • 772

I've been thinking about it and can't resize an SVG properly, I add the source code.

.st0{fill:#FE3D50;}
	.st1{fill:#51E4C2;}
	.st2{fill:#E5F9F4;}
	.st3{fill:#FFFFFF;}
	.st4{opacity:0.2;fill:#51E4C2;enable-background:new    ;}
	.st5{fill:#2283F6;}
	.st6{opacity:0.3;fill:#252528;enable-background:new    ;}
	.st7{fill:none;}
	.st8{fill:#F8E71C;}
	.st9{opacity:0.2;fill:#F8E71C;enable-background:new    ;}
	.st10{opacity:0.1;fill:#534741;enable-background:new    ;}
	.st11{fill:#534741;}
	.st12{opacity:0.2;fill:#DF71F5;enable-background:new    ;}
	.st13{opacity:0.2;fill:#534741;enable-background:new    ;}
	.st14{opacity:0.5;fill:#FFFFFF;enable-background:new    ;}
	.st15{fill:#DF71F5;}
	.st16{fill:#E4EFEC;}
	.st17{fill:#3ECCA6;}
	.st18{opacity:0.1;fill:#1F211E;enable-background:new    ;}
	.st19{opacity:0.1;fill:#51E4C2;enable-background:new    ;}
	.st20{opacity:0.1;fill:#DF71F5;enable-background:new    ;}
	.st21{fill:none;stroke:#534741;stroke-width:6;stroke-linecap:round;stroke-miterlimit:10;}
	.st22{fill:none;stroke:#FE3D50;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}
	.st23{opacity:0.1;fill:#FE3D50;enable-background:new    ;}
	.st24{opacity:0.2;fill:#252528;enable-background:new    ;}
	.st25{opacity:0.2;fill:#2283F6;enable-background:new    ;}
	.st26{opacity:0.2;fill:#FFFFFF;enable-background:new    ;}
	.st27{opacity:0.2;fill:#FE3D50;enable-background:new    ;}
	.st28{fill:#F9EDED;}
	.st29{opacity:0.4;fill:#FE3D50;enable-background:new    ;}
	.st30{opacity:0.3;fill:#FFFFFF;enable-background:new    ;}
	.st31{opacity:0.1;fill:#2283F6;enable-background:new    ;}
	.st32{opacity:0.3;fill:#2283F6;enable-background:new    ;}
	.st33{fill:#F0F2F1;}
	.st34{fill:none;stroke:#E8EDEB;stroke-miterlimit:10;}
	.st35{fill:#E8EDEB;}
	.st36{fill:none;stroke:#F8E71C;stroke-miterlimit:10;}
	.st37{opacity:0.4;fill:#F8E71C;enable-background:new    ;}
	.st38{fill:none;stroke:#E23B53;stroke-miterlimit:10;}
	.st39{fill:none;stroke:#F8E71C;stroke-width:2;stroke-miterlimit:10;}
	.st40{fill:#2283F6;fill-opacity:0.3;}
	.st41{opacity:0.5;fill:#FE3D50;enable-background:new    ;}
	.st42{fill:#E2E6E8;}
	.st43{opacity:0.5;fill:#2283F6;enable-background:new    ;}
	.st44{opacity:0.3;fill:#51E4C2;enable-background:new    ;}
	.st45{fill:none;stroke:#F5F7F6;stroke-miterlimit:10;}
	.st46{opacity:0.4;fill:#51E4C2;enable-background:new    ;}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve" height="200px" viewBox="0 0 1600 1200" width="200px" style="enable-background:0 0 200px 200px;">
  <g style="">
	<circle class="st15" cx="683.7392" cy="268.5" r="80"></circle>
	<circle class="st1" cx="683.7392" cy="268.5" r="55.88454"></circle>
	<path class="st16" d="M738.06525,316.16577l-114.89941-11.27325c-1.0993-0.10785-1.90302-1.08646-1.79517-2.18573l7.85675-80.07739
		c0.10785-1.09929,1.08643-1.90302,2.18573-1.79515l114.89941,11.27324c1.09924,0.10786,1.90295,1.08644,1.7951,2.18573
		l-7.85669,80.07739C740.14313,315.46991,739.16455,316.27362,738.06525,316.16577z"></path>
	<path class="st3" d="M741.46472,310.73096H626.01361c-1.10455,0-2-0.89545-2-2v-80.4619c0-1.10457,0.89545-2,2-2h115.45111
		c1.10461,0,2,0.89543,2,2v80.4619C743.46472,309.83551,742.56934,310.73096,741.46472,310.73096z"></path>
	<polygon class="st17" points="683.7392,278.5 702.90662,259.33258 738.44812,294.87415 738.44812,305.73096 683.73914,305.73096 	
		"></polygon>
	<circle class="st9" cx="719.56879" cy="273.63794" r="14.30533"></circle>
	<circle class="st8" cx="719.56879" cy="273.63794" r="8.97336"></circle>
	<path class="st1" d="M629.01379,283.55862c2.86639-2.28229,35.72925-35.72925,35.72925-35.72925l58.04626,58.0463h-93.77551
		V283.55862z"></path>
	<ellipse class="st18" cx="648.32654" cy="277.74991" rx="6.47058" ry="3.81927"></ellipse>
	<rect x="647.61292" y="268.21634" class="st11" width="1.42719" height="9.53357"></rect>
	<circle class="st17" cx="648.32654" cy="264.46155" r="6.47058"></circle>
</g>
</svg>

html

2 Answers

  1. Best Answer

    If you want to remove the white space around the image you need to recalculate the value of the attribute viewBox. To know the value that I have to use I need to know the size and position of the bounding box of the group that surrounds the image:

      let elG = document.querySelector("g");
  let bb = elG.getBBox();
  console.log(bb);

    The method getBBox()returns an object with the position (x,y) and size (width,height) of the bounding box. I'm going to use these values ​​for the value like viewBoxso:

    vievBox = "bb.x bb.y bb.width bb.height"

    You can do this in javascript or you can do it manually by rounding the numbers to your liking.

    I hope it's useful and doesn't come too late.

    // el grupo que envuelve la imagen
let elG = document.querySelector("g");
//saco en consola el valor de la caja delimitadora del grupo
console.log(elG.getBBox())
    svg{border:1px solid}


.st0{fill:#FE3D50;}
	.st1{fill:#51E4C2;}
	.st2{fill:#E5F9F4;}
	.st3{fill:#FFFFFF;}
	.st4{opacity:0.2;fill:#51E4C2;enable-background:new    ;}
	.st5{fill:#2283F6;}
	.st6{opacity:0.3;fill:#252528;enable-background:new    ;}
	.st7{fill:none;}
	.st8{fill:#F8E71C;}
	.st9{opacity:0.2;fill:#F8E71C;enable-background:new    ;}
	.st10{opacity:0.1;fill:#534741;enable-background:new    ;}
	.st11{fill:#534741;}
	.st12{opacity:0.2;fill:#DF71F5;enable-background:new    ;}
	.st13{opacity:0.2;fill:#534741;enable-background:new    ;}
	.st14{opacity:0.5;fill:#FFFFFF;enable-background:new    ;}
	.st15{fill:#DF71F5;}
	.st16{fill:#E4EFEC;}
	.st17{fill:#3ECCA6;}
	.st18{opacity:0.1;fill:#1F211E;enable-background:new    ;}
	.st19{opacity:0.1;fill:#51E4C2;enable-background:new    ;}
	.st20{opacity:0.1;fill:#DF71F5;enable-background:new    ;}
	.st21{fill:none;stroke:#534741;stroke-width:6;stroke-linecap:round;stroke-miterlimit:10;}
	.st22{fill:none;stroke:#FE3D50;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}
	.st23{opacity:0.1;fill:#FE3D50;enable-background:new    ;}
	.st24{opacity:0.2;fill:#252528;enable-background:new    ;}
	.st25{opacity:0.2;fill:#2283F6;enable-background:new    ;}
	.st26{opacity:0.2;fill:#FFFFFF;enable-background:new    ;}
	.st27{opacity:0.2;fill:#FE3D50;enable-background:new    ;}
	.st28{fill:#F9EDED;}
	.st29{opacity:0.4;fill:#FE3D50;enable-background:new    ;}
	.st30{opacity:0.3;fill:#FFFFFF;enable-background:new    ;}
	.st31{opacity:0.1;fill:#2283F6;enable-background:new    ;}
	.st32{opacity:0.3;fill:#2283F6;enable-background:new    ;}
	.st33{fill:#F0F2F1;}
	.st34{fill:none;stroke:#E8EDEB;stroke-miterlimit:10;}
	.st35{fill:#E8EDEB;}
	.st36{fill:none;stroke:#F8E71C;stroke-miterlimit:10;}
	.st37{opacity:0.4;fill:#F8E71C;enable-background:new    ;}
	.st38{fill:none;stroke:#E23B53;stroke-miterlimit:10;}
	.st39{fill:none;stroke:#F8E71C;stroke-width:2;stroke-miterlimit:10;}
	.st40{fill:#2283F6;fill-opacity:0.3;}
	.st41{opacity:0.5;fill:#FE3D50;enable-background:new    ;}
	.st42{fill:#E2E6E8;}
	.st43{opacity:0.5;fill:#2283F6;enable-background:new    ;}
	.st44{opacity:0.3;fill:#51E4C2;enable-background:new    ;}
	.st45{fill:none;stroke:#F5F7F6;stroke-miterlimit:10;}
	.st46{opacity:0.4;fill:#51E4C2;enable-background:new    ;}
    <svg viewBox="603 188 162 162" width="200px" >
  <g>
	<circle class="st15" cx="683.7392" cy="268.5" r="80"></circle>
	<circle class="st1" cx="683.7392" cy="268.5" r="55.88454"></circle>
	<path class="st16" d="M738.06525,316.16577l-114.89941-11.27325c-1.0993-0.10785-1.90302-1.08646-1.79517-2.18573l7.85675-80.07739
		c0.10785-1.09929,1.08643-1.90302,2.18573-1.79515l114.89941,11.27324c1.09924,0.10786,1.90295,1.08644,1.7951,2.18573
		l-7.85669,80.07739C740.14313,315.46991,739.16455,316.27362,738.06525,316.16577z"></path>
	<path class="st3" d="M741.46472,310.73096H626.01361c-1.10455,0-2-0.89545-2-2v-80.4619c0-1.10457,0.89545-2,2-2h115.45111
		c1.10461,0,2,0.89543,2,2v80.4619C743.46472,309.83551,742.56934,310.73096,741.46472,310.73096z"></path>
	<polygon class="st17" points="683.7392,278.5 702.90662,259.33258 738.44812,294.87415 738.44812,305.73096 683.73914,305.73096 	
		"></polygon>
	<circle class="st9" cx="719.56879" cy="273.63794" r="14.30533"></circle>
	<circle class="st8" cx="719.56879" cy="273.63794" r="8.97336"></circle>
	<path class="st1" d="M629.01379,283.55862c2.86639-2.28229,35.72925-35.72925,35.72925-35.72925l58.04626,58.0463h-93.77551
		V283.55862z"></path>
	<ellipse class="st18" cx="648.32654" cy="277.74991" rx="6.47058" ry="3.81927"></ellipse>
	<rect x="647.61292" y="268.21634" class="st11" width="1.42719" height="9.53357"></rect>
	<circle class="st17" cx="648.32654" cy="264.46155" r="6.47058"></circle>
</g>
</svg>

    • 1

  2. Honestly, I don't know a bit about the subject, but something that I have seen and that at some point I dealt with some svg is that the size was given in pixels, that is, font-size:35px;

    • 0