1

He dado vueltas al asunto y no logro modificar el tamaño de un SVG apropiadamente, agrego el código fuente.

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

2
  • porque no usas : svg { width: 100%; height: auto; }..podrias revisarlo aca: jsfiddle.net/g6xofcvk Commented el 20 mar. 2019 a las 1:10
  • Borra el width y height del <svg>. Si lo haces el SVG toma la anchura del elemento que lo contiene.
    – enxaneta
    Commented el 20 mar. 2019 a las 18:44

2 respuestas 2

1

Si lo que quieres es quitar el espacio en blanco alrededor de la imagen necesitas recalcular el valor del atributo viewBox. Para saber el valor que tengo que utilizar necesito saber el tamaño y la posición de la caja delimitadora (bounding box) del grupo que envuelve la imagen:

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

El método getBBox() devuelve un objeto con la posición (x,y) y tamaño (width,height) de la caja delimitadora. Voy a utilizar estos valores para el valor de viewBox así:

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

Esto lo puedes hacer en javascript o lo puedes hacer manualmente redondeando los números a tu gusto.

Espero que sea útil y que no venga demasiado tarde.

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

0

Sinceramente desconozco un poco del tema, pero algo que he visto y que en algún momento ocupe con algunos svg es que la medida se le daba en pixeles, es decir font-size:35px;

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.