How to invert alpha channel of svg - css

I have an SVG image like this. I would like to invert it, such that everything that is black becomes transparent, and everything that is transparent becomes black. So the result would be a black square with a transparent, square shaped 'hole' in the middle. How can I achieve this?
Code for the svg:
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 99.999997 99.999997"
height="100"
width="100">
<g
transform="translate(0,-952.36223)"
>
<path
d="M 50.000001,954.80939 65.450848,986.11624 100,991.13652 74.999998,1015.5055 80.901699,1049.915 50,1033.6691 19.098298,1049.915 25.000001,1015.5055 -1.2134336e-6,991.13652 34.549151,986.11624 Z"
style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:22.67716599;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
</g>
</svg>

Use the path as a mask like below:
body {
background:pink;
}
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 99.999997 99.999997">
<defs>
<mask id="hole">
<rect width="100%" height="100%" fill="white"/>
<path transform="translate(0,-952.36223)"
d="M 50.000001,954.80939 65.450848,986.11624 100,991.13652 74.999998,1015.5055 80.901699,1049.915 50,1033.6691 19.098298,1049.915 25.000001,1015.5055 -1.2134336e-6,991.13652 34.549151,986.11624 Z"
fill="black" />
</mask>
</defs>
<rect fill="black" width="100%" height="100%" mask="url(#hole)" />
</svg>

The original answer showed an approach using the feFuncA primitive - GetSelf pointed out below that it wasn't working due to browser bugs).
Another approach that works is to invert the alpha channel using a feColorMatrix filter. Updated code below. Note this still won't work on fully transparent colored shapes in Chrome since it seems to discard any color channel values for shapes with opacity below 0.005.
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 99.999997 99.999997"
height="100"
width="100">
<defs>
<filter id="invert-alpha">
<feColorMatrix type="matrix" values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 -1 1"/>
</filter>
</defs>
<g
transform="translate(0,-952.36223)" filter="url(#invert-alpha)"
>
<path
d="M 50.000001,954.80939 65.450848,986.11624 100,991.13652 74.999998,1015.5055 80.901699,1049.915 50,1033.6691 19.098298,1049.915 25.000001,1015.5055 -1.2134336e-6,991.13652 34.549151,986.11624 Z"
style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:22.67716599;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
</g>
</svg>

Related

Center SVG in its viewport

I have the following SVG:
<svg width="15px" height="18px" viewBox="0 0 15 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Shape</title>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="question-controls" transform="translate(-52.000000, -1.000000)" fill="#72758D" fill-rule="nonzero">
<path d="M62,1 L54,1 C52.9,1 52,1.9 52,3 L52,13 L54,13 L54,3 L62,3 L62,1 Z M65,5 L58,5 C56.9,5 56,5.9 56,7 L56,17 C56,18.1 56.9,19 58,19 L65,19 C66.1,19 67,18.1 67,17 L67,7 C67,5.9 66.1,5 65,5 Z M65,17 L58,17 L58,7 L65,7 L65,17 Z" id="Shape"></path>
</g>
</g>
</svg>
It is a "Duplicate Icon" from Material IO.
https://material.io/resources/icons/?search=duplicat&icon=content_copy&style=baseline
However, as can you see it is not centered in its view port.
I tried by giving the same viewBox value like viewBox="0 0 100 100" with little success.

Add shadow on a svg <path>

