Home :: DOM :: Path Parser

  1. Introduction
  2. Reference
    1. Object Variables
    2. Methods
    3. Properties
  3. Use
    1. Loading Path Parser into Your SVG Document
    2. Associating a Path Parser Handler
  4. Examples
  5. Download


Path parser is an event driven path parsing engine which can be used for quick one type manipulations of SVG path elements. The parser will fire methods on an associated handler as each path command type is completely recognized by the parser.


Object Variables


This is a hash that associates the number of parameters a path command uses with the command's letter. This is used internally by the parser to make sure that the user has specified the correct number of parameters for a given command. Also, many commands may be repeated without repeating the command letter. The parameter count allows the parser to know how many of a group of numbers should be consumed for each command event.


This is a hash that associates a method name with a command letter. These are the method names that will fire in the Path Parser Handler, if they exist, as each command is recognized by the parser.


constructor - new PathParser();

This method is used to create a new Path Parser object. It does require any parameters.


This method parses the contents of the specified path's path data. This is really convenience method that gets the specified path's d attribute and passes the result to the parseData() method.


This method parses the specified path data. This is the main method that fires events on the associate path parser handler.


This method associates a path parser handler with the path parser.


_lexer is a private property of type PathLexer, which is responsible for tokenizing the path data

_handler is a private property that refers to the associated path parser handler.


Loading Path Parser into Your SVG document

In order to use a Path Parser in your SVG file, you will need to insert a <script> element inside of your <svg> element. As an example, if path_parser.js.gz is in the same directory as your SVG document, then you would include PathData with the following text:

<script xlink:href="path_parser.js.gz" />

Associating a Path Parser Handler

By itself, the Path Parser does nothing more than recognized the various commands types used with a path element's d attribute. This may be useful for determining if a path's path data is syntactically correct, but the real power of this object comes about when it is associated with a Path Parser Handler.

Any object can be a Path Parser Handler. As commands are recognized by the parser, an associated method for that command will be fired in the handler. If the handler does not define a method for a given path command, then the path parser continues without firing an event.

The method names that may be fired in the handler follow the names of the path commands as described in the SVG specification. Below is a list of methods that may be defined by a handler:

Each method will received the same number of parameters (numbers) as is needed when defining the command in a path element. In addition to these methods, the beginParse method will be fired before parsing intitiates giving the handler a chance to initialize any data structures needed during the parse.


The following example demonstrates the implementation of a simple handler:

testParser.svg - This sample parses two path's, one using absolute coordinates and one using relative coordinates. All path command types, except arc, are represented in this example.

testControlMaker.svg - This sample demonstrates a custom Path Parse Handler, ControlMaker, which builds a graphic representation of all control points and handles associated with a path. The first control is displayed in an alternate color to visually distinguish it from the other controls. Bezier curves display their handles using a line. Smooth Bezier curves have implied handles which are displayed with a ghosted effect. The control visualization will remain at constant size even when zooming.

testToCubic1.svg - This sample demonstrates the CubicNormalizer custom handler. This handler converts a path's path data so that all segments are cubic Beziers. All path commands except arc are supported.

boxArcSample.svg and dollarTriangleSample.svg - These samples demonstrate how CubicNormalizer can be used to prepare two paths so that their path data values can be animated from one to the other.


path_parser.js.gz - This file contains all JavaScript files needed to parse a path's path data

SampleHandler.js - This file shows a simple implementation of a Path Parser Handler. This could be used as a starting point for your own custom handlers.