Usage of Snap.parse and Snap.fragment - Google Groups

23 Jun.,2025

 

Usage of Snap.parse and Snap.fragment - Google Groups

Hi all,I am trying to display an SVG string, (passed via function argument). The idea is to get a string, which is a valid SVG, make it a fragment and append to an element. My function is as follows:function load_fragment(svg_frag){                                              
    console
.log("Inside load_fragment");var s =Snap("#svg");                                                      
    console
.log("Going to append fragment");//var f = Snap.fragment(svg_frag);                                          var f =Snap.parse(svg_frag);                                              
    s
.append(f)                                                                
    console
.log("Fragment appended");}
The HTML fragment referred is as follows:id="svg"width="400"height="400">

SVG string (svg_frag) is:
My expectation is that after load_fragment runs, I should be able to see a blue rectangle, but the HTML shows the following:All three debug messages are printed in javascript console, and thus the function is indeed  getting executed. Inside load_fragment
Going to append fragmentFragment appended If I use Snap.load() instead of Snap.fragment() or Snap.parse() the code works as a charm: function load_svg(svg_frag){var s =Snap("#svg");Snap.load("test.svg",function(f){                                      
        s
.append(f);});}

and contents of the  test.svg is same as the svg_frag string.When the load_svg function runs, the contents of the HTML is as follows:Obviously Snap.load() correctly loads the SVG and places it as SVG elements, while Snap.fragment() and Snap.parse() places the SVG as escaped string.I am not sure if I am using Snap.fragment() and Snap.parse() correctly or if there is any thing I am missing here. So my question is How can I display an SVG string using Snap?thanks and regards,raj 

File:SNA segment.png - Wikipedia

This screenshot either does not contain copyright-eligible parts or visuals of copyrighted software, or the author has released it under a free license (which should be indicated beneath this notice), and as such follows the licensing guidelines for screenshots of Wikimedia Commons. You may use it freely according to its particular license. Free software license:

If you are looking for more details, kindly visit our website.

SINAVA contains other products and information you need, so please check it out.

Note: if the screenshot shows any work that is not a direct result of the program code itself, such as a text or graphics that are not part of the program, the license for that work must be indicated separately.

Are you interested in learning more about Sna-Svg? Contact us today to secure an expert consultation!