Add native support to SVG images


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.

Created on 27 May (2 weeks ago)
Comments (5)

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?


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