F.A.Q.

Extra information: style tags in SVG icons

Related products: Universal GUI

In release 2023.1.16, we have fixed some issues involving SVG images. 

To enable these fixes, two changes for SVG icons were necessary. These changes have been applied to model icons and icons uploaded by users with an upload control.

  • Style tags were stripped from uploaded SVGs. These tags allowed insertion of random CSS on the web page. If you still need CSS styles, most SVG editors default export SVGs with a style="" attribute instead of a style tag. Attributes are still supported.
  • Larger SVGs were resized to fit Image elements.

The icons are probably cached by your browser, so the changes will only be visible after you have cleared the cache or added new icons.

We recommend that you validate in the Software Factory- and end product database if you are using icons with style tags in your project. For example, with a query like this one, that searches for the `<style>` tag:

select distinct * 

   ,cast(icon_data as VARCHAR(max))

 from icon 

where right(icon, 4) = '.svg'

 and cast(icon_data as VARCHAR(max)) like '%<style>%'

 --and branch_id = 'MAIN'

The resulting icons may not show up as expected after clearing the browser’s cache. To fix this, replace the <style> tag with inline styles in the SVG files:

  1. Open the SVG file in a text editor.
  2. Search for the <style> block and convert in into inline styles.

In the example below, the style from the `<style>` tag is applied to all elements in de SVG file containing the a style class. You can read more about different CSS selectors here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

 

SVG icon with inline style

We hope this gives you enough information to work around this problem.

Be the first to reply!