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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

DiagramComponent's nodeDefaults for SVG/NativeModel ignored in firefox

Thread ID:





148545 Oct 24,2019 10:06 AM UTC Nov 6,2019 04:21 AM UTC Angular - EJ 2 8
Tags: Diagram
Asked On October 24, 2019 10:09 AM UTC

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.


    Shyam G [Syncfusion]
    Replied On 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 

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


    Shyam G [Syncfusion]
    Replied On 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 

    Replied On 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.



    Replied On 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:

    Shyam G [Syncfusion]
    Replied On 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 

    Replied On November 5, 2019 01:50 PM UTC

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

    Shyam G [Syncfusion]
    Replied On November 6, 2019 04:21 AM UTC

    HI Mithun, 
    Thanks for your update. 
    Shyam G 


    This post will be permanently deleted. Are you sure you want to continue?

    Sorry, An error occured while processing your request. Please try again later.

    Please sign in to access our forum

    This page will automatically be redirected to the sign-in page in 10 seconds.

    Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

    Live Chat Icon For mobile
    Live Chat Icon