如何将边框添加到包含svg的背景图像？

Question

像标题一样，我的问题是在包含svg的背景图像周围获得边框。 当我尝试在该背景图像上使用css边框时，边框将向内并减小图像。 我读过一些关于使用svg：image的东西，但对我来说，我必须编辑svg代码本身来获得边框。 没有任何解决方案使用CSS来做到这一点？

解决

谢谢您的解答。但正如我所说，我不想改变svg文件内的任何东西。 我为自己找到了一个工作解决方案。

.s-icon { 
    height: 50px; 
    text-align: center; 
    width: 50px; 
} 

.s-icon--border { 
    background-color: lightblue; 
    -webkit-border-radius: 50px; 
    -moz-border-radius: 50px; 
    border-radius: 50px; 
    line-height: 0; 
    border: 4px solid lightskyblue; 
} 

https://codepen.io/anon/pen/eRBQoE

Answer 1

绘制<rect>圆是填充= “无” 的图像。您可以使用<rect>的笔画作为边框。

Answer 2

你可以用的box-shadow做

div { 
 
    width: 200px; 
 
    height: 100px; 
 
    background: tomato; 
 
    box-shadow: 0 0 0 5px rgba(0,0,0,1); 
 
}

<div></div>