Draw border - like "sticker effect"

[ftballguy45]

Hello, this isn't really an issue, but I'm looking for a way to draw a border or stroke outline around all the edges of an SVG image/icon. This border can be colored different colors depending on a status of the object that the icon represents. Do you have any ideas or anything built into the library?

Thank you

[paulushub]

Hello, this isn't really an issue

OK, I have moved it to the Discussions forum.

Do you have any ideas or anything built into the library?

It should possible. I have plans to release a new version of the markup extension SvgIcon similar to the SvgImage.
I do not know if this feature will fit in, but can you post a picture of a sample output and styling?

[ftballguy45]

[ftballguy45]

Did that image help to understand what I'm looking to do?

[paulushub]

Sorry for delay, please apply BlurBitmapEffect to the drawing.

[ftballguy45]

Hmmm, I'm not sure that will give the desired border/stroke around the image. It needs to be solid and follow the outline of the image

[ftballguy45]

I don't honestly know a whole lot about SVG but I was going to try a couple different routes

1. Export the SVG icons to XAML, then programmatically add a stroke around the outermost path?
   -- Problem with this is I don't know how to get the XAML DrawingGroup to size correctly programmatically? I just tried to create a DrawingBrush from the exported XAML and fill a rectangle with it, but without a size on the Rectangle nothing shows - which makes sense because the DrawingBrush doesn't have any notion of size
   or
2. When importing the SVG icons, programmatically add a stroke or border or outline around the outermost SVG element?

[paulushub]

OKay, post a sample of the input SVG and lets see how to get it done.

[ftballguy45]

This a sim card icon

<svg height="512" viewBox="0 0 74 74" width="512" xmlns="http://www.w3.org/2000/svg"><g id="color_styel" data-name="color styel"><path d="m61.953 14.035v57h-50v-68h39z" fill="#eeefee"/><path d="m62.453 71.535h-51v-69h39.707l11.293 11.293zm-50-1h49v-56.293l-10.707-10.707h-38.293z" fill="#323c6b"/><path d="m50.953 3.035h-3l11 11v57h3v-57z" fill="#dbd8dd"/><rect fill="#fed19a" height="32" rx="2" width="30" x="21.953" y="29.035"/><path d="m49.953 61.535h-26a2.5 2.5 0 0 1 -2.5-2.5v-28a2.5 2.5 0 0 1 2.5-2.5h26a2.5 2.5 0 0 1 2.5 2.5v28a2.5 2.5 0 0 1 -2.5 2.5zm-26-32a1.5 1.5 0 0 0 -1.5 1.5v28a1.5 1.5 0 0 0 1.5 1.5h26a1.5 1.5 0 0 0 1.5-1.5v-28a1.5 1.5 0 0 0 -1.5-1.5z" fill="#323c6b"/><g fill="#e6b17d"><path d="m22.455 49.535h28.996v1h-28.996z"/><path d="m41.453 50.035h1v10.498h-1z"/><path d="m31.453 50.035h1v10.498h-1z"/><path d="m41.453 29.532h1v10.525h-1z"/><path d="m51.441 40.535h-19.988v-11.003h1v10.047h18.988z"/></g><path d="m62.453 71.535h-51v-69h39.707l11.293 11.293zm-50-1h49v-56.293l-10.707-10.707h-38.293z" fill="#323c6b"/><g fill="#dbd8dd"><path d="m24.546 6.437a.593.593 0 0 0 -.593-.593h-.853a.593.593 0 1 0 0 1.187h.853a.593.593 0 0 0 .593-.594z"/><path d="m21.691 6.437a.593.593 0 0 0 -.593-.593h-5.823a.593.593 0 0 0 -.593.593v4.932a.593.593 0 1 0 1.187 0v-4.339h5.231a.593.593 0 0 0 .591-.593z"/></g></g></svg>