Anyway, is it normal to NOT fit svg icons to standard “–mdc-icon-size”?
Assume a person creates a card with increased STANDARD icons by changing “–mdc-icon-size” - and icons are properly resized.
So it is strange that custom icons should be initially resized first.
The “rectangle only” issue is simply due to the fact that your original image background is not processed and seen as an element of the image, rendered in the same color as the rest.
When I started with HA, I combed the HA forum for solutions, tried a number of tools, but didn’t find anything simple and efficient. Maybe I missed something but after further research on the web, I ended up trying Adobe Illustrator, which is by far the most efficient way I found to process and add your own icons in HA.
No need to resize to a specific height/width, you just load your image, trace, ungroup, clean and save as SVG.
Literally took me 2min to process your image.
Give it a try if you have access to a license. Works like a charm.
This is unclear for me.
The “rectangle” icon was displayed before a so-called “optimization” performed by this tool.
Then I saw only an image which seems to be a top-left corner of the icon - and this could be explained by “target box = 24х24, source svg = 500x500”.
As for a particular SW like Adobe Illustrator - thanks for the advice, but what I need is an understanding of the issue.
Even after a manual edit of SVG file
I still see after HA reboot & clearing a browser cache
The SVG file contains a path.
I believed that this path is defined in relative coordinates - i.e. no need to edit the path for a different viewport.
Will keep an eye on the thread as I’d also be interested to better understand where the issue comes from.
It’s a personal preference, but the reason I chose to go the Illustrator route was to avoid all of the 3rd party optimization, image size concerns, path edition, etc…
Take an image you like and convert it with one piece of software. no coding. WYSIWYG. period.
Managing custom svg icons / vector images shouldn’t be more difficult than managing png’ , jpg’ or gif’ and that’s what I get with Illustrator.
Always open to better ways to do things so will be watching
Which is working well as it is in… that Visualization Software. It is equally displayed in a browser.
I am happy to use one software (e.g. Inkscape) to convert it. But what do I need to change?
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.