We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

DiagramComponent's nodeDefaults for SVG/NativeModel ignored in firefox

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.


    8 Replies

    SG Shyam G Syncfusion Team October 25, 2019 06:56 AM UTC

    Hi Mithun, 
    We have modified your sample by removing SVG tag in the sample to resolve your issue. 
    Shyam G 

    MI Mithun October 27, 2019 01:25 AM UTC

    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).


    SG Shyam G Syncfusion Team October 28, 2019 09:50 AM UTC

    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. 
    Shyam G 

    MI Mithun October 31, 2019 02:05 PM UTC

    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.



    MI Mithun October 31, 2019 03:29 PM UTC

    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:

    SG Shyam G Syncfusion Team November 4, 2019 07:32 AM UTC

    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 ''; 
       str = str.toString(); 
      return str.replace(/(<svg|<\svg>)([^<]*|[^>]*)/g, '<g>');  

    Shyam G 

    MI Mithun November 5, 2019 01:50 PM UTC

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

    SG Shyam G Syncfusion Team November 6, 2019 04:21 AM UTC

    HI Mithun, 
    Thanks for your update. 
    Shyam G 

    Live Chat Icon For mobile
    Up arrow icon