I have tried to find a proper SVG library for modern browsers. My goal is to decide, what library is suitable for creating simple online SVG editor with eg. text and path editing and clipping text with paths.

I found two libraries, which may be suitable: **Snap.svg** and **Svg.js**.

----
&lt;b&gt;SNAP.SVG&lt;/b&gt;

Github: https://github.com/adobe-webplatform/Snap.svg  
Source code lines: 6925
Github Stars: 3445  
Doc: http://snapsvg.io/docs/  
Getting started: http://snapsvg.io/start/  
Starter example ([JSBIN][1])

    var draw = Snap(800, 600);

    // create image
    var image = draw.image(&#39;/images/shade.jpg&#39;, 
                           0, -150, 600, 600);

    // create text
    var text = draw.text(0,120, &#39;SNAP.SVG&#39;);
  
    text.attr({
      fontFamily: &#39;Source Sans Pro&#39;,
      fontSize: 120,
      textAnchor: &#39;left&#39;
    });

    // clip image with text
    image.attr(&#39;clip-path&#39;, text);

----
&lt;b&gt;SVG.JS&lt;/b&gt;

Github: https://github.com/svgdotjs/svg.js  
Source code lines: 3604
Github Stars: 1905  
Doc: https://svgdotjs.github.io/

Starter example ([JSBIN][2]):


    var draw = SVG(&#39;drawing&#39;);

    // create image
    var image = draw.image(&#39;/images/shade.jpg&#39;);
    image.size(600, 600).y(-150);

    // create text
    var text = draw.text(&#39;SVG.JS&#39;).move(300, 0);
    text.font({
      family: &#39;Source Sans Pro&#39;,
      size: 180,
      anchor: &#39;middle&#39;,
      leading: &#39;1em&#39;
    });

    // clip image with text
    image.clipWith(text);

---

Usage seems to be rather similar.

What are the main differences between these two libraries?

  [1]: http://jsbin.com/yunen/1/edit
  [2]: http://jsbin.com/yahel/1/edit

All snap.svg Solutions on Gang of Coders

Total of 1 snap.svg Solutions

Snap.svg vs Svg.js