: Manually invert path fill for SVG 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?.
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.
More posts by @Gretchen549
1 Comments
Sorted by latest first Latest Oldest Best
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:
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:
I assume you could also just open the SVG in Inkscape and delete the surrounding path.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.