SVG Clip Path Coordinate Converter

Convert from absolute to relative path coordinates

Basic usage

You need to have an SVG file something like the following. Note that it has a clipPath element within it. You can either copy and paste this svg into the editor pane or load it with the 'choose file' button.

You also need to set parameters. Two of the parameters, width and height, are required, whilst the other two, x and y are optional. The default for x and y are zero if not specified. As the names suggest, width and height describe the dimensions of the clippath. These generally should, but don't have to, be the same as the width and height parameters of the viewbox attribute if it exists within the SVG. If it doesn't exist, you need to make some values up that make sense. For example, these might be the maximum x coordinate that is used anywhere in the clippath for the width, and the maximum y coordinate that appears anywhere in the clippath for the height.

The x coordinate is the x offset for the path. If you give it a positive value, the clip path will be shifted that amount to the left. The y coordinate is the y offset for the path. A positive value shifts the clip path upwards. These value correspond to the minX and minY parameters to viewbox, but again, they don't have to be the same.