Are there any online tools to test SVG paths?

Question

I'm building an application that uses SVG paths, and I'd like to be able to see my paths rendered. Is there a site, say something like JSFiddle, on which you can paste in an SVG path, get it validated, and see it rendered?

EDIT: I've found that JSFiddle works fairly well for this, by selecting Raphael.js, svg.js, etc as a framework. e.g. http://jsfiddle.net/DFhUF/1393/

var paper = Raphael(0, 0, 300, 500);  paper.path("M75,75 m-50,0 a50,50 0 1,0 100,0 a50,50 0 1,0 -100,0") .attr({stroke: "#808", opacity: 1, "stroke-width" : 6})  paper.path("M75,225 m-40,-50 h80, a10,10 0 0,1 10,10 v80 a10,10 0 0,1 -10,10 h-80 a10,10 0 0,1 -10,-10 v-80 a10,10 0 0,1 10,-10") .attr({stroke: "#808", opacity: 1, "stroke-width" : 6}) 

That's probably good enough for my needs, but it would be nice to know if there are other tools to help test and debug editing of SVG Paths.

Answer 1

If you just want to quickly try out some SVG in your browser and not mess around with saving and loading files, jsFiddle is a great option.

Just use the following code as a template:

<svg xmlns="http://www.w3.org/2000/svg">     <path d="your path data here"></path> </svg> 

I created a sample to work from here.

jsFiddle also supports frameworks such as D3, PaperJs and Raphael from a dropdown on the left-hand side.