Unable to find a way to UPLOAD svg images to /media or /config/www

Is there anyone around to point me in the right direction as I/m going crazy, it’s been an hour and I still haven’t figured out how can I upload an svg file to a folder that can be accessed by picture element card?

I don’t understand why is so complicated :frowning:

In Media Browser there is no UPLOAD button, i can see there a few photos I uploaded while creating a few section in my dashboard, uploaded for background of my dashboard, the svg is not accepted there.

I also have File Editor Addon, but that gives access only inside /homeassistant folder. I have created the www/images folder, the path looks like this : /homeassistant/config/www/images but any svg I place there is not accesible when I write the YAML this :

type: picture-elements
image: /local/images/house-plan.svg

After googling alot I also disabled Enforce Basepath in File Editor and restarted HA, I don’t see any /config folder when I move out one level from /homeassistant, only the usual system folders.

What I’m missing, why I can’t find a straight forward method to upload in image to be used with picture element ?

Thank you

PS.

  • Installation methodHome Assistant OS
  • Core2025.12.4
  • Supervisor2025.12.3
  • Operating System16.3
  • Frontend20251203.3

homeassistant and config are the same folders. So, it should be /homeassistant/www/images.

And, you can upload using the file editor addon.

Thank you for your quick reply.

I also tried that way, but haven’t mentioned, so as you can see here I have that file inside the www/images folder yet is still not visible in my dashboard :frowning:

Here is my YAML and preview

Here is the html source:

That is building http://local/images/binder-penthouse-plan.svg

Although, the docs say you can use /local/…

Try putting in the whole http:// with your IP:PORT/local/…

I masked out my IP address in the screenshot above, in html source code I can see the full ip & port like this :

Oh, duh. I missed that. Grrrr.

Looks like .svg does not work in picture-elements. See here:

Ohhh … so it’s not the location of the upload, but that picture-element does not allow svg in the image: parameter.

i did follow the suggestion of @LiQuid_cOOled to trick picture-element and it worked but now I have the background twice, but it doesn’t matter… at least now I know that files uploaded using File Editor, in the /homeassistant/www folder is the way to go, to be accessible in dashboard to the /local path

I will try maybe HACS svg-floorplan as I want somehow to inject the text in the svg file, also to hide elelemnts in the svg by their ID and maybe use an class display:none to hide, or display:block to show an elelement

Thank you again @jeffcrum !

1 Like