How to achieve transparent background with SVG

Configuration
1

I’m trying to add an analog clock SVG from 3Quarks - SVG Railway Station Clock as a card to my Lovelace dashboard, but I am not able to achieve a transparent background. It stays white no matter what I do.

I am using the Dark theme so card backgrounds should be black or grey.

Try yourself with this URL in an iframe card: http://www.3quarks.com/images/svg/station-clock.svg

I’ve tried the “Web page” (iframe) card. I have tried the custom Lovelace Html Card (via HACS). I’ve tried adding custom styles via card-mod (via HACS). I’ve tried modifying the styles directly on the page via Chrome’s dev tools. Not managed to achieve a transparent background, it stays white.

Any ideas for how to add an SVG with transparent background?

Custom card example:

type: 'custom:html-card'
content: >
  <div style="text-align:center;"><object id="station-clock"
  data="http://www.3quarks.com/images/svg/station-clock.svg" type="image/svg+xml"
  style="padding: 40px; background-image:
  url(http://www.3quarks.com/images/svg/Lindau.png);" width="200" height="200">
  </object></div>
2

I had similar problem adjusting the clock to my needs with HTML, so I decided to just ditch the HTML and use SVG only, which I edited regarding to my needs. Just open the SVG file with a text editor and change the desired parameters, then use the html card with hyperlink to your SVG file.

By the way, the background is transparent by default in the SVG file:).

3

Thanks AdmiralStipe for commenting. If not using the custom:html-card with the object tag, how did you import/reference the SVG?

The SVG should be transparent, yes. It is transparent also on that 3quarks.com site. Even though I use exactly their SVG file and clock face backdrop png, the SVG ends up having a white background.

Here’s a picture showing my result with the custom:html-card and object tag, next to the expected result. Below the custom card is the built-in Webpage card which also comes with a completely white background, although this is more or less expected since it is an iframe.

svg-clock
svg-clock800×600 139 KB

4

As stated, I also couldn’t force the parameters from HTML to SVG, so I edited SVG directly and uploaded it in www directory inside HA.
I then imported it as a built-in webpage card as here:

card
card947×400 37.1 KB

5

I take it then that your clock SVG is not transparent, but instead you set the background to black?

6

Yes, it was transparent before, but it didn’t look good to me, so I changed it to #000000.

1 Like
7

Thanks. Not ideal, but I can work with that for now.

I created an HTML file with the customization, adding background: rgba(0,0,0,0.89) to the body to match the Dark theme, and an aspect ratio at around 1.5 or 66% seems to do the trick.

svg-clock-2
svg-clock-2521×685 51.8 KB