or the svgpathbeg polyfill, and call SVGPathSegPolyfill.install() if required."}}]}]}

liabru/matter-js · error

Svg.pathToVertices: SVGPathSeg not defined, a polyfill is re

Error message

Svg.pathToVertices: SVGPathSeg not defined, a polyfill is required.

What it means

Svg.pathToVertices converts an SVG path element into Matter vertices by reading path segments via the SVGPathSeg API. In browsers where window exists but SVGPathSeg is not defined (browsers that removed the deprecated API, e.g. Chrome 48+), the function cannot iterate segments correctly and this warning is emitted.

Source

Thrown at src/geometry/Svg.js:33

var Bounds = require('../geometry/Bounds');
var Common = require('../core/Common');

(function() {

    /**
     * Converts an SVG path into an array of vector points.
     * If the input path forms a concave shape, you must decompose the result into convex parts before use.
     * See `Bodies.fromVertices` which provides support for this.
     * Note that this function is not guaranteed to support complex paths (such as those with holes).
     * You must load the `pathseg.js` polyfill on newer browsers.
     * @method pathToVertices
     * @param {SVGPathElement} path
     * @param {Number} [sampleLength=15]
     * @return {Vector[]} points
     */
    Svg.pathToVertices = function(path, sampleLength) {
        if (typeof window !== 'undefined' && !('SVGPathSeg' in window)) {
            Common.warn('Svg.pathToVertices: SVGPathSeg not defined, a polyfill is required.');
        }

        // https://github.com/wout/svg.topoly.js/blob/master/svg.topoly.js
        var i, il, total, point, segment, segments, 
            segmentsQueue, lastSegment, 
            lastPoint, segmentIndex, points = [],
            lx, ly, length = 0, x = 0, y = 0;

        sampleLength = sampleLength || 15;

        var addPoint = function(px, py, pathSegType) {
            // all odd-numbered path types are relative except PATHSEG_CLOSEPATH (1)
            var isRelative = pathSegType % 2 === 1 && pathSegType > 1;

            // when the last point doesn't equal the current point add the current point
            if (!lastPoint || px != lastPoint.x || py != lastPoint.y) {
                if (lastPoint && isRelative) {
                    lx = lastPoint.x;

View on GitHub (pinned to acb99b6f87)

Solutions

  1. Include the SVGPathSeg polyfill before use: <script src='https://cdn.jsdelivr.net/npm/svg-path-polyfill@latest'></script> or the svgpathbeg polyfill, and call SVGPathSegPolyfill.install() if required.
  2. Convert the path to polygon points yourself with a library like svg-path-parser/d3 and pass the points to Matter.Bodies.fromVertices.
  3. Use Matter.Bodies.rectangle/circle primitives instead of parsing SVG paths.

Example fix

// before
<script src='matter.js'></script>
// after
<script src='svg-path-polyfill.min.js'></script>
<script>SVGPathSegPolyfill.install();</script>
<script src='matter.js'></script>
Defensive patterns

Strategy: fallback

Validate before calling

if (typeof window !== 'undefined' && !('SVGPathSeg' in window)) {
  // load svg-path-polyfill before calling Svg.pathToVertices
  await loadScript('svg-path-polyfill.min.js');
}

Type guard

function svgPathSegAvailable() {
  return typeof window === 'undefined' || 'SVGPathSeg' in window;
}

Try / catch

try {
  vertices = Matter.Svg.pathToVertices(pathEl);
} catch (e) {
  vertices = fallbackPathToVertices(pathEl); // e.g. getTotalLength/getPointAtLength sampler
}

Prevention

When it happens

Trigger: Calling Matter.Svg.pathToVertices(pathElement) in a modern browser without 'SVGPathSeg' in window — typically newer Chrome/Edge where the SVGPathSeg interface was removed, when no polyfill (svgpathbeg or svg-path-polyfill) has been loaded.

Common situations: Rendering SVG bodies via Matter.Render with render.options.wireframes or the Svg renderer in modern browsers; upgrading an old demo from 2015-era browsers to Chrome 60+; using pathToVertices directly on an inline SVG path.

AI-assisted analysis of liabru/matter-js@acb99b6f87 (2026-09-02). Data as JSON: /api/errors/e01353ccf7a83c24. Report an issue: GitHub.