SVGのPathには、SVGAnimatedPathData
インタフェースに normalizedPathSegList
プロパティが仕様で定められており、normalizedな(標準化された)SVG Pathデータを得られるようになっています。しかし、実際にはこのプロパティは実装されていないブラウザがほとんどで、プロパティを読みに行っても null
だったり undefined
だったりします。
何故でしょうか?
OSSな各ブラウザでの議論を追っかけるところまでは実はできていないのですが、実装をしていない理由の一つとして、このW3Cの仕様通りの標準化を行うと、曲線の「近似」が発生してしまうからではないか、というものが挙げられます。
冒頭のリンク先のW3Cの仕様によれば、標準化する際は SVG Path のあらゆる線を、線分と3次のベジェ曲線で表現することになっています。2次のベジェ曲線や楕円曲線も、3次のベジェ曲線で表現する訳です。
もちろん、それなりの精度で近似することは可能です。近似でも良いのであれば、次の Q&A は役に立つでしょう。Q&Aと言っても質問者と回答者が同一人物のようですが。
javascript - How to normalize SVG path data (cross browser)? - Stack Overflow
どうしても近似だと怖い環境において標準化したい場合は、W3Cの仕様よりも利用可能なコマンド(線の種類)を増やした形で標準化する必要があります。その行為を標準化と呼ぶのは相応しくないかもしれませんが、ここでは標準化と呼びます。
話が長くなってしまいましたが、ここで言うところの標準化を実現する、簡単なツールを作成して公開しました。
motooka/SVGPathNormalizer · GitHub
与えられた SVG Path を、次のコマンドだけを含むように「標準化」します。
- SVG_PATHSEG_MOVETO_ABS (M) : ペンの移動
- SVG_PATHSEG_LINETO_ABS (L) : 線分
- SVG_PATHSEG_CURVETO_CUBIC_ABS (C) : 三次のベジェ曲線
- SVG_PATHSEG_CURVETO_QUADRATIC_ABS (Q) : 二次のベジェ曲線
- SVG_PATHSEG_ARC_ABS (A) : 楕円曲線
- SVG_PATHSEG_CLOSEPATH (z) : 線を閉じるコマンド
SVG Path の処理でお困りの皆さん、使ってみて下さい。
もちろんバグ報告等も歓迎です。