Add native support to SVG images
900
Views
10
Comments
New
Frontend (App Interfaces)

Hi would like to suggest that we can have the ability to use native SVG's without the need to use InlineSVG component that is not low-code friendly and has a horrible preview inside the platform.


I think the OutSystems way of doing this would be when using the Image widget, if I select an SVG image, add a dropdown or boolean option to select if I want that image as an HTML img tag, or svg tag.


Inside the WYSIWYG preview, it can be just be displayed as an image, but when compiling then we would have the SVG code directly in the HTML and the Inline SVG component would not need to run JS to append the code manually.

I wish I had this option available in the past! You have my support!

great idea, encourage the usage of svg!

Please explain how this is different from the current way of using SVG's in OutSystems?

J.Ja

Hi Justin. That's easy to explain.

If you already used SVG's in OutSystems you currently have 2 options:

1. You can upload it to the images like a jpg or png, and if you want to use it, you can use the Image widget, but it's converted as an <img src="..." /> element.

2. Or you can copy the SVG markup from the file into a parameter of the InlineSVG block from OutSystems UI, and you put all the SVG in an expression.


If you want to really take advantage of using an SVG, you need the second option, but that's not OutSystems friendly, because:

- You won't have a preview inside the studio; 

- If you want to use the same SVG you need to copy/paste, if you need to change it sometime, you need to check for every place, and lose the advantage of having a reference in the platform to change it automatically;

- You will probably need to replace all " with ' before inserting the code in the Expression Editor in OutSystems

And basically, the Inline SVG needs to wait until the DOM is ready to use JS to append the SVG code in the HTML. That is a completely insane workaround. If you were doing the same with normal HTML you would never do that because it doesn't even make sense. If you use that block 50 times on one screen (for example, for special iconography) you will have 50 JS functions running to do something that could have been already there by default.


The idea is that you can do the second option (SVG markup) using the Image widget inside Service Studio. Removing all these issues and being easier to use.

Got it, thanks! Just checking before I did *another* incorrect merge. :D


J.Ja

Great idea

Just on the subject of the InlineSVG block, a small thing that might help: rather than copy-pasting the block if you need it more than once, you can place the block inside its own wrapper block and use that, so all instances pull from the same source. 


But yes, full SVG support would be awesome.

Hi Terry, I think you may have not understood what I was trying to explain.

I never talked about copy/pasting the "block", but rather copy/pasting the SVG markup code into the "block".

The only "block" that exists is the InlineSVG from OutSystems UI, so it's already the same source.

Cheers!

Ahh, right. Ignore me then :P

I face this problem every day. My design team exports icons as svgs (current best practice) and we have no good way of importing them into OutSystems (the two current options are very bad, as Alexandre explained).

Even adding it as a option in the HTML Element widget would be a huge help