Wie füge ich einen Rahmen zu einem Hintergrundbild hinzu, das einen Svg enthält?

Question

Wie die Überschrift habe ich das Problem, einen Rahmen um mein Hintergrundbild zu bekommen, der eine SVG enthält. Wenn ich versuche, CSS-Rahmen auf diesem Hintergrundbild zu verwenden, wird der Rahmen nach innen gehen und das Bild verkleinern. Ich habe etwas über die Verwendung von Svg: Bild gelesen, aber das scheint für mich, dass ich den SVG-Code selbst bearbeiten muss, um einen Rahmen zu bekommen. Gibt es keine Lösung, um es mit CSS zu tun?

Gelöst

Vielen Dank für Ihre Antworten. Aber wie gesagt, ich möchte nichts in der Svg-Datei ändern. Ich habe eine funktionierende Lösung für mich gefunden.

.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

ein <rect> runden das Bild zeichnen, das = "none" ist zu füllen. Sie können den Strich des <rect> als Grenze verwenden.

Answer 2

Sie es mit box-shadow tun konnte

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

<div></div>