Reputation: 75
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
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
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