your file saved as SVG with Illustrator, nothing to change.
Your image is already a vector image - SVG.
See below, the black part is your vector image and the white part is just the “art board” or canvas. compare this to the HA example above. You don’t have the extra white background elements which need to be removed when you are converting from a png or jpg.
I’m no expert but much easier to do this the visual way than trying to figure out what’s wrong with the underlying code.
If you dig deeper, you’ll probably find why Home Assistant likes Illustrator’s SVG coding. There’s clearly some parameters that make it right. But to be honest, I don’t care. I have more than enough HA projects on the drawing board and already marked this one as “done” =)
Well, assume there is an SVG icon taken from somewhere. Let it be a HA legacy logo from here.
User may download this SVG file - then he puts it into “custom_icons” folder and sees not what is expected.
Assume someone told him: the SVG should be 24x24.
Then a user have 2 options:
– either he should edit the SVG file manually - and NOBODY here confirmed that this is possible; my attempts to edit to
width="24" height="24" viewBox="0 0 24 24"
successfully failed, seems that a path should be edited too;
– or user may take some Software, select “save to 24x24” and get a final 100% working file.
Since nobody can comment the 1st option - then the question is “what SW can save SVG to 24x24”? Can Adobe Illustrator do it?
The 1st Google result for “svg resize” gives this tool which I tried with HA logo and the output file is a solid rectangle.
I did go through many custom SVG threads on the forum and tried a number of these options, including the infamous “resize to 24x24”, with less than conclusive results.
As I said earlier, and for some reason beyond the time I want to invest understanding it, Illustrator SVG format doesn’t care about the SVG dimensions; I can save it in 24x24, 200x100, 1000x1000, it always work when added to the custom-icons folder.
When you think about it, this does make sense as vector based images do not use a grid of pixels and can be scaled to any size.
the reason you see the full rectangle is because of the blue background.
HA icons are monochrome, so no matter which converter or size you will use, the background will always blend unless you remove it.
This is the benefit of seeing what you are actually doing.
That is why I believed that a “path” part in SVG file is not supposed to be changed if you need to resize the SVG image, you only need to edit width, height, viewBox.
Still a newbie and learned a lot from users on this forum;
but this one was originally a dead end for me so happy to give back.
Once I grasped why a lot of people were getting the “dark rectangle” it all made sense.
Especially if you want to convert png or jpg which end up with a set of backgound elements. An easy fix with Illustrator though. And you now have access to millions of icons from the web.
added bonus: by playing with the “artboard” (canvas) you can manage “padding” around the image and image ratio.
And all of this because I couldn’t find a “sauna” icon.
To check it - copy some path (a part between <"> quotes) to clipboard and then paste it in any path editor (Google proposed SVG Path Editor); do it for both paths (separate by a whitespace):
So, if I understand you well, in my image everything seems ok, as I do not have a white background, right? So, what’s wrong then? Can you upload here the version saved by Illustrator?
Do you have any suggestion for me, how to get it to work? I do not have Illustrator, unfortunately.
I know this is an old thread, but since I faced the same issue as the TO, I want to share what I found out after some tests with Inkscape:
All pathes of my SVGs were filled, even not closed ones. After some testing I found out, that all non-custom SVGs do not use simple path as “lines” or “border”. Instead they always seem to use an area surrounded by pathes.
Try to use the Path–>“Stroke to Path” function in Inkscape.
