Invert SVG image / Clip Path from Rectangle

Question

I'm trying to invert an SVG image so that the transparent background becomes a solid color, and the original solid path then becomes a transparent element. The effect I'm trying to achieve an effect very much like the icon on the right of this app bar:

I've tried to achieve this by creating a rectangle then using the original path as a clipPath, but I've not been able to make the SVG markup work for me yet.

Does anyone know a simple technique to achieve this effect? I'm trying to perform this effect on this SVG image - http://thenounproject.com/noun/tracking-location/#icon-No2108

Any help is greatly appreciated.

Update - trying mask:

Original image: (Tracking Location designed by Friedrich Santana from The Noun Project)

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
    <path fill="#000000" d="M83.652,10.501c-5.7-2.106-11.986,0.472-14.641,5.788L51.357,21.52c-0.75-0.498-1.561-0.927-2.439-1.252  c-6.113-2.258-12.901,0.868-15.16,6.981c-2.227,6.027,0.785,12.699,6.726,15.052l5.5,17.864c-0.239,0.433-0.456,0.883-0.644,1.354  l-19.675,5.883c-0.664-0.409-1.377-0.762-2.138-1.043c-6.114-2.258-12.901,0.867-15.161,6.979  C6.108,79.453,9.233,86.241,15.348,88.5c5.944,2.195,12.514-0.706,14.95-6.489l19.988-5.979c0.603,0.354,1.237,0.671,1.917,0.922  c6.113,2.259,12.9-0.867,15.16-6.979c2.259-6.113-0.866-12.902-6.98-15.16c-0.005-0.002-0.011-0.004-0.016-0.006l-5.383-17.475  c0.203-0.344,0.39-0.702,0.559-1.071l17.17-5.089c0.835,0.595,1.752,1.101,2.76,1.473c6.112,2.258,12.902-0.868,15.16-6.981  C92.893,19.548,89.766,12.759,83.652,10.501z" />
</svg>

Unsuccessful attempt at mask:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
    <mask id="maskicon">
        <path d="M83.652,10.501c-5.7-2.106-11.986,0.472-14.641,5.788L51.357,21.52c-0.75-0.498-1.561-0.927-2.439-1.252  c-6.113-2.258-12.901,0.868-15.16,6.981c-2.227,6.027,0.785,12.699,6.726,15.052l5.5,17.864c-0.239,0.433-0.456,0.883-0.644,1.354  l-19.675,5.883c-0.664-0.409-1.377-0.762-2.138-1.043c-6.114-2.258-12.901,0.867-15.161,6.979  C6.108,79.453,9.233,86.241,15.348,88.5c5.944,2.195,12.514-0.706,14.95-6.489l19.988-5.979c0.603,0.354,1.237,0.671,1.917,0.922  c6.113,2.259,12.9-0.867,15.16-6.979c2.259-6.113-0.866-12.902-6.98-15.16c-0.005-0.002-0.011-0.004-0.016-0.006l-5.383-17.475  c0.203-0.344,0.39-0.702,0.559-1.071l17.17-5.089c0.835,0.595,1.752,1.101,2.76,1.473c6.112,2.258,12.902-0.868,15.16-6.981  C92.893,19.548,89.766,12.759,83.652,10.501z"/>
    </mask>

    <rect mask="url(#maskicon)" x="0px" y="0px" width="100px" height="100px" fill="black"/>
</svg>

Being a noob with SVG's I'm sure I'm probably doing something quite simple wrong!

Answer 1

You can do this with svg filters, a similar (trace outline) example can be seen here.

Yet another alternative is using a mask, see e.g this w3c testcase for a simple example.

But if your shape is simple, then it's probably much better (performance-wise) to just keep the "other" shape around for easy switching (using e.g a display property toggle). Or perhaps using the stroke-width property and <use> for drawing the same shape two times (putting the fill on top of the stroked shape).

Answer 2

One of the things that can be used is a subpath to create a hole inside a path with the appropriate fill-rule.The path is the circle and the subpath is the icon which creates a hole the shape of the icon. Fill the path and the hole will still show the background. Create a separate icon with a fill and that will be used when you want an solid icon. See the free http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Paths and look for subpath and fill-rule. See https://stackoverflow.com/a/10477334 for a wonderful solution to using two arcs to create a circle because circles cannot have subpaths. Here is an example:

<?xml version="1.0" encoding="utf-8" ?>
<svg baseProfile="full" height="1000" version="1.1" width="900" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<g id="defs_sq_with_hole">
<path d="M 0,0 L 100,0 L 100,100 L 0,100 L 0,0 M 50,25 L 75,75 L 25,75 L 50,25 Z" />
</g>
<g id="defs_sq_no_hole">
<path d="M0,0 100,0 100,100 0,100 0,0" />
</g>
<g id="defs_triangle">
<polyline points="50,25 75,75 25,75 50,25" />
</g>
<g id="defs_arccircle_no_hole">
<path d=" M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0 " />
</g>
<g id="defs_arccircle_with_hole">
<path d=" M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0 M 100,75 L 125,125 L 75,125 L 100,75 Z" />
</g>
</defs>
<rect fill="green" height="100%" width="100%" x="0" y="0" />
<use fill="white" x="20" y="20" xlink:href="#defs_sq_with_hole" stroke="black" stroke-width="2" fill-rule="evenodd"/>
<use fill="none" x="200" y="20" xlink:href="#defs_sq_no_hole" stroke="black" stroke-width="2"/>
<use fill="black" x="200" y="20" xlink:href="#defs_triangle" />
<use fill="white" x="20" y="200" xlink:href="#defs_arccircle_with_hole" stroke="black" stroke-width="2" fill-rule="evenodd"/>
<use fill="none" x="200" y="200" xlink:href="#defs_arccircle_no_hole" stroke="black" stroke-width="2"/>
<use fill="black" x="250" y="250" xlink:href="#defs_triangle" />
</svg>