Welcome to PlantUML Q&A, where you can ask questions and receive answers from other members of the community.

You can also submit new features request and vote for them.

SVG background is not set according to SkinParam

+1 vote
backgroundColor is not used when generating SVG files. To test, SkinParam backgroundColor #000000 java -jar plantuml.jar -tsvg
asked Dec 8, 2014 by Krag (160 points)

1 Answer

+1 vote
The problem seems more general than the skinparam backgroundColor.

The following background styling directives (within a note and autonumber) have no effect when generating to SVG

@startuml
autonumber "<back:red><b><size:16> # </size></b></back>"
A->B : Message
note right of A
  This is <back:red>RED</back> background
end note
@enduml
answered Feb 9, 2015 by Larry (230 points)
Thanks for the report.
However, we may be wrong, but we cannot find a (simple) way of changing background color with text in SVG.
Anyone know how to do this ?

Thanks
Hi,

I guess you could use a <filter> tag applied to the <text> tag, the same way you use a filter to add the shadows.

The following uml …

@startuml
:<back:red>Comment</back>;
@enduml

… would render as (I added the "f2" filter) to the generated source …

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="50px" style="width:96px;height:50px;" version="1.1" viewBox="0 0 96 50" width="96px">

<defs>

  <filter height="300%" id="f1" width="300%" x="-1" y="-1">
    <feGaussianBlur result="blurOut" stdDeviation="2.0">
    </feGaussianBlur>
    <feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"></feColorMatrix>
    <feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"></feOffset>
    <feBlend in="SourceGraphic" in2="blurOut3" mode="normal"></feBlend>
  </filter>
  
  <filter id="f2" x="0" y="0" width="1" height="1">
    <feFlood flood-color="red"></feFlood>
    <feComposite in="SourceGraphic"></feComposite>
  </filter>

</defs>

<g>

  <rect fill="#FEFECE" filter="url(#f1)" height="33.9688" rx="12.5" ry="12.5" style="stroke: #A80036; stroke-width: 1.5;" width="79" x="10" y="10"></rect>
  
  <text fill="#000000" filter="url(#f2)" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="59" x="20" y="31.1387">Comment</text>
  
</g>

</svg>

Would that be simple enough to implement ?
Many thanks for the idea and your filter implementation. We are not very good at SVG, so it definitively helps!
We have implemented this is in the last beta:
https://dl.dropboxusercontent.com/u/13064071/plantuml.jar
Few tests have been done, but this seems ok.
We will release this in next official version.
Thanks again.
Neither am I an expert at SVG unfortunately.
The filter seems to rasterize the text, and it affects the text antialiasing.

@startuml
    :<back:white>impacted font alias</back>, standard font alias ;
@enduml

An other option would be to add a <rect> before the <text>, but I have no clue how to compute the exact text size.
I guess it depends on the SVG reader. Under Firefox, the filter does not affect antialiasing (at least, with our tests).
The filter option is more elegant than the <rect> solution. BTW, we compute the text length (see textLength attribute) but not the text height (even if we have the font-size).
Maybe you can tweak around to solve the antialiasing issue ?
If you modify the filter successfully, we will be pleased to integrate your modification :-)
Support This Project Offer 250 Mo! Follow PlantUML on Twitter
...