9

In short, I want to do the exact opposite of this question:
Is it possible to "invert" an SVG file? Not the colours, but the actual areas/paths?.

I have a monochrome SVG image that is a solid-color square with a transparent section cut out of it. It's not my work, so I don't have the original source data for this image.

I do not have (and cannot afford) Adobe Illustrator or any other paid graphical editing software, so either Inkscape or some other free SVG editing program will have to be used.

I need the existing paths of this SVG image to be "inverted" so that the transparent areas are filled, and the colored areas are turned transparent (or removed entirely).

I am aware that the most common method of doing this involves masks, but I need this SVG image to be easy for someone else (who isn't a graphic designer) to edit later. Unless there is a way to merge the visual effect of a mask into the paths themselves, I am therefore stuck avoiding masks like the plague.

So: is there a way to invert the fill areas of an SVG file without using masks, and if so, can someone give me step-by-step instructions on how to do so?

Thank you.

Improve this question
2
  • 1
    Inkscape is free. So is notepad and any number of text editors (SVG is just text).
    – joojaa
    Commented Jan 30, 2017 at 19:26
  • As this question stands, I think this question is too broad for our Q&A format as there are several different ways depending on the SVG and your preference. If you can edit your question to include the SVG that you're trying to change as well the method in which you want to change it (via code/text or in an image editor) I think it'd be on topic
    – Zach Saucier
    Commented Jan 30, 2017 at 22:24

2 Answers 2

Reset to default
12

SVG is just an XML file so you can edit it in any text editor.

If all you have is a solid shape with transparent areas cut out of it then it is probably a single compound path.

Take this for example:

enter image description here

The SVG code for that looks like:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="400px" height="400px" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">
    <path d="M4,5v391h391V5H4z M291.703,327.4L199.5,260.414l-92.204,66.991l35.219-108.403L50.312,152h113.97L199.5,43.608L234.719,152h113.97l-92.204,67.003L291.703,327.4z"/>
</svg>

The important part here is the d attribute of the path, which actually contains the drawing commands for all the paths in the compound path. A z indicates the end of a path so from that alone we can easily work out which parts are distinct paths.

Your background rectangle should be the first path (not necessarily, but as long as you don't have too many paths it should be easy enough to find with some trial and error or by looking at the coordinates of the path commands).

So delete everything from the first M to the first z:

<path d="M4,5v391h391V5H4z M291.703,327.4L199.5,260.414l-92.204,66.991l35.219-108.403L50.312,152h113.97L199.5,43.608L234.719,152h113.97l-92.204,67.003L291.703,327.4z"/>
         ^^^^^^^^^^^^^^^^^

Which gives us this:

enter image description here

I assume you could also just open the SVG in Inkscape and delete the surrounding path.

Improve this answer
1
2

If you select the image in Inkscape and choose "Path->Break Apart" it will "separate" the background from the transparent area.

The transparent areas will then appear as solid objects - just move the background object out of the way to see the newly created objects.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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