CODEWITHSUNDEEP
htmlcsssvg
JohanStaart
JohanStaart

Reputation: 75

Put a border around a SVG (converted) image

So I have this image (converted from PNG to SVG)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M32 22c3.31 0 5.98-2.69 5.98-6s-2.67-6-5.98-6c-3.31 0-6 2.69-6 6s2.69 6 6 6zm-16 0c3.31 0 5.98-2.69 5.98-6s-2.67-6-5.98-6c-3.31 0-6 2.69-6 6s2.69 6 6 6zm0 4c-4.67 0-14 2.34-14 7v5h28v-5c0-4.66-9.33-7-14-7zm16 0c-.58 0-1.23.04-1.93.11C32.39 27.78 34 30.03 34 33v5h12v-5c0-4.66-9.33-7-14-7z"/></svg>

Now I can use fill to change the colors etc. But I don't manage to get a stroke around the image itselfs with the border property I just get a rectangle around the whole element (so not around the image) and with stroke I get nothing.

Here is a jsfiddle with the stroke and border propertie tried: https://jsfiddle.net/9mbqdbcj/

Does anybody know how I can get an border around the image?

Thanks in advance.

Upvotes: 0

Views: 1138

Answers (2)

Himesh Aadeshara
Himesh Aadeshara

Reputation: 2131

you can apply in the path element also you can try this way i you have access to change html then

stroke="red" stroke-width="0.3"

here is your code 

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M32 22c3.31 0 5.98-2.69 5.98-6s-2.67-6-5.98-6c-3.31 0-6 2.69-6 6s2.69 6 6 6zm-16 0c3.31 0 5.98-2.69 5.98-6s-2.67-6-5.98-6c-3.31 0-6 2.69-6 6s2.69 6 6 6zm0 4c-4.67 0-14 2.34-14 7v5h28v-5c0-4.66-9.33-7-14-7zm16 0c-.58 0-1.23.04-1.93.11C32.39 27.78 34 30.03 34 33v5h12v-5c0-4.66-9.33-7-14-7z" stroke="red" stroke-width="0.3" /></svg>

demo code DEMO

you can learn more from Learn more

Upvotes: 0

Lauromine
Lauromine

Reputation: 1493

You can use this the stroke and stroke-width properties:

CSS :

stroke: red;
stroke-width: 0.1;

Fiddle : https://jsfiddle.net/9mbqdbcj/2/

Upvotes: 3

Related Questions