White backgrounds are rendered transparent in SVG

+4 votes
asked Oct 10, 2018 in Bug by Rob Oxspring

The following diagram, but using red, correctly renders with a red background in both PNG and SVG formats. Similarly, the same diagram using transparent correctly creates semi-transparent PNGs and SVGs without a background. But when the background color is white (or unspecified) it appears that PNGs get a white background as expected, but SVGs are left with no background set and are therefore transparent.

@startuml
skinparam backgroundColor white
rectangle "White Background"
@enduml

commented Oct 27, 2022 by scotofil (120 points)
Same here, and for me (at least with Teoz), the backgroundColor workaround doesn't work either. Has anyone come across a proper solution?
commented Oct 27, 2022 by plantuml (294,960 points)

Which version are you using?

This example should be working now.

commented Oct 27, 2022 by scotofil (120 points)
Thanks for the prompt response, and in general, huge thanks for this great tool!

I'm using 1.2022.4, and the issue is probably indeed on my end: in Chrome, e.g. with "skinparam backgroundColor #FF0000" I get a red background for the entire message sequence chart, but when I try to embed the resulting .svg to a Word document, if the black/dark mode is used, only the title becomes red, the rest remains transparent (i.e. black, rendering all black lines practically invisible, and opposed to png, visio, etc. embedded figures, setting a solid white fill for the figure does not work for svg files).
commented Oct 27, 2022 by plantuml (294,960 points)
There are many way to define the background color of a SVG document (see https://stackoverflow.com/questions/11293026/default-background-color-of-svg-root-element )

We currently are using 'style' into the main <svg> tag. This may be not supported by Word.

Would it be possible that you check some examples from https://stackoverflow.com/questions/11293026/default-background-color-of-svg-root-element and tell us which one are actually working within Word?
commented Oct 27, 2022 by scotofil (120 points)

Thanks a lot for the recommendation!

  • <rect width="100%" height="100%" fill="#FF0000"/>
    • Works like a charm in Word (also with Chrome, Edge, FF, even with IE10)
    • FWIW the PlantUML title has by default a white background, so with the above red background it will have its own white (nor red, neither transparent) background
  • Unfortunately no matter how I tried I could not get viewport-fill="red" to work in either the browsers or in Word, but that is most likely due to my lack of experience with SVG in general

1 Answer

+2 votes
answered Nov 5, 2019 by GitNick (160 points)
Found the same to be true. Looking at the SVG output, the background style property is distinctly absent. My only workaround right now is to use an off-white, like `#fefefe`
commented Feb 18, 2020 by leila (100 points)
Ditto. I'm using off white as a workaround as suggested, but this isn't ideal.
...