Home/ Questions/Q 8721611
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T07:14:58+00:00

I have tried to find a way to implement cross browser path normalizer. There

  • 0

I have tried to find a way to implement cross browser path normalizer. There IS a native way which is described here and functional example is here, but it works only in newest Opera (but not in IE, FF, Safari, Chrome).

The native way uses pathElm.normalizedPathSegList and it converts all relative coordinates to absolute ones and represents all path segment types as a following subset of types: M,L,C,z.

I have found only one javascript code and jsfiddled functional example of it, but it works only in IE and FF. Chrome gives “Uncaught Error: INDEX_SIZE_ERR: DOM Exception 1”. How this could be fixed to work also in Opera, Safari and Chrome or is there any other way for normalizing SVG paths?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    EDIT: I got the Raphaël bug fixed and made thorough testing with animated and non-animated complex paths, so I think it is wise to use Raphaël for path normalization. The explanation of bug and it’s fix is here: https://stackoverflow.com/a/13079377/1691517. The Raphaël’s path2curve function can easily convert all path commands (also A ie Arc) to normalized form (ie Cubic curves). It’s nice, that Cubics can represent all path commands!

    The other way is to use new Raphaël, where is an interesting function Raphael.path2curve(), which converts all path commands to Cubic curves, but it has some bug. The following image visualizes the bug:

    enter image description here

    The functional example is here and the code is as follows:

    <style>path {fill:none}</style>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<div id="res" style="width:800px"></div>
<div id="raphael"></div>

<script>
window.onload = function () {
var paper = Raphael("raphael", 400, 400);
var original_path = "M30 30 S40 23 23 42 L23,42 C113.333,113.333 136.667,113.333 150,80 t40,50 T230,240 q20 20 54 20 s40 23 23 42 t20,30 a20,30 0,0,1 -50,-50";
var arr=Raphael.path2curve(original_path);
var normalized_path = arr.toString();

var path1 = paper.path(normalized_path).attr({stroke: "red", "stroke-width":6});
var path2 = paper.path(original_path).attr({stroke: "black", "stroke-width":2});

document.getElementById("res").innerHTML="ORIGINAL PATH (black):<br>"+original_path+"<br><br>NORMALIZED PATH (red):<br>"+normalized_path;
}
</script>​

    It would be very nice to could make a path normalization in Raphaël, because it supports large amount of browsers and uses arrays instead of DOM path segments (= speed and backward compatibility). I made a bug report. Hope it is fixed in some future release.

    • 0