SVG background is not set according to SkinParam

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

1 Answer

+1 vote
answered Feb 9, 2015 by Larry (230 points)
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
commented Feb 14, 2015 by plantuml (134,570 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
commented May 11, 2015 by vialibre (170 points)
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 ?
commented May 12, 2015 by plantuml (134,570 points)
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.
commented May 12, 2015 by vialibre (170 points)
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.
commented May 12, 2015 by plantuml (134,570 points)
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 :-)
...