DiagramComponent's nodeDefaults for SVG/NativeModel ignored in firefox

[Mithun]

Hello SyncFusion Team,

I'm using the @syncfusion/ej2-angular-diagrams control in my Angular app.

I'm using [nodeDefaults] to ensure that my loaded SVG/NativeModel nodes have a 50px x 50px size.

This works fine on chrome, edge etc. However firefox seems to ignore [nodeDefaults].

Is this a known issue? Any workarounds? 

PS: I have set up a stackblitz repro: https://stackblitz.com/edit/diagram-firefox. You can launch it in chrome & firefox to see the difference.

	chrome	firefox

[Shyam G]

Hi Mithun, 

 

We have modified your sample by removing SVG tag in the sample to resolve your issue. 

 

Sample: https://stackblitz.com/edit/diagram-firefox-ybnkkr?file=src/app/app.component.ts 

 

Regards, 

Shyam G 

[Mithun]

Thank you. 

Is there a recommended linter/validator for SVG files? Preferably something that be run on the command line (i.e. part of the build process).

Thanks,

Mithun

[Shyam G]

Hi Mithun, 

 

You do not need the SVG linter / validator to validate your SVG. The SVG tag can be removed in your SVG alone. If you are facing any problems in SVG, you can share them with us so we can solve them. Also, please refer to the reference below if you need to validate the SVG. 

 

Link: https://validator.w3.org/#validate_by_input 

 

Regards, 

Shyam G 

[Mithun]

So removal of the <svg> tags poses another problem for us.

The same SVG file is being loaded elsewhere in our app using <img src="path to svg file"> (which uses content-type: image/svg+xml). This stops working if we remove the <svg> tags.

Directly embedding the SVG inline in HTML is also not an option for us (long story: the SVG content becomes available to the app long after the page has been rendered). 

Any suggested workarounds?

We'd like to reuse the same SVGs in both scenarios:

1. on the diagram control (as NativeModel)
2. in <img src=""> tags.

Thanks,

Mithun

[Mithun]

ok. I have a 'non-ideal' workaround for this issue. 

I'm now using the <svg> inline in html, by using the [innerHTML] property. I'm however forced to bypass Angular's HTML sanitization and security context by using DOMSanitizer module as follows:

• https://blog.fullstacktraining.com/binding-html-with-angular/
• https://angular.io/guide/security#sanitization-and-security-contexts

Hoping that there is a better workaround for this.

[Shyam G]

Hi Mithun,

We have created a sample in which we have provided method(removeSvgTag) to remove SVG tag. So, you can use this method only when you are rendering our native node. Please refer to a code example and modified sample below. 

Code example: 

public removeSvgTag(str) 

{ 

   if ((str===null) || (str==='')) 

       return ''; 

  else 

   str = str.toString(); 

  return str.replace(/(<svg|<\svg>)([^<]*|[^>]*)/g, '<g>');  

} 

Sample: https://stackblitz.com/edit/diagram-firefox-hatdzk?file=src/app/app.component.ts 

Regards, 

Shyam G 

[Mithun]

Thanks. This looks like a good solution. Trying it out now.

[Shyam G]

HI Mithun, 

Thanks for your update. 

Regards, 

Shyam G