icons not rendering properly on diagrams.net

[jaywarfield]

Package

@carbon/icons

Browser

Firefox

Operating System

MacOS

Package version

v11.4.0

React version

N/A

Automated testing tool and ruleset

diagrams.net

Assistive technology

N/A

Description

Need IBM icons in diagrams.net to match design center but some IBM icons in diagrams.net are stretched or unrecognizable which is the case for the slisor icon (being renamed to slicestor). diagrams.net will be a showcase for IBM icons on design center and this usability issue is focused on the slisor icon which if fixed might fix some of the other issues with IBM icons in diagrams.net. The slisor icon ends up correct in diagrams.net when the icon svg is taken from site1 but not when taken from site2. Therefore, is there something in site1 that can be considered for site2 so we can use site2 for scaling so many icons? Note that the IBM icons in diagrams.net are converted from multiple svg files to a single xml file by a required tool svg2xml so the single xml file is then used to efficiently render IBM icons in diagrams. We are also looking at whether svg2xml can be updated for other cases, but for this usability issue we would like your help to understand why an svg icon from site1 works. In this attachment the left icon shows how the slisor icon from site2 looks in diagrams.net, and the right icon is how the slisor icon from site1 looks in diagrams.net:

WCAG 2.1 Violation

N/A

Reproduction/example

The usability issue mentioned here is intended to look at the svg from site1 and site2 which is already explained in the description.

Steps to reproduce

Steps to reproduce in diagrams.net would take more explanation, but the usability issue mentioned here is intended to look at the svg from site1 and site2 which is already explained in the description.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[dakahn]

updated the title and removed the accessibility tag. this is a visual issue

[aledavila]

@carbon-design-system/design Hey guys can you verify this issue

[abbeyhrt]

Hey @jaywarfield Would you be able to provide more details about how you are using the icons in your project, like how they are being imported? On our end, both of the links site1 and site2, render correctly so we would need to know more about diagrams.net to understand why it is appearing incorrectly there.

[jaywarfield]

Hi, the icons in site1 and site2 render correctly as svg files, but diagrams.net requires the step of running the icons through their svg2xml tool in order to render icons in a diagrams.net diagram, in the description I describe some of that where the svg2xml tool (link is in description) accepts as input a directory of all of the svg icon files and outputs a single xml file. A single xml file is efficient for rendering the icons in a diagram created in diagrams.net. For some cases we may need to look at the svg2xml tool and I can go through the process for svg2xml or show the resulting xml file, but in this case a simpler route seems to be what is the difference between the svg source in site1 vs the svg source in site2 and can we consider doing similar in site2 since diagrams.net will be the showcase for all IBM icons in IBM diagrams created by product architects, solution architects, etc. Let me know if you have any questions. Thanks!

[cyberalien]

Difference in icons is in compressed paths. There are several things in paths that can be compressed, such as arc flags like 0 1 123 to 01123, which confuses old software.

On site with correctly working icon, paths are parsed to remove that unnecessary compression. It adds just few bytes, but allows icons to be used in old software.

Process of fixing icons can be easily automated. This is code for function that fixes paths: https://github.com/iconify/tools/blob/main/%40iconify/tools/src/optimise/flags.ts

[tay1orjones]

This is going to fall as a low priority for our team. If someone's interested in improving the icon source files to be more compatible with older software, we'd welcome a PR.

[jaywarfield]

Thanks for the update! We have recently put together a process that works flawlessly with svg2xml by using a 3rd party tool (Iconify) that "normalizes" (which @cyberalien mentioned earlier has to do with paths) the carbon icons and has an option to add an invisible rect to prevent icon distortion with svg2xml. Similar to the unoptimized icons in design center which have TransparentRectangle set in svg for development use which causes svg2xml to make a visible rectangle, but at least the optimized carbon icons have the TransparentRectangle removed. However, there are tools like svg2xml that ignore the viewBox settings in svg which causes icon distortion, fortunately the 3rd party tool has an option to add an invisible rect using standard svg syntax to prevent icon distortion with svg2xml. There is some risk relying on a 3rd party tool but the source code is open source and is reliable for many different icon sets besides just the carbon icons. The carbon icons could also potentially start out being normalized and maybe have an option to add an invisible rect for icon tools like svg2xml and other tools to work directly with carbon without using a 3rd party tool, but it sounds like that wouldn't work with older software. I realize it's a low priority but at least we have the 3rd party tool. Let's close out this issue and if a PR were opened we know what is needed to work with svg2xml and other icon tools. Thanks!