Use external CSS stylesheet with SVG images rather than inline styles

+2 votes
asked May 22, 2017 in Wanted features by anonymous

I would like to be able to use an external CSS stylesheet, to style SVG images, so they could integrate with my sites colour scheme, rather than inline styles which PlantUML currently uses. This should be stright forward as it would simply require suptituing the inline style ouput for each object with a list of classes assigned to the tag i.e.

@startuml
Bob -> Alice : hello
@enduml

currently becomes

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="application/ecmascript" contentStyleType="text/css" height="125px" preserveAspectRatio="none" style="width:119px;height:125px;" version="1.1" viewBox="0 0 119 125" width="119px" zoomAndPan="magnify">
    <defs>
        <filter height="300%" id="f1ovyoxgkqkxtz" width="300%" x="-1" y="-1">
            <feGaussianBlur result="blurOut" stdDeviation="2.0"/>
            <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"/>
            <feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"/>
            <feBlend in="SourceGraphic" in2="blurOut3" mode="normal"/>
        </filter>
    </defs>
    <g>
        <line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="31" x2="31" y1="38.2969" y2="87.4297"/>
        <line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="89" x2="89" y1="38.2969" y2="87.4297"/>
        <rect fill="#FEFECE" filter="url(#f1ovyoxgkqkxtz)" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="42" x="8" y="3"/>
        <text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="28" x="15" y="22.9951">Bob</text>
        <rect fill="#FEFECE" filter="url(#f1ovyoxgkqkxtz)" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="42" x="8" y="86.4297"/>
        <text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="28" x="15" y="106.4248">Bob</text>
        <rect fill="#FEFECE" filter="url(#f1ovyoxgkqkxtz)" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="46" x="64" y="3"/>
        <text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="32" x="71" y="22.9951">Alice</text>
        <rect fill="#FEFECE" filter="url(#f1ovyoxgkqkxtz)" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="46" x="64" y="86.4297"/>
        <text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="32" x="71" y="106.4248">Alice</text>
        <polygon fill="#A80036" points="77,65.2969,87,69.2969,77,73.2969,81,69.2969" style="stroke: #A80036; stroke-width: 1.0;"/>
        <line style="stroke: #A80036; stroke-width: 1.0;" x1="31" x2="83" y1="69.2969" y2="69.2969"/>
        <text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="30" x="38" y="64.3638">hello</text>
    </g>
</svg>

this could instead become something like

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="application/ecmascript" contentStyleType="text/css" height="125px" preserveAspectRatio="none" style="width:119px;height:125px;" version="1.1" viewBox="0 0 119 125" width="119px" zoomAndPan="magnify">
    <defs>
        <filter height="300%" id="uml-object-filter" width="300%" x="-1" y="-1">
            <feGaussianBlur result="blurOut" stdDeviation="2.0"/>
            <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"/>
            <feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"/>
            <feBlend in="SourceGraphic" in2="blurOut3" mode="normal"/>
        </filter>
    </defs>
    <g>
        <line class="uml-connector uml-dashed" x1="31" x2="31" y1="38.2969" y2="87.4297"/>
        <line class="uml-connector uml-dashed" x1="89" x2="89" y1="38.2969" y2="87.4297"/>
        <rect class="uml-object" height="30.2969"  width="42" x="8" y="3"/>
        <text class="uml-object-label" lengthAdjust="spacingAndGlyphs" textLength="28" x="15" y="22.9951">Bob</text>
        <rect class="uml-object" height="30.2969" width="42" x="8" y="86.4297"/>
        <text class="uml-object-label" lengthAdjust="spacingAndGlyphs" textLength="28" x="15" y="106.4248">Bob</text>
        <rect class="uml-object" height="30.2969" width="46" x="64" y="3"/>
        <text class="uml-object-label" lengthAdjust="spacingAndGlyphs" textLength="32" x="71" y="22.9951">Alice</text>
        <rect class="uml-object" height="30.2969" width="46" x="64" y="86.4297"/>
        <text class="uml-object-label" lengthAdjust="spacingAndGlyphs" textLength="32" x="71" y="106.4248">Alice</text>
        <polygon class="uml-conection uml-arrow" points="77,65.2969,87,69.2969,77,73.2969,81,69.2969" />
        <line class="uml-connector" x1="31" x2="83" y1="69.2969" y2="69.2969"/>
        <text class="uml-connector-label" lengthAdjust="spacingAndGlyphs" textLength="30" x="38" y="64.3638">hello</text>
    </g>
</svg>

This could optionally then either include a user specified external stylesheet, or dropthe <?xml ... ?> so it could be embeded and use the page style.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
Anti-spam verification:
To avoid this verification in future, please log in or register.
...