I'm trying to put a modern shadow on a particular part of a svg.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 162 63.25">
<g style="isolation:isolate">
<g>
<g>
<path d="M149.376,39.75l-49,23.5v-47Z" fill="#811818"/>
<path d="M149.376,39.75H6.688L30.279,22.274,6.624,4.75H149.376Z" fill="#b51c1c"/>
</g>
</g>
</g>
</svg>
I tried using the filter but the edge are visible and it's too blury:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 162 63.25">
<g style="isolation:isolate">
<g>
<g>
<filter id="dropshadow" x="-2" y="-2" width="200" height="200">
<feGaussianBlur stdDeviation="1"/>
</filter>
<path d="M149.376,39.75l-49,23.5v-47Z" fill="#811818"/>
<path style="stroke: rgba(0,0,0,0.19); stroke-width: 0.2; filter: url('#dropshadow');" d="M149.376,39.75H6.688L30.279,22.274,6.624,4.75H149.376Z" fill="#b51c1c"/>
</g>
</g>
</g>
</svg>
I'm expecting to use some modern css shadow like (https://codepen.io/sdthornton/pen/wBZdXq) and don't crop the original svg. I also expect to use less shadow on the top of it
I believe this is what you want, you can just change the values in the filter to fit your needs.
in plain simple words, not to completact thing:
feOffset: x, y to move the blur shadow effect back and forth.
filter: height to move it up and down
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 169 67.25">
<g style="isolation:isolate">
<g>
<g>
<defs>
<filter id="dropshadow" height="122%">
<feGaussianBlur in="SourceAlpha" stdDeviation="1" />
<feOffset in="blur" dx="0.7" dy="0.7" result="offsetBlur"/>
<feOffset dx="1" dy="1" result="offsetblur" />
<feFlood flood-color="#3D4574" flood-opacity="0.3" result="offsetColor"/>
<feComposite in="offsetColor" in2="offsetBlur" operator="in" result="offsetBlur"/>
</filter>
</defs>
<use xlink:href="#path1" filter="url(#dropshadow)"></use>
<path id="path1" d="M149.376,39.75l-49,23.5v-47Z" fill="#811818"/>
<use xlink:href="#path2" filter="url(#dropshadow)"></use>
<path id="path2" style="stroke: rgba(0,0,0,0.19); stroke-width: 0.2;" d="M149.376,39.75H6.688L30.279,22.274,6.624,4.75H149.376Z" fill="#b51c1c"/>
</g>
</g>
</g>
</svg>
Instead of using custom svg filter you can achieve easily the expected result using the standard CSS drop-shadow filter
ie: filter: drop-shadow(0 0 2px rgba(0,0,0,.5));
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 162 63.25">
<g style="isolation:isolate">
<path d="M149.376,39.75l-49,23.5v-47Z" fill="#811818"/>
<path style="stroke: rgba(0,0,0,0.19); stroke-width: 0.2; filter: drop-shadow(0 0 2px rgba(0,0,0,.5));" d="M149.376,39.75H6.688L30.279,22.274,6.624,4.75H149.376Z" fill="#b51c1c"/>
</g>
</svg>

How to animate svg path d attribute with animate tag

