読者です 読者をやめる 読者になる 読者になる

職業プログラマの休日出勤

職業プログラマによる日曜自宅プログラミングや思考実験の成果たち。リアル休日出勤が発生すると更新が滞りがちになる。記事の内容は個人の意見であり、所属している(いた)組織の意見ではない。

SVGPathNormalizer

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 Path の処理でお困りの皆さん、使ってみて下さい。
もちろんバグ報告等も歓迎です。