Embedding svg shape on a widget's CSS

Community Usage questions
1

Hi there,

I have just created a shape to give it to the LED's of my device. (our device as we will be soon enjoying all :yum: )
So basically this is the shape on pure svg

        <svg viewBox= "0 0 100 100" xmlns="http://www.w3.org/2000/svg">
            <title>virtual-launchcontrolxl knobLed</title>
        <defs>
            <g id="knobLed" style="stroke: black;fill-rule: evenodd; fill: green; stroke-width: 1px;">
                <path d="M10 70 Q25 52 20 30 Q50 38 80 30 Q75 52 90 70 Q50 78 10 70"></path>
            </g>
        </defs>
        <use xlink:href="#knobLed" x="0" y="0"></use>

I have been checking in the documentation or knowledge base to see any example on how to achieve this , and I came across this post.

So I need to adapt the following syntax

:host {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97.28 169.94"><defs><style>.cls-1,.cls-2{fill:none;stroke:red;stroke-linejoin:round;}.cls-1{stroke-linecap:round;stroke-width:14.72px;}.cls-2{stroke-linecap:square;stroke-width:23px;}</style></defs><title>delete_restart</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><line class="cls-1" x1="89.92" y1="136.76" x2="7.36" y2="136.76"/><line class="cls-1" x1="7.36" y1="136.76" x2="42.24" y2="162.58"/><line class="cls-1" x1="7.36" y1="136.76" x2="42.24" y2="112.67"/><line class="cls-2" x1="80.34" y1="16.26" x2="17.82" y2="78.78"/><line class="cls-2" x1="80.34" y1="78.78" x2="17.82" y2="16.26"/></g></g></svg>') 
no-repeat 50% 40%;
background-size: 22%;
background-color: #111111;
}

Which in my head produces

:host {
background: url('data:image/svg+xml;utf8,<svg viewBox= "0 0 100 100" xmlns="http://www.w3.org/2000/svg"><title>virtual-launchcontrolxl knobLed</title><defs><g id="knobLed" style="stroke: black;fill-rule: evenodd; fill: green; stroke-width: 1px;"><path d="M10 70 Q25 52 20 30 Q50 38 80 30 Q75 52 90 70 Q50 78 10 70"></path></g></defs><use xlink:href="#knobLed" x="0" y="0"></use>') 
no-repeat 50% 40%;
background-size: 22%;
background-color: #111111;
}

But it seems that is not rendering anything.

Anyone can see any big errors I'm doing?

Thanks

2

This is what I get with that code

image
image758×275 14.4 KB

1 Like
3

Yes , thatone is not my code though, thatone is the one for reference (that works), the one I want to use is the nextone chunk

4

Putting this in an svg widget produces something a bit closer!

<g id="knobLed" style="stroke: black;fill-rule: evenodd; fill: green; stroke-width: 1px;">
<path d="M10 70 Q25 52 20 30 Q50 38 80 30 Q75 52 90 70 Q50 78 10 70"></path>
</g>

image

1 Like
5

If I remember correctly, some characters ("#" at least) don't work in svg css backgrounds. The most simple way to solve this is to simply save your svg file next to your session file and call it by its name:

bacground-image: url(filename.svg);
1 Like
6

I have found it, so the syntax to embed any in open-stage-control must be not defined within a so must be "explicitely" defined and used (without using for it)
Meaning if you draw in a canvas and you get something like this (what I had initially)

        <svg viewBox= "0 0 100 100" xmlns="http://www.w3.org/2000/svg">
            <title>virtual-launchcontrolxl knobLed</title>
        <defs>
            <g id="knobLed" style="stroke: black;fill-rule: evenodd; fill: green; stroke-width: 1px;">
                <path d="M10 70 Q25 52 20 30 Q50 38 80 30 Q75 52 90 70 Q50 78 10 70"></path>
            </g>
        </defs>
        <use xlink:href="#knobLed" x="0" y="0"></use>
       </svg>

You must get rid of those <defs> and <use> getting something like

        <svg viewBox= "0 0 100 100" xmlns="http://www.w3.org/2000/svg">
            <title>virtual-launchcontrolxl knobLed</title>
            <g id="knobLed" style="stroke: black;fill-rule: evenodd; fill: green; stroke-width: 1px;">
                <path d="M10 70 Q25 52 20 30 Q50 38 80 30 Q75 52 90 70 Q50 78 10 70"></path>
            </g>
       </svg>

Then all of this you need to write it in-line with the following syntax in the css property of open-stage-control

:host {
background: url('data:image/svg+xml;utf8,HERE YOU PLACE ALL YOUR INLINE SVG DEFINITION')
}

Getting something like

:host {
background: url('data:image/svg+xml;utf8,<svg viewBox= "0 0 100 100" xmlns="http://www.w3.org/2000/svg"><title>virtual-launchcontrolxl knobLed</title><g id="knobLed" style="stroke: black;fill-rule: evenodd; fill: green; stroke-width: 1px;"><path d="M10 70 Q25 52 20 30 Q50 38 80 30 Q75 52 90 70 Q50 78 10 70"></path></g></svg>') 
}

You need to add some corrections such as no-repeat for the background image (so you don't get it shown more than once) also adapting the size of the actual shape displayed with background-size property .
For me the ideal results for this 100, 100 viewBox were the following.

:host {
background: url('data:image/svg+xml;utf8,<svg viewBox= "0 0 100 100" xmlns="http://www.w3.org/2000/svg"><title>virtual-launchcontrolxl knobLed</title><g id="knobLed" style="stroke: black;fill-rule: evenodd; fill: green; stroke-width: 1px;"><path d="M10 70 Q25 52 20 30 Q50 38 80 30 Q75 52 90 70 Q50 78 10 70"></path></g></svg>') 
no-repeat 50% 55%;
background-size: 120%;
}