Question

如何将下面的SVG图像作为具有width 25px，height auto并且没有额外的边距或填充的普通图像？

<img class='btnR' id='btnB' src='btns/recycle.svg'>

Recycle.svg

svg {
 border:1px solid red;
}

<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
    	 width="100%" height="100%" viewBox="0 0 550 400" enable-background="new 0 0 550 400" xml:space="preserve">
    <g>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#aaa" d="M347.15,219.95c-0.5,0.5-1.051,1-1.65,1.5
    	c-3.134,2.767-6.717,4.1-10.75,4l-13-0.101l13,0.101c4.033,0.1,7.616-1.233,10.75-4C346.1,220.95,346.65,220.45,347.15,219.95
    	l-22.2,35.2c-0.566,0.866-1.4,1.733-2.5,2.6c-2.233,1.733-4.667,2.583-7.3,2.55l-18.7-0.25l-0.25,14.5L277.85,242.65l18.45-34.15
    	l-0.399,16.65l25.85,0.199l-20.2-35.149l32.4-18.7l16.45,28.75c0.633,1.366,1.083,2.767,1.35,4.2c0.9,4.666,0,8.95-2.7,12.85
    	c-0.434,0.8-1.017,1.617-1.75,2.45C347.233,219.816,347.184,219.884,347.15,219.95z M242.9,129.8c3.533-3.167,7.667-4.6,12.4-4.3
    	l2.9,0.5l41.95,0.45l3.55,0.8c2.633,1,4.6,2.633,5.899,4.9l9.5,16.15l12.551-7.3l-17.801,32.2l-38.8,1.9l14.5-8.25l-13.1-22.25
    	l-19.75,35.55l-32.8-18.05l16.1-29C240.833,131.9,241.8,130.8,242.9,129.8z M228.05,224.05h40.45l0.05,37.45h-31.4
    	c-1.833,0.1-3.867-0.25-6.1-1.05c-4.433-1.533-7.667-4.434-9.7-8.7c-0.467-0.8-0.867-1.717-1.2-2.75
    	c-0.233-0.733-0.433-1.517-0.6-2.35c-0.8-4.067-0.167-7.817,1.9-11.25L228.05,224.05l-6.6,11.351
    	c-2.067,3.433-2.7,7.183-1.9,11.25c0.167,0.833,0.367,1.616,0.6,2.35l-19.7-37.05c-0.467-0.934-0.8-2.084-1-3.45
    	c-0.4-2.767,0.083-5.283,1.45-7.55l9.55-16.1l-12.5-7.45h36.85l20.4,33l-14.25-8.65L228.05,224.05z M258.2,126l2.4,0.4
    	c3.9,1.3,6.85,3.7,8.85,7.2l7,11l-7-11c-2-3.5-4.95-5.9-8.85-7.2L258.2,126z"/>
    </g>
    </svg>

<img class='btnR' id='btnB' src='btns/recycle.svg'>

CSS：

.btnR{
    width:25px;
    display:inline-block;
    vertical-align:middle;
    color:#777;
    cursor:pointer;
    position:relative;
    background:lightblue;
    padding:0;
}

Answer 1

您需要编辑视图框以减少空间：

svg {
 border:1px solid red; 
 width:150px;
}

<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
     viewBox="200 120 150 150" >
<g>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#aaa" d="M347.15,219.95c-0.5,0.5-1.051,1-1.65,1.5
    c-3.134,2.767-6.717,4.1-10.75,4l-13-0.101l13,0.101c4.033,0.1,7.616-1.233,10.75-4C346.1,220.95,346.65,220.45,347.15,219.95
    l-22.2,35.2c-0.566,0.866-1.4,1.733-2.5,2.6c-2.233,1.733-4.667,2.583-7.3,2.55l-18.7-0.25l-0.25,14.5L277.85,242.65l18.45-34.15
    l-0.399,16.65l25.85,0.199l-20.2-35.149l32.4-18.7l16.45,28.75c0.633,1.366,1.083,2.767,1.35,4.2c0.9,4.666,0,8.95-2.7,12.85
    c-0.434,0.8-1.017,1.617-1.75,2.45C347.233,219.816,347.184,219.884,347.15,219.95z M242.9,129.8c3.533-3.167,7.667-4.6,12.4-4.3
    l2.9,0.5l41.95,0.45l3.55,0.8c2.633,1,4.6,2.633,5.899,4.9l9.5,16.15l12.551-7.3l-17.801,32.2l-38.8,1.9l14.5-8.25l-13.1-22.25
    l-19.75,35.55l-32.8-18.05l16.1-29C240.833,131.9,241.8,130.8,242.9,129.8z M228.05,224.05h40.45l0.05,37.45h-31.4
    c-1.833,0.1-3.867-0.25-6.1-1.05c-4.433-1.533-7.667-4.434-9.7-8.7c-0.467-0.8-0.867-1.717-1.2-2.75
    c-0.233-0.733-0.433-1.517-0.6-2.35c-0.8-4.067-0.167-7.817,1.9-11.25L228.05,224.05l-6.6,11.351
    c-2.067,3.433-2.7,7.183-1.9,11.25c0.167,0.833,0.367,1.616,0.6,2.35l-19.7-37.05c-0.467-0.934-0.8-2.084-1-3.45
    c-0.4-2.767,0.083-5.283,1.45-7.55l9.55-16.1l-12.5-7.45h36.85l20.4,33l-14.25-8.65L228.05,224.05z M258.2,126l2.4,0.4
    c3.9,1.3,6.85,3.7,8.85,7.2l7,11l-7-11c-2-3.5-4.95-5.9-8.85-7.2L258.2,126z"/>
</g>
</svg>

如何正确设置SVG图像的样式

1 个答案: