Can we have a svg type node

Question

Hi there,I was playing with svg image in my app, but faced few problems which I've shared in my previous forums.I'm rendering svg type images in image type node, i was thinking that if we have a svg type node then it would be more helpful to maintain its aspect ratio, we can change its colors too.However I also tried native type node to render svg images. But I realized that native type node was working fine if svg has single tag. if there is an svg with more than one tag and different tags like it contains, g element, group g elements ore something else. then that native type node was unable to handle it. Also if svg width and height is 1000px. Native type node was able to render it but it was unable to handle resize it. also one svg colors were effecting other svgs. Does it make sense? can we have specific svg type node which can manage all scenarios or any other alternate?

Shyam G · Answer

Hi Ahman, 
 
Please use native node to render SVG element. Also you can use multiple tags in SVG template and it will be rendered properly with our native node. please refer to the playground link below. Still if you face any problems with the SVG template, please share us more details such as modify the below playground link or share us an SVG template. 
 
Playground link: http://jsplayground.syncfusion.com/rutgmk4j 
 
Regards, 
Shyam G

ahman · Answer

Hi there,ResponseQuery Please use native node to render SVG element. Also you can use multiple tags in SVG template and it will be rendered properly with our native node. please refer to the playground link below. Still if you face any problems with the SVG template, please share us more details such as modify the below playground link or share us an SVG template.  Playground link: http://jsplayground.syncfusion.com/rutgmk4j I've added my SVG images in playground:Playground link: http://jsplayground.syncfusion.com/rutgmk4j steps to produce issues:1. cut code from left panel, then paste it again. on right side, the behavior of SVG on right side will be different2. On right panel, copy and paste SVG, the behavior will be different.3. for 2 minutes play with the SVGS :) like drag and drop them, copy and paste them etc.Issues I noticed:1. SVG text color is effecting whole its area.2. I can't see text inside SVG, its just showing dark area3. If you copy paste SVG its size is increased until you click on itCan I achieve editable graphics thing? like if i upload any logo image or svg logo image but later on if i want change it's text inside the diagram, is it possible?don't wanna use diagram label feature.

Shyam G · Answer

Hi Ahman, 
 




Query 

Response 


I've added my SVG images in playground:Playground link: http://jsplayground.syncfusion.com/rutgmk4j steps to produce issues:1. cut code from left panel, then paste it again. on right side, the behavior of SVG on right side will be different. 


The diagram(right panel) in the playground link will be refreshed each time when you edit the code(left panel) in the playground link. 
So while editing the code, you would see the changes in diagram. sometimes your code changes will not reflected properly in the diagram. 
At that time, you need to refresh the playground link. could you please confirm us whether you are mentioning the changes which we have explained above points.
If we misunderstood your requirement, please provide us more details such as video to demonstrate the issue with playground link.


2. On right panel, copy and paste SVG, the behavior will be different. 

Could you please confirm whether an SVG node position, appearance changes while performing clipboard operation. Also please share us how the behavior differs in your sample with SVG node while performing clipboard operation. could you please share us more details such as video to demonstrate the behavior changes. 


3. for 2 minutes play with the SVGS :) like drag and drop them, copy and paste them etc.Issues I noticed:1. SVG text color is effecting whole its area.2. I can't see text inside SVG, its just showing dark area3. If you copy paste SVG its size is increased until you click on it. 

Could you please share your SVG template which you are using in the sample and video to demonstrate the issue. The playground link shared by you is the same which we shared to you in our earlier update. So please share your playground link  


Can I achieve editable graphics thing? like if i upload any logo image or svg logo image but later on if i want change it's text inside the diagram, is it possible?don't wanna use diagram label feature. 


We use native node to render any SVG template. 
We have created a sample in which we have rendered SVG template with text. Also we have a dropdown with values.
If you select the node and change the value in dropdown, the SVG text will be changed. We have updated SVG text by changing the SVG template id at runtime. Please refer to the playground link.
Could you please confirm us whether it satisfies your requirement? 
Also we don’t have image editing in our syncfusion controls.
 
Playground link: http://jsplayground.syncfusion.com/4voqav2r 
 
 
Regards, 
Shyam G

Response	Query
Please use native node to render SVG element. Also you can use multiple tags in SVG template and it will be rendered properly with our native node. please refer to the playground link below. Still if you face any problems with the SVG template, please share us more details such as modify the below playground link or share us an SVG template. Playground link: http://jsplayground.syncfusion.com/rutgmk4j	I've added my SVG images in playground: Playground link: http://jsplayground.syncfusion.com/rutgmk4j steps to produce issues: 1. cut code from left panel, then paste it again. on right side, the behavior of SVG on right side will be different 2. On right panel, copy and paste SVG, the behavior will be different. 3. for 2 minutes play with the SVGS :) like drag and drop them, copy and paste them etc. Issues I noticed: 1. SVG text color is effecting whole its area. 2. I can't see text inside SVG, its just showing dark area 3. If you copy paste SVG its size is increased until you click on it
	Can I achieve editable graphics thing? like if i upload any logo image or svg logo image but later on if i want change it's text inside the diagram, is it possible? don't wanna use diagram label feature.