Skip to main content

Database field (VARBINARY) with SVG image, how to show in Universal

Hi Freddy,

Database stored images have two parts; the Name column and the Data column. When trying to show an icon/image in the GUI, both columns are required to be filled.

The name column can be any name. The data column has to be the <svg> code converted to varbinary and saved inside the [icon]_data field

Below an example that I made work in the Software Factory using a Table icon:

declare @project_id project_id = 'TEST_MJ', @project_vrs_id project_vrs_id = '2.20', @tab_id tab_id = 'customer'  

declare @icon varbinary(max),
@svg varchar(max) = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path d="M 15.861328 2.0117188 C 15.581328 2.0537187 8.9980469 3.089 8.9980469 7.5 C 8.9980469 8.987 9.2701563 9.9689688 9.5351562 10.917969 C 9.7731562 11.775969 10 12.586781 10 13.800781 C 10 16.874781 4.0062656 19.348969 1.6972656 20.042969 L 2.2714844 21.957031 C 3.2664844 21.659031 12 18.897781 12 13.800781 C 12 12.314781 11.727891 11.332813 11.462891 10.382812 C 11.223891 9.5248125 10.998047 8.714 10.998047 7.5 C 10.998047 5.011 15.49875 4.108 16.09375 4 L 16.376953 4 C 15.587953 4.857 15.009766 6.007 15.009766 7.5 C 15.009766 9.134 16.06875 10.493594 17.09375 11.808594 C 18.08175 13.076594 19.015625 14.272609 19.015625 15.599609 C 19.015625 18.984609 16.713234 20.037078 16.615234 20.080078 L 17.394531 21.923828 C 17.542531 21.861828 21.015625 20.356609 21.015625 15.599609 C 21.015625 13.585609 19.770875 11.988125 18.671875 10.578125 C 17.816875 9.481125 17.009766 8.446 17.009766 7.5 C 17.009766 4.759 20.106375 4.0055625 20.234375 3.9765625 L 19.796875 2.0253906 C 19.764875 2.0323906 15.861328 2.0117187 15.861328 2.0117188 z M 21 4 C 20 4 19 5.895 19 7 C 19 7.738 19.405 8.3756562 20 8.7226562 L 20 11 L 22 11 L 22 8.7226562 C 22.595 8.3756562 23 7.738 23 7 C 23 5.895 22 4 21 4 z M 4 9 C 2.168 9 1 11.626 1 13 C 1 14.302 1.839 15.402406 3 15.816406 L 3 18 L 5 18 L 5 15.816406 C 6.161 15.402406 7 14.302 7 13 C 7 11.626 5.832 9 4 9 z M 3.9628906 10.996094 C 4.2978906 11.099094 5 12.259 5 13 C 5 13.551 4.551 14 4 14 C 3.449 14 3 13.551 3 13 C 3 12.259 3.7038906 11.099094 3.9628906 10.996094 z"/></svg>'

select @icon = convert(varbinary(max), @svg) -- This is the core, converting the SVG to varbinary

update tab
set icon = 'icons8-path.svg'
, icon_data = @icon
where project_id = @project_id
and project_vrs_id = @project_vrs_id
and tab_id = @tab_id

Hope this gives you an idea 😄


The icon name did the trick.