Hello,
I have this svg file.
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42.5 42.5"><defs><style>.cls-1 {fill: #6a7178;}</style></defs><g id="Group_560" data-name="Group 560"><path class="cls-1" d="M27.1,32.6h-14a.9.9,0,0,1-1-1V12.2a1,1,0,0,1,1-1h14a1,1,0,0,1,1,1v4.5a1,1,0,0,1-2,0V13.2h-12V30.6h12V22.4a1,1,0,0,1,2,0v9.2A.9.9,0,0,1,27.1,32.6Z"/><path class="cls-1" d="M33.7,20.2H22.6a.8.8,0,0,1-.8-.7.9.9,0,0,1,.8-.8H33.7a.8.8,0,0,1,.7.8A.7.7,0,0,1,33.7,20.2Z"/><path class="cls-1" d="M30.3,23.6c-.2,0-.4,0-.5-.2a.7.7,0,0,1,0-1L33.1,19a.9.9,0,0,1,1.1-.1.8.8,0,0,1,0,1.1l-3.4,3.4C30.7,23.6,30.5,23.6,30.3,23.6Z"/><path class="cls-1" d="M33.7,20.2a.7.7,0,0,1-.6-.2l-3.3-3.4a.8.8,0,0,1,0-1.1.7.7,0,0,1,1,0L34.2,19a.7.7,0,0,1,0,1A.6.6,0,0,1,33.7,20.2Z"/><path class="cls-1" d="M24.1,17.2H16.4a.9.9,0,0,1-1-1,1,1,0,0,1,1-1h7.7a1.1,1.1,0,0,1,1,1A1,1,0,0,1,24.1,17.2Z"/><path class="cls-1" d="M24.1,25.1H16.4a1,1,0,0,1-1-1,.9.9,0,0,1,1-1h7.7a1,1,0,0,1,1,1A1.1,1.1,0,0,1,24.1,25.1Z"/><path class="cls-1" d="M24.1,28.9H16.4a1,1,0,0,1-1-1,.9.9,0,0,1,1-1h7.7a1,1,0,0,1,1,1A1.1,1.1,0,0,1,24.1,28.9Z"/></g></svg>
This looks like:
I want this icon in my navigation bar without importing it to the "images" folder in outsystems?
The icons already there are not svg and belong to outsystems itself
Does anyone have any advice on how i should be doing this?
Daan v wrote:
I'm working on a reactive web app. I can't set the expression Escape content to: "No", do you have an alternative or a fix?
Hey, I thought that you are working on Traditional Web App. I tried with the different approach I hope it will solve your problem in the reactive web app. please refer to the oml
https://akashdeep-mishra.outsystemscloud.com/Test/RequestManagement?_ts=637363894312820889
Hi Daan v,
You need to add first <?xml version="1.0" encoding="UTF-8"?> in the beginning of the file so OutSystems can consume it.
You can then add it to Images like on the picture below and drag it to the screen:
Hope it helps.
Best regards,
João Marques
João Marques wrote:
Okay but where do i put the svg file or the svg code?
regards,
Daan
Hi Daan,
You created a text file on your computer with <?xml version="1.0" encoding="UTF-8"?> before the actual SVG and save it, for example "myimage.svg".
And then you can upload it on Service Studio and then use it like any other image.
Cheers,
You can use Expression and set it's property to No then paste the given given code in the expression:
"<svg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42.5 42.5'>
<defs>
<style>
.cls-1 {
fill: #6a7178;
}
</style>
</defs>
<g id='Group_560' data-name='Group 560'>
<path class='cls-1' d='M27.1,32.6h-14a.9.9,0,0,1-1-1V12.2a1,1,0,0,1,1-1h14a1,1,0,0,1,1,1v4.5a1,1,0,0,1-2,0V13.2h-12V30.6h12V22.4a1,1,0,0,1,2,0v9.2A.9.9,0,0,1,27.1,32.6Z' />
<path class='cls-1' d='M33.7,20.2H22.6a.8.8,0,0,1-.8-.7.9.9,0,0,1,.8-.8H33.7a.8.8,0,0,1,.7.8A.7.7,0,0,1,33.7,20.2Z' />
<path class='cls-1' d='M30.3,23.6c-.2,0-.4,0-.5-.2a.7.7,0,0,1,0-1L33.1,19a.9.9,0,0,1,1.1-.1.8.8,0,0,1,0,1.1l-3.4,3.4C30.7,23.6,30.5,23.6,30.3,23.6Z' />
<path class='cls-1' d='M33.7,20.2a.7.7,0,0,1-.6-.2l-3.3-3.4a.8.8,0,0,1,0-1.1.7.7,0,0,1,1,0L34.2,19a.7.7,0,0,1,0,1A.6.6,0,0,1,33.7,20.2Z' />
<path class='cls-1' d='M24.1,17.2H16.4a.9.9,0,0,1-1-1,1,1,0,0,1,1-1h7.7a1.1,1.1,0,0,1,1,1A1,1,0,0,1,24.1,17.2Z' />
<path class='cls-1' d='M24.1,25.1H16.4a1,1,0,0,1-1-1,.9.9,0,0,1,1-1h7.7a1,1,0,0,1,1,1A1.1,1.1,0,0,1,24.1,25.1Z' />
<path class='cls-1' d='M24.1,28.9H16.4a1,1,0,0,1-1-1,.9.9,0,0,1,1-1h7.7a1,1,0,0,1,1,1A1.1,1.1,0,0,1,24.1,28.9Z' />
</g>
</svg>
"
That is not what i'm looking for. I want to be able to assign diffrent css classes this way i can edit "fill" and "background-color" and add on hover.
Add the below SVG in expression with escape content no:
<g id='Group_560' class='cls-1' data-name='Group 560'>
<path d='M27.1,32.6h-14a.9.9,0,0,1-1-1V12.2a1,1,0,0,1,1-1h14a1,1,0,0,1,1,1v4.5a1,1,0,0,1-2,0V13.2h-12V30.6h12V22.4a1,1,0,0,1,2,0v9.2A.9.9,0,0,1,27.1,32.6Z' />
<path d='M33.7,20.2H22.6a.8.8,0,0,1-.8-.7.9.9,0,0,1,.8-.8H33.7a.8.8,0,0,1,.7.8A.7.7,0,0,1,33.7,20.2Z' />
<path d='M30.3,23.6c-.2,0-.4,0-.5-.2a.7.7,0,0,1,0-1L33.1,19a.9.9,0,0,1,1.1-.1.8.8,0,0,1,0,1.1l-3.4,3.4C30.7,23.6,30.5,23.6,30.3,23.6Z' />
<path d='M33.7,20.2a.7.7,0,0,1-.6-.2l-3.3-3.4a.8.8,0,0,1,0-1.1.7.7,0,0,1,1,0L34.2,19a.7.7,0,0,1,0,1A.6.6,0,0,1,33.7,20.2Z' />
<path d='M24.1,17.2H16.4a.9.9,0,0,1-1-1,1,1,0,0,1,1-1h7.7a1.1,1.1,0,0,1,1,1A1,1,0,0,1,24.1,17.2Z' />
<path d='M24.1,25.1H16.4a1,1,0,0,1-1-1,.9.9,0,0,1,1-1h7.7a1,1,0,0,1,1,1A1.1,1.1,0,0,1,24.1,25.1Z' />
<path d='M24.1,28.9H16.4a1,1,0,0,1-1-1,.9.9,0,0,1,1-1h7.7a1,1,0,0,1,1,1A1.1,1.1,0,0,1,24.1,28.9Z' />
and add the below CSS at screen level:
I'm working on a reactive web app. I can't set the exspression Escape content to: "No", do you have an alternative or a fix?
That works, thank you!