I am having an issue where I use a svg from one of the free online icon sites. But when I place them in the svg component I cannot edit it for sizing, stroke or fill. It is hit or miss. Mostly I cannot resize them. I also tried making one for myself in Affinity, Pixelmator Pro and Figma without any luck or resolving this issue.
what is the secret sauce or is there an issue with the svg component?
Getting SVG’s to display correctly is a bit of a dark art, but with a bit of tinkering you’ll be able to modify them to work and look great on the web and in Elements. We have some more information on working with SVG’s over in the manual.
For your icon, you probably just need to open up the SVG in a text editor and remove the height and width values, see screenshot below for an example.
After doing this and re-adding it to Elements you’ll be able to set the size 
Let me know if you need any more help.
This is indeed a dark art and it takes a lot of tinkering to get an SVG to work properly to be able to set the stroke and fill. What we need is a small app that you can drop an SVG into and it would fix the most common issue, such as, removing the view width and height settings. I can dream.
One thing I was wondering. Many of the SVG stacks in Classic don’t actually accept an actual SVG file instead you place the code from the SVG inside of them. While slightly more cumbersome, the beauty of this apporach is you can edit the code directly in the Stack to tweak it to get it to work properly. With Elements you have to go about this in a more roundabout manner.
Was there any consideration given to use the code approach?
I suspect most novice users are going to have a hard time with SVG files.
BTW, currently it appears as if you cannot have remote SVG files in Resources. When they are added they end up with a warning symbol displayed in front of them and are not usable.