Im trying to animate a svg path with animate tag, following this tutorial from css tricks. I could animate path with css keyframes, and the result is this:
#mySvg path{
animation: scale-path 10s ease-in-out infinite;
}
#keyframes scale-path {
50% {
d: path('M1036,540L883,540L883,693Z');
}
}
<svg id="mySvg" xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
x="0"
y="0"
width="100%"
height="100%"
viewBox="0 0 1920 1080"
preserveAspectRatio="none">
<path d="M1045,520L1173,558L1184,393Z"
fill="lightblue"
stroke="#eee9ea"
stroke-width="1.51" />
</svg>
But the problem is I cant achieve the same effect animation with animate tag (its supposed to will be there a lot of path tags with different animations). Im not sure if this is the correct syntax:
<svg id="mySvg" xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
x="0"
y="0"
width="100%"
height="100%"
viewBox="0 0 1920 1080"
preserveAspectRatio="none">
<path d="M1045,520L1173,558L1184,393Z"
fill="lightblue"
stroke="#eee9ea"
stroke-width="1.51">
<animate
attributeName="d"
from="M1045, 520L1173, 558L1184, 393Z"
to="M1036; 540L883; 540L883; 693Z"
dur="10s"
repeatCount="indefinite"
values="M1036; 540L883; 540L883; 693Z"
keyTimes="0.5;" />
</path>
</svg>
You are writing the values wrongly, you should pay attention to , and ;. The whole value of the path use , as delimiter (ex : M1045, 520L1173, 558L1184, 393Z) and those values are delimited by ; inside the values attrbiute
<svg id="mySvg" xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
x="0"
y="0"
width="100%"
height="100%"
viewBox="0 0 1920 1080"
preserveAspectRatio="none">
<path d="M1045,520L1173,558L1184,393Z"
fill="lightblue"
stroke="#eee9ea"
stroke-width="1.51">
<animate
attributeName="d"
from="M1045, 520L1173, 558L1184, 393Z"
to="M1036, 540L883, 540L883, 693Z"
dur="5s"
values="M1045, 520L1173, 558L1184, 393Z;M1036, 540L883, 540L883, 693Z;M1045, 520L1173, 558L1184, 393Z"
repeatCount="indefinite" />
</path>
</svg>
Semi-colons (;) are used as separators in attributes like values and keyTimes, to mark the different keyframe values. The number of values in these two attributes should match.
You seem to have replaced commas with semicolons, which is not correct.
If you are animating between two values (A -> B), you only need from and to. If you need to animate between a series of three or more values you need to use values and keyTimes.
There is no automatic back and forth looping in SMIL animation. So if you were trying to go from A to B and then back to A, you would need to use values and keyTimes and list your values in the form "A; B; A"`.
Like this:
<svg id="mySvg" xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
x="0"
y="0"
width="100%"
height="100%"
viewBox="0 0 1920 1080"
preserveAspectRatio="none">
<path d="M 1045,520 L 1173,558 L 1184,393 Z"
fill="lightblue"
stroke="#eee9ea"
stroke-width="1.51">
<animate
attributeName="d"
dur="10s"
repeatCount="indefinite"
values="M 1045,520 L 1173,558 L 1184,393 Z;
M 1036,540 L 883,540 L 883,693 Z;
M 1045,520 L 1173,558 L 1184,393 Z"
keyTimes="0; 0.5; 1" />
</path>
</svg>
If your animation is linearly paced, and the keyTimes timings are evenly spaced, like they are here, you don't actually have to provide a keyTimes.

fill color svg created with PhotoShop

I got this icon that was created in photoshop and saved in svg format.
How can I change the color fill?
-- EDIT --
I made this JS bin: https://jsbin.com/kazujoq/
SO seems to cut out this code: xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEMAAAAeCAQAAADd02vRAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfhDAcMHSMd+lM1AAADSElEQVRIx83WX2iVdRzH8ZfHMzZqzrlyUVMHioPEgXqhSEkiQVfWMKErwz8oIgYRdCEYBdWVIIRZeRmRJV2MQqygCRIRhLmy0OlEbbPN3FYHmjvzHLdfF3t29uy4nc45k9b3d3O+n+fz+z7v53u+zzm/OYqJhMc9odkiizxkoepIzxrQ5zdXnXfOeSNFVZsUoUjfeu/rF4pYf2q1TU2pGEEwp6Bngzc9FX3+wzldevToN2zYg07iQ+0aNVntscg35BOHXbhf3XjAuxHqsFctn+ZBWnJZg+0+kxYEoz61tJRuTBf1zuaafaFAhZY8bb59Lkfwr0nODGOhTsGot30suF4CBiRs97sg+N7i8jGq/CDIeAEvl4EB1Y4JgpvWlovxgSB4kRlgwBaDgkGbysF4RhB8FGWvCG5MuT8pCLYUfNRNguB2oY5M9cI+7DmvW4whnaBRLS4Zvmf/PEtxS28BjFqNIKVdSkqfSy7okIpjxONRe7UZKepnaubrV+/YMNaCiS9ls2+N/kcA8dVpt+QERu8sIIyvsxaNY6RmESP4UTJImO1Y43n/Awye/TeMv+/jzaav1TQdRtph61WpUWmdQ27P4Pa3HbJOpRpV1jssfY8jOkTlj+gZDXnGem1lDmCb+rxaDc7keboCTuaJX6nAEkd0SLnsqGWY64syID43F8scdVlKhyOWoMLXeb6T8oRetdhsMKYN2Ypq3SVCdKvGVkMxbdBm1LqZ581L96NZWnDLQS0O6BFkrMbOEjF2Yo2MoMcBLQ66JUhrxv5CGHfVoVXQnZuPR1wTnEKNOyVA3DEPXwqu5eajQbegFXXuTo/RgYS0YG9sqHYIsirRXgLGOVTKCnbEau0TpCXQEXcnxP9pb2CBKvwSU39CUj26S3hRe1EvGe0fj59RZQG6YmpIesnT0akj4xhSsios913OtAKj+vGWtMqiIDLeQ79RCSu05/QmZKXwhr+iWsE3U5U4JbiiLsrmuyg4XUIf4nFacNH8KKtzJZqziUaMjcYUsVZWcNUeG+3WKRjxZJkYG4wYO1lstMdVQXbykXB6DLbJxAYoa1eZELBLNlYrY9vky4UwWOm4PsGAE1bNAAJWOWFA0Oe4lfkXxzD+AbFgJVHPGGAuAAAAAElFTkSuQmCC".
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="99" height="65" viewBox="0 0 99 65">
<metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c140 79.160451, 2017/05/06-01:08:21 ">
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<rdf:Description rdf:about=""/>
</rdf:RDF>
</x:xmpmeta>
<?xpacket end="w"?></metadata>
<image id="Vector_Smart_Object" data-name="Vector Smart Object" x="14" y="19" width="67" height="30" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEMAAAAeCAQAAADd02vRAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfhDAcMHSMd+lM1AAADSElEQVRIx83WX2iVdRzH8ZfHMzZqzrlyUVMHioPEgXqhSEkiQVfWMKErwz8oIgYRdCEYBdWVIIRZeRmRJV2MQqygCRIRhLmy0OlEbbPN3FYHmjvzHLdfF3t29uy4nc45k9b3d3O+n+fz+z7v53u+zzm/OYqJhMc9odkiizxkoepIzxrQ5zdXnXfOeSNFVZsUoUjfeu/rF4pYf2q1TU2pGEEwp6Bngzc9FX3+wzldevToN2zYg07iQ+0aNVntscg35BOHXbhf3XjAuxHqsFctn+ZBWnJZg+0+kxYEoz61tJRuTBf1zuaafaFAhZY8bb59Lkfwr0nODGOhTsGot30suF4CBiRs97sg+N7i8jGq/CDIeAEvl4EB1Y4JgpvWlovxgSB4kRlgwBaDgkGbysF4RhB8FGWvCG5MuT8pCLYUfNRNguB2oY5M9cI+7DmvW4whnaBRLS4Zvmf/PEtxS28BjFqNIKVdSkqfSy7okIpjxONRe7UZKepnaubrV+/YMNaCiS9ls2+N/kcA8dVpt+QERu8sIIyvsxaNY6RmESP4UTJImO1Y43n/Awye/TeMv+/jzaav1TQdRtph61WpUWmdQ27P4Pa3HbJOpRpV1jssfY8jOkTlj+gZDXnGem1lDmCb+rxaDc7keboCTuaJX6nAEkd0SLnsqGWY64syID43F8scdVlKhyOWoMLXeb6T8oRetdhsMKYN2Ypq3SVCdKvGVkMxbdBm1LqZ581L96NZWnDLQS0O6BFkrMbOEjF2Yo2MoMcBLQ66JUhrxv5CGHfVoVXQnZuPR1wTnEKNOyVA3DEPXwqu5eajQbegFXXuTo/RgYS0YG9sqHYIsirRXgLGOVTKCnbEau0TpCXQEXcnxP9pb2CBKvwSU39CUj26S3hRe1EvGe0fj59RZQG6YmpIesnT0akj4xhSsios913OtAKj+vGWtMqiIDLeQ79RCSu05/QmZKXwhr+iWsE3U5U4JbiiLsrmuyg4XUIf4nFacNH8KKtzJZqziUaMjcYUsVZWcNUeG+3WKRjxZJkYG4wYO1lstMdVQXbykXB6DLbJxAYoa1eZELBLNlYrY9vky4UwWOm4PsGAE1bNAAJWOWFA0Oe4lfkXxzD+AbFgJVHPGGAuAAAAAElFTkSuQmCC"/>
</svg>
The bitmap converted to svg can not be stylized using the usual methods: fill: orange;
But you can change its color entirely using SVG filters
Browser support SVG filter
To fill the color I will use filter primitive feColorMatrix
This filter applies a matrix transformation:
The theory looks frightening, but in reality it is quite easy to use filters in practice.
To fill in red, I will use the following matrix:
<filter id="RedFilter" x="-20" y="-20" width="150" height="150">
<feColorMatrix in="SourceGraphic" type="matrix"
values="0 0 0 1 0
0 0 0 0 0
0 0 0 0 0
0 0 0 1 0
"/>
</filter>
"1" is in the first line, which is responsible for the red color, in the fourth line - the alpha channel responsible for transparency.
Below is the full code of filling in red:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="99" height="65" viewBox="0 0 99 65"
>
<defs>
<filter id="RedFilter" x="-20" y="-20" width="150" height="150">
<feColorMatrix in="SourceGraphic" type="matrix"
values="0 0 0 1 0
0 0 0 0 0
0 0 0 0 0
0 0 0 1 0
"/>
</filter>
<image id="Vector_Smart_Object" x="14" y="19" width="67" height="30" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEMAAAAeCAQAAADd02vRAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfhDAcMHSMd+lM1AAADSElEQVRIx83WX2iVdRzH8ZfHMzZqzrlyUVMHioPEgXqhSEkiQVfWMKErwz8oIgYRdCEYBdWVIIRZeRmRJV2MQqygCRIRhLmy0OlEbbPN3FYHmjvzHLdfF3t29uy4nc45k9b3d3O+n+fz+z7v53u+zzm/OYqJhMc9odkiizxkoepIzxrQ5zdXnXfOeSNFVZsUoUjfeu/rF4pYf2q1TU2pGEEwp6Bngzc9FX3+wzldevToN2zYg07iQ+0aNVntscg35BOHXbhf3XjAuxHqsFctn+ZBWnJZg+0+kxYEoz61tJRuTBf1zuaafaFAhZY8bb59Lkfwr0nODGOhTsGot30suF4CBiRs97sg+N7i8jGq/CDIeAEvl4EB1Y4JgpvWlovxgSB4kRlgwBaDgkGbysF4RhB8FGWvCG5MuT8pCLYUfNRNguB2oY5M9cI+7DmvW4whnaBRLS4Zvmf/PEtxS28BjFqNIKVdSkqfSy7okIpjxONRe7UZKepnaubrV+/YMNaCiS9ls2+N/kcA8dVpt+QERu8sIIyvsxaNY6RmESP4UTJImO1Y43n/Awye/TeMv+/jzaav1TQdRtph61WpUWmdQ27P4Pa3HbJOpRpV1jssfY8jOkTlj+gZDXnGem1lDmCb+rxaDc7keboCTuaJX6nAEkd0SLnsqGWY64syID43F8scdVlKhyOWoMLXeb6T8oRetdhsMKYN2Ypq3SVCdKvGVkMxbdBm1LqZ581L96NZWnDLQS0O6BFkrMbOEjF2Yo2MoMcBLQ66JUhrxv5CGHfVoVXQnZuPR1wTnEKNOyVA3DEPXwqu5eajQbegFXXuTo/RgYS0YG9sqHYIsirRXgLGOVTKCnbEau0TpCXQEXcnxP9pb2CBKvwSU39CUj26S3hRe1EvGe0fj59RZQG6YmpIesnT0akj4xhSsios913OtAKj+vGWtMqiIDLeQ79RCSu05/QmZKXwhr+iWsE3U5U4JbiiLsrmuyg4XUIf4nFacNH8KKtzJZqziUaMjcYUsVZWcNUeG+3WKRjxZJkYG4wYO1lstMdVQXbykXB6DLbJxAYoa1eZELBLNlYrY9vky4UwWOm4PsGAE1bNAAJWOWFA0Oe4lfkXxzD+AbFgJVHPGGAuAAAAAElFTkSuQmCC" />
</defs>
<use xlink:href="#Vector_Smart_Object" filter="url(#RedFilter)" ></use>
</svg>
For filling with other colors, minor changes in the matrix will be required. The green color is "1" in the second line, the rest of the line, except for the alpha channel is zeros.
In the example below, the <use> command is used, which makes it possible to color the clones in different colors by applying a filter with different matrix formulas to them.
<use xlink:href="#Vector_Smart_Object" x="0" y="0" filter="url(#RedFilter)" ></use>
<use xlink:href="#Vector_Smart_Object" x="100" y="0" filter="url(#GreenFilter)" ></use>
<use xlink:href="#Vector_Smart_Object" x="200" y="0" filter="url(#BlueFilter)" ></use>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="65" viewBox="0 0 400 65"
>
<defs>
<filter id="RedFilter" x="-20" y="-20" width="150" height="150">
<feColorMatrix in="SourceGraphic" type="matrix"
values="0 0 0 1 0
0 0 0 0 0
0 0 0 0 0
0 0 0 1 0
"/>
</filter>
<filter id="GreenFilter" x="-20" y="-20" width="150" height="150">
<feColorMatrix in="SourceGraphic" type="matrix"
values="0 0 0 0 0
0 0 0 1 0
0 0 0 0 0
0 0 0 1 0
"/>
</filter>
<filter id="BlueFilter" x="-20" y="-20" width="150" height="150">
<feColorMatrix in="SourceGraphic" type="matrix"
values="0 0 0 0 0
0 0 0 0 0
0 0 0 1 0
0 0 0 1 0
"/>
</filter>
<image id="Vector_Smart_Object" x="14" y="19" width="67" height="30" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEMAAAAeCAQAAADd02vRAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfhDAcMHSMd+lM1AAADSElEQVRIx83WX2iVdRzH8ZfHMzZqzrlyUVMHioPEgXqhSEkiQVfWMKErwz8oIgYRdCEYBdWVIIRZeRmRJV2MQqygCRIRhLmy0OlEbbPN3FYHmjvzHLdfF3t29uy4nc45k9b3d3O+n+fz+z7v53u+zzm/OYqJhMc9odkiizxkoepIzxrQ5zdXnXfOeSNFVZsUoUjfeu/rF4pYf2q1TU2pGEEwp6Bngzc9FX3+wzldevToN2zYg07iQ+0aNVntscg35BOHXbhf3XjAuxHqsFctn+ZBWnJZg+0+kxYEoz61tJRuTBf1zuaafaFAhZY8bb59Lkfwr0nODGOhTsGot30suF4CBiRs97sg+N7i8jGq/CDIeAEvl4EB1Y4JgpvWlovxgSB4kRlgwBaDgkGbysF4RhB8FGWvCG5MuT8pCLYUfNRNguB2oY5M9cI+7DmvW4whnaBRLS4Zvmf/PEtxS28BjFqNIKVdSkqfSy7okIpjxONRe7UZKepnaubrV+/YMNaCiS9ls2+N/kcA8dVpt+QERu8sIIyvsxaNY6RmESP4UTJImO1Y43n/Awye/TeMv+/jzaav1TQdRtph61WpUWmdQ27P4Pa3HbJOpRpV1jssfY8jOkTlj+gZDXnGem1lDmCb+rxaDc7keboCTuaJX6nAEkd0SLnsqGWY64syID43F8scdVlKhyOWoMLXeb6T8oRetdhsMKYN2Ypq3SVCdKvGVkMxbdBm1LqZ581L96NZWnDLQS0O6BFkrMbOEjF2Yo2MoMcBLQ66JUhrxv5CGHfVoVXQnZuPR1wTnEKNOyVA3DEPXwqu5eajQbegFXXuTo/RgYS0YG9sqHYIsirRXgLGOVTKCnbEau0TpCXQEXcnxP9pb2CBKvwSU39CUj26S3hRe1EvGe0fj59RZQG6YmpIesnT0akj4xhSsios913OtAKj+vGWtMqiIDLeQ79RCSu05/QmZKXwhr+iWsE3U5U4JbiiLsrmuyg4XUIf4nFacNH8KKtzJZqziUaMjcYUsVZWcNUeG+3WKRjxZJkYG4wYO1lstMdVQXbykXB6DLbJxAYoa1eZELBLNlYrY9vky4UwWOm4PsGAE1bNAAJWOWFA0Oe4lfkXxzD+AbFgJVHPGGAuAAAAAElFTkSuQmCC" />
</defs>
<use xlink:href="#Vector_Smart_Object" x="0" y="0" filter="url(#RedFilter)" ></use>
<use xlink:href="#Vector_Smart_Object" x="100" y="0" filter="url(#GreenFilter)" ></use>
<use xlink:href="#Vector_Smart_Object" x="200" y="0" filter="url(#BlueFilter)" ></use>
</svg>
As others have said, if you use Illustrator to export the SVG code can then have control over its style. For instance, using fill to alter the color.
Here's an example in JSFiddle - https://jsfiddle.net/ks1k2us6/2/
HTML -
<div class="wrapper">
<div class="icon">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="80px" height="70px" viewBox="0 0 1190.549 841.891" enable-background="new 0 0 1190.549 841.891" xml:space="preserve">
<g>
<g>
<path d="M356.739,473.29c-38.684,0-70.158,31.473-70.158,70.158c0,38.685,31.473,70.158,70.158,70.158
c38.685,0,70.158-31.473,70.158-70.158C426.897,504.764,395.425,473.29,356.739,473.29z M356.739,585.543
c-23.208,0-42.095-18.887-42.095-42.095s18.887-42.095,42.095-42.095s42.095,18.887,42.095,42.095
S379.947,585.543,356.739,585.543z" />
</g>
</g>
<g>
<g>
<path d="M1002.189,473.29v-84.188c0-6.033-3.859-11.408-9.598-13.316l-79.166-26.393
c-29.816-50.498-70.803-98.557-161.376-114.426c-0.168-0.028-0.337-0.056-0.505-0.084
c-167.271-23.124-292.852,14.606-373.477,112.182c-60.013,0.87-121.275,13.414-157.308,36.482
c-18.661,11.954-29.732,32.763-30.771,54.905l-1.628,34.84c-7.744,0-14.031,6.286-14.031,14.031v56.125
c0,7.745,6.287,14.031,14.031,14.031h56.126c7.787,0,14.018-6.398,14.03-14.186c0-0.071,0.016-0.14,0.016-0.226
c0.21-54.063,44.087-97.842,98.206-97.842c54.246,0,98.22,43.975,98.22,98.22c-1.009,8.518,5.711,14.031,14.031,14.031h252.567
c7.787,0,14.018-6.397,14.03-14.186c0-0.07,0.014-0.14,0.014-0.226c0.21-54.063,44.087-97.842,98.207-97.842
c54.245,0,98.22,43.975,98.22,98.221c-1.01,8.518,5.711,14.03,14.031,14.03h56.125c7.744,0,14.031-6.286,14.031-14.03v-56.126
C1016.22,479.576,1009.934,473.29,1002.189,473.29z M623.338,339.992c0,3.872-3.143,7.017-7.017,7.017H433.337
c-6.481,0-9.429-7.971-4.645-12.334c48.689-44.382,110.609-69.766,186.914-76.514c4.11-0.365,7.731,2.946,7.731,7.072V339.992z
M791.912,340.062c-0.043,3.844-3.172,6.945-7.017,6.945H658.416c-3.872,0-7.016-3.143-7.016-7.017v-76.612
c0-3.887,3.101-7.085,6.973-7.085c27.979-0.028,57.586,2.006,89.059,6.357c14.986,2.638,28.343,6.258,40.494,10.706
c2.792,1.024,4.574,3.733,4.547,6.708L791.912,340.062z M865.143,347.007h-38.151c-3.9,0-7.057-3.186-7.016-7.086l0.364-38.024
c0.057-5.794,6.665-8.938,11.338-5.515c15.169,11.084,27.782,24.289,39.021,39.275
C874.206,340.327,870.979,347.007,865.143,347.007z" />
</g>
</g>
<g>
<g>
<path d="M833.811,473.29c-38.685,0-70.158,31.473-70.158,70.158c0,38.685,31.473,70.158,70.158,70.158
c38.684,0,70.158-31.473,70.158-70.158C903.967,504.764,872.494,473.29,833.811,473.29z M833.811,585.543
c-23.208,0-42.095-18.887-42.095-42.095s18.887-42.095,42.095-42.095s42.095,18.887,42.095,42.095
S857.019,585.543,833.811,585.543z" />
</g>
</g>
</svg>
</div>
<h1>Cars</h1>
</div>
CSS -
.wrapper {
display: flex;
}
svg {
fill: green;
}
Make a shape of the icon if you haven't already. Then, instead of exporting the SVG file via "Export As.." in the File menu, right click on the shape layer, and click "Copy SVG". Paste this into a blank document and save it as a .svg file. It will have a fill property.

How to create an inset shadow on an svg circle stroke?

How can i create the following widget in SVG?
I'm fine with the shapes itself but i'm struggling with the inset shadow on the back circle.
I've tried a radial gradient, which 'works' but it doesn't look that great and I have to fiddle with the stop values on the order of thousandths of a percent to get it exactly right and it just feels totally hacky.
Is there a better way?
Code to produce the SVG:
<svg width="180" height="180" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="90" cy="90" r="72" fill="none" stroke="#ddd" stroke-width="18"></circle>
<path class="main-arc" d="M 90 18 A 72 72 0 1 1 85.47908259388944 18.142075553164446" fill="transparent" stroke-width="18" stroke="black" stroke-linecap="round" style="stroke-dasharray: 452.389; stroke-dashoffset: 366.435;">
</path>
</svg>
Well you can do it the easy way with an inset shadow:
<svg width="180" height="180">
<defs>
<filter id="inset-shadow">
<feFlood flood-color="black"/>
<feComposite operator="out" in2="SourceGraphic"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite operator="atop" in2="SourceGraphic"/>
</filter>
</defs>
<circle filter="url(#inset-shadow)" cx="90" cy="90" r="72" fill="none" stroke="#ddd" stroke-width="18"></circle>
<path class="main-arc" d="M 90 18 A 72 72 0 1 1 85.47908259388944 18.142075553164446" fill="transparent" stroke-width="18" stroke="black" stroke-linecap="round" style="stroke-dasharray: 452.389; stroke-dashoffset: 366.435;">
</path>
</svg>
But if you really want a 3D effect, then you'll need a lighting effect:
<svg width="180" height="180" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="inset-shadow">
<feFlood flood-color="black"/>
<feComposite operator="xor" in2="SourceGraphic"/>
<feGaussianBlur stdDeviation="1"/>
<feComposite operator="in" in2="SourceGraphic" result="map"/>
<feDiffuseLighting lighting-color="white" surfaceScale="2" diffuseConstant="1">
<feSpotLight x="-30" y="-30" z="230"/>
</feDiffuseLighting>
<feBlend mode="multiply" in="SourceGraphic" />
<feComposite operator="in" in2="SourceGraphic"/>
</filter>
</defs>
<circle filter="url(#inset-shadow)" cx="90" cy="90" r="72" fill="none" stroke="#ddd" stroke-width="18"></circle>
<path class="main-arc" d="M 90 18 A 72 72 0 1 1 85.47908259388944 18.142075553164446" fill="transparent" stroke-width="18" stroke="black" stroke-linecap="round" style="stroke-dasharray: 452.389; stroke-dashoffset: 366.435;">
</path>
</svg>
Draw a pale grey stroked circle on a darker grey background, apply a gaussian blur filter, and clip the results with a clipPath:
<svg width="360" height="360" viewBox="0 0 180 180">
<defs>
<!-- Gaussian blur filter used to soften the shadow edges -->
<filter id="blur" filterUnits="userSpaceOnUse" x="-90" y="-90"
width="180" height="180">
<feGaussianBlur in="SourceGraphic" stdDeviation="1" />
</filter>
<!-- Annular clip path for the progress meter background -->
<clipPath id="ring" clip-rule="evenodd">
<path d="M0-81A81 81 0 0 1 0 81A81 81 0 0 1 0-81z
M0-63A63 63 0 0 1 0 63A63 63 0 0 1 0-63z" />
</clipPath>
</defs>
<!-- Set orgin to centre of drawing -->
<g transform="translate(90,90)">
<!-- Start with pale yellow background -->
<rect x="-90" y="-90" width="180" height="180" fill="#e8e0ce"
stroke="none" />
<!-- Draw the progress ring on top, and clip using the above clip path -->
<g clip-path="url(#ring)">
<!-- Dark grey background -->
<rect x="-85" y="-85" width="170" height="170" fill="#433"
stroke="none" />
<!-- Lighter grey circle with blur filter applied -->
<circle cx="0" cy="2.5" r="72" stroke="#655" stroke-width="18"
stroke="#655" fill="none" filter="url(#blur)"/>
</g>
<!-- Progress bar and text -->
<path class="main-arc" d="M 0 -72 A 72 72 0 1 1 -4.52 -71.86"
style="stroke-dasharray: 452.389; stroke-dashoffset: 366.435;"
fill="transparent" stroke-width="18" stroke="#b65"
stroke-linecap="round" />
<text x="0" y="0" font-size="40" font-family="'Trebuchet MS', sans-serif"
fill="#655" text-anchor="middle" dominant-baseline="central">
20%
</text>
</g>
</svg>

Resources