I have some SVG images which contain clipPath elements. I am working in an environment that doesn't render clipPath elements. What tool or software can I use to apply the clipPath to the SVG geometry so that the output file is visually equivalent but contains no instances of clipPath?

  • Interesting question! Could you provide a simple svg for a MWE ? Jan 12 '17 at 19:38

There are a few ways you could do this using Inkscape.

The manual way

If you're only doing a few drawings, doing it by hand like this might be acceptable.

It is possible to manually convert paths that use a clip-path to a normal path in Inkscape by using one of Inkscape's path Boolean operations (division, union, etc).

  1. Select the object with the clip-path attribute.
    If you don't know what objects have a clip path, on the Edit menu, click XML Editor. When you select an object, if it has a clip path, you will see a value for clip-path. Press Ctrl + F to search that path id.
  2. On the Object menu, hover over Clip, and then click Release
  3. With the objects still selected on the Path menu, click Intersection.

This has several caveats:

  • It is manual and tedious work
  • It doesn't work if the clip path involves more than two paths. (The Multi-Bool extension may help, otherwise, you'd have to duplicate the clipPath so it can be used more than once)
  • Intersection may not have the expected effect for some clipping paths; you may need to duplicate the object and perform multiple path operations.

The PDF to SVG way

Don't have the patience to edit files by hand? You can use Inkscape like a proverbial axe. Clip those clip paths!

Inkscape can save in a few vector formats, but some formats will lose data. In this case, you can actually use this to your advantage.

  1. In Inkscape, save the SVG file that has clip paths as a PDF (Save as, then in the file type select PDF).
  2. Close Inkscape.
  3. Open the PDF in Inkscape.
  4. Save as SVG.

The drawing will be structurally changed (you might have different groups or what was previously a path with a stroke and fill might now be two paths). This changes will make the drawing more difficult to edit manually, but for the most part the drawing should still be OK (depending on what it was).

The automated way?

Inkscape has command line operations, but I don't know enough to say if they might help.

If you are looking to automate this, my approach would be to look for a program or library to convert to PDF, then convert the PDF back to SVG.

The cop-out way

Export to PNG using Inkscape or one of a few different programs that can render an SVG to a raster image. Sure, you gave up and took the lazy way out, but hey, it was quick!

  • Thank you immensely; manually editing the files in Inkscape worked perfectly for my use case. If the clipping path is a clone, it must be converted to a path following this answer for the Intersection operator to work. Also, the SVG -> PDF -> SVG approach occasionally preserved the clip-paths. Jan 13 '17 at 15:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.