Related
Hi i am trying to create a 'pin' on a SVG map of the whole world, the SVG is build with path elements, my thought was to use a before or after element and show the pin accordingly.
Apparently it is not showing on the path element, i can see it in the debugger/console and if i put it on a div element it works fine and shows up, i have cut out all countries except the first one in the SVG for simplicity.
CSS
.map-pin::after{
content: url('pin.svg');
background-size: 30px 30px;
background-repeat: no-repeat;
background-position: left top;
width: 30px;
height: 30px;
z-index: 10;
font-size: 1px;
display: inline-block;
position: absolute;
left: -999px;
top: -999px;
/*display: none;*/
}
.map-pin.active::after{
display: block;
}
.map-pin.active[data-id="AF"]::after{
top: 0;
left: 0;
}
SVG
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" style="stroke-linejoin: round; stroke:#000; fill: none;" viewBox="0 0 2000 1001" id="svg2" inkscape:version="0.48.4 r9939" sodipodi:docname="world.svg">
<defs id="defs4">
<style type="text/css" id="style6">path { fill-rule: evenodd; }</style>
</defs>
<g id="countries">
<path id="AF" data-name="Afghanistan" data-id="AF" class="map-pin active" d="m 1369.9,333.8 -5.4,0 -3.8,-0.5 -2.5,2.9 -2.1,0.7 -1.5,1.3 -2.6,-2.1 -1,-5.4 -1.6,-0.3 0,-2 -3.2,-1.5 -1.7,2.3 0.2,2.6 -0.6,0.9 -3.2,-0.1 -0.9,3 -2.1,-1.3 -3.3,2.1 -1.8,-0.8 -4.3,-1.4 -2.9,0 -1.6,-0.2 -2.9,-1.7 -0.3,2.3 -4.1,1.2 0.1,5.2 -2.5,2 -4,0.9 -0.4,3 -3.9,0.8 -5.9,-2.4 -0.5,8 -0.5,4.7 2.5,0.9 -1.6,3.5 2.7,5.1 1.1,4 4.3,1.1 1.1,4 -3.9,5.8 9.6,3.2 5.3,-0.9 3.3,0.8 0.9,-1.4 3.8,0.5 6.6,-2.6 -0.8,-5.4 2.3,-3.6 4,0 0.2,-1.7 4,-0.9 2.1,0.6 1.7,-1.8 -1.1,-3.8 1.5,-3.8 3,-1.6 -3,-4.2 5.1,0.2 0.9,-2.3 -0.8,-2.5 2,-2.7 -1.4,-3.2 -1.9,-2.8 2.4,-2.8 5.3,-1.3 5.8,-0.8 2.4,-1.2 2.8,-0.7 -1.4,-1.9 z" style="fill:#f2f2f2;fill-rule:evenodd"></path>
</g>
</svg>
I also tried a more simple way by just adding an element inside the SVG after all the path elements, but this breaks the whole SVG.
Anyone able to help me out here, is it not possible in SVG path elements? and if so, what other options am i left with?
PIN:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="Layer_1" style="enable-background:new 0 0 512 512;" viewBox="0 0 512 512" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#454545;stroke-width:18;stroke-miterlimit:10;}
</style>
<g>
<g id="XMLID_4245_">
<path class="st0" d="M389.3,208.7c0-73.6-59.7-133.3-133.3-133.3c-73.6,0-133.3,59.7-133.3,133.3 c0,32.6,12.1,62,31.5,85.1l55.3,75.4l46.6,67.5l101.8-142.9C377.2,270.7,389.3,241.2,389.3,208.7z" id="XMLID_4247_"></path>
<path class="st0" d="M311,170.9L311,170.9c-12.1-11.6-31.7-11.6-43.8,0l-10.9,10.5L245.3,171 c-12.1-11.6-31.7-11.6-43.8,0c-12.1,11.6-12.1,30.4,0,42l54.7,52.5L311,213C323.1,201.4,323.1,182.6,311,170.9z" id="XMLID_4246_"></path>
</g>
</g>
</svg>
As I've commented you can't have a before pseudo element for a path. However in your case you can have a symbol for the pin and use it at the end of your document. This way it will stay above all the other paths. (a z-index won't work either in SVG).
If you are using a symbol with a viewBox attribute you can give the <use> element a position (x and y attributes) and a size (width and height attributes)
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" style="stroke-linejoin: round; stroke:#000; fill: none;" viewBox="1280 320 100 100" id="svg2" >
<defs id="defs4">
<style type="text/css" id="style6">path { fill-rule: evenodd; }</style>
</defs>
<symbol id="map-pin-after" viewBox="0 0 30 30">
<circle cx="15" cy="8" r="8" /> <polygon points="15,30 22.7,10 7.3,10 15,30"/>
</symbol>
<g id="countries">
<path id="AF" data-name="Afghanistan" data-id="AF" class="map-pin active" d="m 1369.9,333.8 -5.4,0 -3.8,-0.5 -2.5,2.9 -2.1,0.7 -1.5,1.3 -2.6,-2.1 -1,-5.4 -1.6,-0.3 0,-2 -3.2,-1.5 -1.7,2.3 0.2,2.6 -0.6,0.9 -3.2,-0.1 -0.9,3 -2.1,-1.3 -3.3,2.1 -1.8,-0.8 -4.3,-1.4 -2.9,0 -1.6,-0.2 -2.9,-1.7 -0.3,2.3 -4.1,1.2 0.1,5.2 -2.5,2 -4,0.9 -0.4,3 -3.9,0.8 -5.9,-2.4 -0.5,8 -0.5,4.7 2.5,0.9 -1.6,3.5 2.7,5.1 1.1,4 4.3,1.1 1.1,4 -3.9,5.8 9.6,3.2 5.3,-0.9 3.3,0.8 0.9,-1.4 3.8,0.5 6.6,-2.6 -0.8,-5.4 2.3,-3.6 4,0 0.2,-1.7 4,-0.9 2.1,0.6 1.7,-1.8 -1.1,-3.8 1.5,-3.8 3,-1.6 -3,-4.2 5.1,0.2 0.9,-2.3 -0.8,-2.5 2,-2.7 -1.4,-3.2 -1.9,-2.8 2.4,-2.8 5.3,-1.3 5.8,-0.8 2.4,-1.2 2.8,-0.7 -1.4,-1.9 z" fill="#f2f2f2"></path>
</g>
<use xlink:href="#map-pin-after" stroke="none" fill="red" width="30" height="30" x="1310" y="327"/>
</svg>
UPDATE
An update where I'm using the OP's pin:
Since the new pin is not a square, and in order to preserve the aspect ratio, I had to recalculate the height of the pin.
<svg viewBox="1280 320 100 100" >
<defs>
<symbol id="map-pin-after" viewBox="111 60 290 397">
<g id="XMLID_4245_" fill="none" stroke="#454545" stroke-width="18" stroke-mitterlimit="10">
<path d="M389.3,208.7c0-73.6-59.7-133.3-133.3-133.3c-73.6,0-133.3,59.7-133.3,133.3 c0,32.6,12.1,62,31.5,85.1l55.3,75.4l46.6,67.5l101.8-142.9C377.2,270.7,389.3,241.2,389.3,208.7z" ></path>
<path d="M311,170.9L311,170.9c-12.1-11.6-31.7-11.6-43.8,0l-10.9,10.5L245.3,171 c-12.1-11.6-31.7-11.6-43.8,0c-12.1,11.6-12.1,30.4,0,42l54.7,52.5L311,213C323.1,201.4,323.1,182.6,311,170.9z" ></path>
</g>
</symbol>
</defs>
<g id="countries">
<path id="AF" data-name="Afghanistan" data-id="AF" class="map-pin active" d="m 1369.9,333.8 -5.4,0 -3.8,-0.5 -2.5,2.9 -2.1,0.7 -1.5,1.3 -2.6,-2.1 -1,-5.4 -1.6,-0.3 0,-2 -3.2,-1.5 -1.7,2.3 0.2,2.6 -0.6,0.9 -3.2,-0.1 -0.9,3 -2.1,-1.3 -3.3,2.1 -1.8,-0.8 -4.3,-1.4 -2.9,0 -1.6,-0.2 -2.9,-1.7 -0.3,2.3 -4.1,1.2 0.1,5.2 -2.5,2 -4,0.9 -0.4,3 -3.9,0.8 -5.9,-2.4 -0.5,8 -0.5,4.7 2.5,0.9 -1.6,3.5 2.7,5.1 1.1,4 4.3,1.1 1.1,4 -3.9,5.8 9.6,3.2 5.3,-0.9 3.3,0.8 0.9,-1.4 3.8,0.5 6.6,-2.6 -0.8,-5.4 2.3,-3.6 4,0 0.2,-1.7 4,-0.9 2.1,0.6 1.7,-1.8 -1.1,-3.8 1.5,-3.8 3,-1.6 -3,-4.2 5.1,0.2 0.9,-2.3 -0.8,-2.5 2,-2.7 -1.4,-3.2 -1.9,-2.8 2.4,-2.8 5.3,-1.3 5.8,-0.8 2.4,-1.2 2.8,-0.7 -1.4,-1.9 z" fill="#f2f2f2" stroke="black"></path>
</g>
<use xlink:href="#map-pin-after" stroke="none" fill="red" width="41" height="30" x="1305" y="327"/>
</svg>
Hi I have the following code where I need to vertical align the SVG with the label.
g {
fill: blue;
fill-rule: evenodd;
}
#firstdiv:hover {
border-radius: 25px;
background: #dcd9d9;
padding-top: 6px;
height: 35px;
width: 100%;
display: inline-block;
}
#svgcontainer {
display: inline;
}
<div id='firstdiv'>
<div id='svgcontainer'>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="22" height="22" viewBox="0 0 22 22">
<defs>
<path id="a" d="M11 11a3.666 3.666 0 0 0 3.667-3.667A3.666 3.666 0 0 0 11 3.667a3.666 3.666 0 0 0-3.667 3.666A3.666 3.666 0 0 0 11 11zm0 1.833c-2.447 0-7.333 1.229-7.333 3.667v1.833h14.666V16.5c0-2.438-4.885-3.667-7.333-3.667z"/>
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="b" fill="#fff">
<use xlink:href="#a"/>
</mask>
<g fill="#000" fill-opacity=".54" mask="url(#b)">
<path d="M0 0h22v22H0z"/>
</g>
</g>
</svg>
</div>
Test
</div>
And when you hover nothing has to moved because right now when hover because the SVG is not vertically aligned to the middle when hover there is a move of the elements.
https://jsfiddle.net/164seo3g/1/
Thanks
Few pointers,
usually hover should change only the relevant css properties, it should not change layout & stuff, so, what I did is to split styles, without hover contains all the props that related to layout, hover, contains only the change.
You can use vertical-align: middle on item that has siblings, your svg was inside a container, and therefore this wasn't worked.
g {
fill: blue;
fill-rule: evenodd;
}
#firstdiv {
border-radius: 25px;
line-height: 35px;
width: 100%;
display: inline-block;
}
#firstdiv:hover {
background: #dcd9d9;
}
#svgcontainer {
display: inline-block;
vertical-align: middle;
}
<div id='firstdiv'>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="22" height="22" viewBox="0 0 22 22" id='svgcontainer'>
<defs>
<path id="a" d="M11 11a3.666 3.666 0 0 0 3.667-3.667A3.666 3.666 0 0 0 11 3.667a3.666 3.666 0 0 0-3.667 3.666A3.666 3.666 0 0 0 11 11zm0 1.833c-2.447 0-7.333 1.229-7.333 3.667v1.833h14.666V16.5c0-2.438-4.885-3.667-7.333-3.667z"/>
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="b" fill="#fff">
<use xlink:href="#a"/>
</mask>
<g fill="#000" fill-opacity=".54" mask="url(#b)">
<path d="M0 0h22v22H0z"/>
</g>
</g>
</svg> Test
</div>
I generated a simple svg image and loaded it to Chrome. Meant to position it to the center of browser(even when the browser resizing), but so far have failed on this.
Have referred to some articles about viewport/viewbox setting, and some Q&As on this site(https://stackoverflow.com/questions/8639383/how-do-i-center-an-svg-in-a-div;https://stackoverflow.com/questions/13373169/align-svg-to-center-of-screen), but haven't got it done. Maybe I missed something, since I am very new to this.
Here is the full code for this svg image:
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
width="100%"
height="100%"
viewBox="0 -700 1080 1920"
preserveAspectRatio="xMidYMid meet"
version="1.1"
id="mysvg"
>
<g
id="group" >
<circle
r="500"
style="fill:#ffb721;fill-opacity:1"
cy="0"
cx="0"
id="path" />
<circle
style="fill:#f71c17;fill-opacity:1;"
id="path2"
cx="0"
cy="0"
r="250" />
</g>
</svg>
I expect this image could stay at the center of the browser, even during browser resizing.
I think this is what you want?
The SVG will be position in the center even the browser resized and scroll
ON GLOBAL CSS
CSS:
#container {
top: 50%;
left: 50%;
position: fixed;
transform: translate(-50%, -50%);
}
INSIDE SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 439.29 439.29" width="100%" height="100%">
<g id="group">
<circle cx="219.64" cy="219.64" r="219.64" style="fill: #ffb721" id="path"/>
<circle cx="219.64" cy="219.64" r="108.32" style="fill: #f71c17" id="path2"/>
</g>
</svg>
Your SVG needs a little modification to center it in the ViewBox.
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
width: 300px;
height: 300px;
background-color: rgba(red, .3);
}
<div class="container">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
width="100%"
height="100%"
viewBox="-540 -960 1080 1920"
preserveAspectRatio="xMidYMid meet"
version="1.1"
id="mysvg"
>
<g
id="group" >
<circle
r="500"
style="fill:#ffb721;fill-opacity:1"
cy="0"
cx="0"
id="path" />
<circle
style="fill:#f71c17;fill-opacity:1;"
id="path2"
cx="0"
cy="0"
r="250" />
</g>
</svg>
</div>
I'm trying to change the fill colour on an SVG symbol when it is inside a <use> element. Because there are going to be multiple instances of the symbol on the page, I can't do this is the <symbol> element, because the different instances of <use> will be different colours.
I've can't seem to get it work though. In the example below I would like to the bottom instance to be a blue twitter icon.
In the CSS I've done #bottom-twitter svg path {fill:blue;} which doesn't work. And I can't seem to get anything to work.
Any help would be amazing.
#box1 {
height: 5rem;
width: 5rem;
}
/* NOT WORKING */
#bottom-twitter svg path {
fill:blue;
}
<svg id="twitter" style="display: none;">
<defs>
<symbol id="twitter-symbol" viewBox="0 0 19.19 15.95">
<path id="twitter-path" d="M19.19,1.92a8.76,8.76,0,0,1-2.28.64A3.9,3.9,0,0,0,18.63.32a6.87,6.87,0,0,1-2.52,1A3.87,3.87,0,0,0,13.23,0,4,4,0,0,0,9.32,4,3.41,3.41,0,0,0,9.44,5,11,11,0,0,1,1.32.72a4.29,4.29,0,0,0-.52,2A4,4,0,0,0,2.56,6.12,3.61,3.61,0,0,1,.76,5.6v0a4,4,0,0,0,3.16,4,4.35,4.35,0,0,1-1,.16,4.9,4.9,0,0,1-.76-.08,4,4,0,0,0,3.68,2.8A7.79,7.79,0,0,1,.92,14.19a6.78,6.78,0,0,1-.92,0A10.83,10.83,0,0,0,6,16c7.24,0,11.19-6.16,11.19-11.47V4a6.83,6.83,0,0,0,2-2">
</path>
</symbol>
</defs>
</svg>
<div class="box" id="box1">
<svg id="top-twitter" viewBox="0 0 19.19 15.95">
<use xlink:href="#twitter-symbol"/>
</svg>
<svg id="bottom-twitter" viewBox="0 0 19.19 15.95">
<use xlink:href="#twitter-symbol"/>
</svg>
</div>
The problem is the fill="#000" in the svg path. Remove that or just change it to be the color you want.
#box1 {
height: 5rem;
width: 5rem;
}
/* NOT WORKING */
#bottom-twitter {
fill: blue;
}
<svg id="twitter" style="display: none;">
<defs>
<symbol id="twitter-symbol" viewBox="0 0 19.19 15.95">
<path id="twitter-path" d="M19.19,1.92a8.76,8.76,0,0,1-2.28.64A3.9,3.9,0,0,0,18.63.32a6.87,6.87,0,0,1-2.52,1A3.87,3.87,0,0,0,13.23,0,4,4,0,0,0,9.32,4,3.41,3.41,0,0,0,9.44,5,11,11,0,0,1,1.32.72a4.29,4.29,0,0,0-.52,2A4,4,0,0,0,2.56,6.12,3.61,3.61,0,0,1,.76,5.6v0a4,4,0,0,0,3.16,4,4.35,4.35,0,0,1-1,.16,4.9,4.9,0,0,1-.76-.08,4,4,0,0,0,3.68,2.8A7.79,7.79,0,0,1,.92,14.19a6.78,6.78,0,0,1-.92,0A10.83,10.83,0,0,0,6,16c7.24,0,11.19-6.16,11.19-11.47V4a6.83,6.83,0,0,0,2-2" >
</path>
</symbol>
</defs>
</svg>
<div class="box" id="box1">
<svg id="top-twitter" viewBox="0 0 19.19 15.95">
<use xlink:href="#twitter-symbol"/>
</svg>
<svg id="bottom-twitter" viewBox="0 0 19.19 15.95">
<use xlink:href="#twitter-symbol"/>
</svg>
</div>
I have this facebook SVG icon, that I need to be able to change the circle color and the inside color (icon itself). How do I change it from transparent to white?
what I have
what I need
SVG code:
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, 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">
<div id="facebook">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="49.652px" height="49.652px" viewBox="0 0 49.652 49.652" style="enable-background:new 0 0 49.652 49.652;"
xml:space="preserve">
<g>
<g>
<path d="M24.826,0C11.137,0,0,11.137,0,24.826c0,13.688,11.137,24.826,24.826,24.826c13.688,0,24.826-11.138,24.826-24.826
C49.652,11.137,38.516,0,24.826,0z M31,25.7h-4.039c0,6.453,0,14.396,0,14.396h-5.985c0,0,0-7.866,0-14.396h-2.845v-5.088h2.845
v-3.291c0-2.357,1.12-6.04,6.04-6.04l4.435,0.017v4.939c0,0-2.695,0-3.219,0c-0.524,0-1.269,0.262-1.269,1.386v2.99h4.56L31,25.7z
"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
</div>
The problem is that the <path> in the SVG is just defining the shape of the black part of your icon.
If you want to make the "f" white, there are two options.
add a white shape behind the path so that it shows through the hole.
div {
background-color: orange;
}
<div id="facebook">
<svg id="Capa_1"
width="49.652px" height="49.652px" viewBox="0 0 49.652 49.652">
<circle cx="25" cy="25" r="20" fill="white"/>
<path d="M24.826,0C11.137,0,0,11.137,0,24.826c0,13.688,11.137,24.826,24.826,24.826c13.688,0,24.826-11.138,24.826-24.826
C49.652,11.137,38.516,0,24.826,0z M31,25.7h-4.039c0,6.453,0,14.396,0,14.396h-5.985c0,0,0-7.866,0-14.396h-2.845v-5.088h2.845
v-3.291c0-2.357,1.12-6.04,6.04-6.04l4.435,0.017v4.939c0,0-2.695,0-3.219,0c-0.524,0-1.269,0.262-1.269,1.386v2.99h4.56L31,25.7z"/>
</svg>
</div>
Split the path into its two parts: the outside circle, and the "f" shape. Make the "f" shape white.
div {
background-color: orange;
}
<div id="facebook">
<svg id="Capa_1"
width="49.652px" height="49.652px" viewBox="0 0 49.652 49.652">
<path d="M24.826,0C11.137,0,0,11.137,0,24.826c0,13.688,11.137,24.826,24.826,24.826c13.688,0,24.826-11.138,24.826-24.826 C49.652,11.137,38.516,0,24.826,0z"/>
<path d="M31,25.7h-4.039c0,6.453,0,14.396,0,14.396h-5.985c0,0,0-7.866,0-14.396h-2.845v-5.088h2.845 v-3.291c0-2.357,1.12-6.04,6.04-6.04l4.435,0.017v4.939c0,0-2.695,0-3.219,0c-0.524,0-1.269,0.262-1.269,1.386v2.99h4.56L31,25.7z" fill="white"/>
</svg>
</div>
Pick which one you prefer.
Well, you can't change the color of the f in the logo, as the black is all one shape, so it's actually cut out from the circle. What you can do, is add another shape that sits behind the logo in your SVG.
I cut down the SVG code you have:
SVG:
<div id="facebook">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="49.652px" height="49.652px" viewBox="0 0 49.652 49.652" style="enable-background:new 0 0 49.652 49.652;" xml:space="preserve">
<circle cx="25" cy="25" r="20" class="circle"/>
<path d="M24.826,0C11.137,0,0,11.137,0,24.826c0,13.688,11.137,24.826,24.826,24.826c13.688,0,24.826-11.138,24.826-24.826
C49.652,11.137,38.516,0,24.826,0z M31,25.7h-4.039c0,6.453,0,14.396,0,14.396h-5.985c0,0,0-7.866,0-14.396h-2.845v-5.088h2.845
v-3.291c0-2.357,1.12-6.04,6.04-6.04l4.435,0.017v4.939c0,0-2.695,0-3.219,0c-0.524,0-1.269,0.262-1.269,1.386v2.99h4.56L31,25.7z
" />
</svg>
</div>
CSS
#facebook {
background-color: red;
}
.circle {
fill: white;
}
Working fiddle: https://jsfiddle.net/disinfor/gvpeLn91/
The most obvious is of course to edit the SVG, another option would be to add a pseudo element matching the black circle.
This trick could be handy if one for example loads icons from a CDN or similar, where it is not possible to edit the SVG.
div {
position: relative;
display: inline-block;
background-color: red;
padding: 10px;
}
div svg {
position: relative;
display: block;
}
div::before {
content: '';
position: absolute;
left: 10px;
top: 10px;
width: calc(100% - 20px);
height: calc(100% - 20px);
border-radius: 50%;
background-color: white;
}
<div id="facebook">
<svg id="Capa_1" width="49.652px" height="49.652px" viewBox="0 0 49.652 49.652">
<path d="M24.826,0C11.137,0,0,11.137,0,24.826c0,13.688,11.137,24.826,24.826,24.826c13.688,0,24.826-11.138,24.826-24.826
C49.652,11.137,38.516,0,24.826,0z M31,25.7h-4.039c0,6.453,0,14.396,0,14.396h-5.985c0,0,0-7.866,0-14.396h-2.845v-5.088h2.845
v-3.291c0-2.357,1.12-6.04,6.04-6.04l4.435,0.017v4.939c0,0-2.695,0-3.219,0c-0.524,0-1.269,0.262-1.269,1.386v2.99h4.56L31,25.7z"/>
</svg>
</div>
The best way I found so far is to use the CSS clip-path property. It works with any transparent image.
img {
background: #ff1234;
clip-path: circle(50% at 50% 50%);
}
<img src="https://image.flaticon.com/icons/png/512/8/8730.png" width="150" height="150" />
More info about clipping and masking at https://css-tricks.com/clipping-masking-css/.