I search source of svg for socials [closed] - css

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed last year.
Improve this question
In custom html/css template I have instagram svg icon, defined as :
<div class="user_info__links">
<a href="#" class="user_info__links-btn user_info__links-instagram">
<svg class="icon icon-instagram" viewBox="0 0 21 21" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M14.8999 0H6.10017C2.73652 0 0 2.73652 0 6.10017V14.8998C0 18.2635 2.73652 21 6.10017 21H14.8998C18.2635 21 21 18.2635 21 14.8999V6.10017C21 2.73652 18.2635 0 14.8999 0ZM19.3594 14.8998C19.3594 17.3588 17.3588 19.3594 14.8999 19.3594H6.10017C3.64116 19.3594 1.64062 17.3588 1.64062 14.8999V6.10017C1.64062 3.64116 3.64116 1.64062 6.10017 1.64062H14.8998C17.3588 1.64062 19.3594 3.64116 19.3594 6.10017V14.8998Z"
fill="url(#paint0_linear)"/>
<path
d="M10.5 4.83984C7.37896 4.83984 4.83984 7.37896 4.83984 10.5C4.83984 13.621 7.37896 16.1602 10.5 16.1602C13.621 16.1602 16.1602 13.621 16.1602 10.5C16.1602 7.37896 13.621 4.83984 10.5 4.83984ZM10.5 14.5195C8.28364 14.5195 6.48047 12.7164 6.48047 10.5C6.48047 8.28364 8.28364 6.48047 10.5 6.48047C12.7164 6.48047 14.5195 8.28364 14.5195 10.5C14.5195 12.7164 12.7164 14.5195 10.5 14.5195Z"
fill="url(#paint1_linear)"/>
<path
d="M16.2422 5.57812C16.6952 5.57812 17.0625 5.21086 17.0625 4.75781C17.0625 4.30477 16.6952 3.9375 16.2422 3.9375C15.7891 3.9375 15.4219 4.30477 15.4219 4.75781C15.4219 5.21086 15.7891 5.57812 16.2422 5.57812Z"
fill="url(#paint2_linear)"/>
<defs>
<linearGradient id="paint0_linear" x1="19" y1="1.5"
x2="-1.16229e-06" y2="21"
gradientUnits="userSpaceOnUse">
<stop stop-color="#AF13A4"/>
<stop offset="0.302083" stop-color="#BF0985"/>
<stop offset="0.723958" stop-color="#F04815"/>
<stop offset="1" stop-color="#FED819"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="19" y1="1.5"
x2="-1.16229e-06" y2="21"
gradientUnits="userSpaceOnUse">
<stop stop-color="#AF13A4"/>
<stop offset="0.302083" stop-color="#BF0985"/>
<stop offset="0.723958" stop-color="#F04815"/>
<stop offset="1" stop-color="#FED819"/>
</linearGradient>
<linearGradient id="paint2_linear" x1="19" y1="1.5"
x2="-1.16229e-06" y2="21"
gradientUnits="userSpaceOnUse">
<stop stop-color="#AF13A4"/>
<stop offset="0.302083" stop-color="#BF0985"/>
<stop offset="0.723958" stop-color="#F04815"/>
<stop offset="1" stop-color="#FED819"/>
</linearGradient>
</defs>
</svg>
<span>{{ userProfile.instagram }}</span>
</a>
</div>
and it looks like : https://prnt.sc/26bfj3j
Now I need similar icons for facebook, twitter, 500px, linkendin, unslplash, telegram, facebook_messenger, viber,
whatsapp, youtube, vk.com
I did not find any similar icons in the app and I do now know a lot about svg format, but I suppose that the icon itself is defined in 3
<path d=
blocks, can be some commonly known source of svg and I can get all icons I got from there...
Any source for rest of svg icons ?
Thanks!


All of the icons you want are available in FontAwesome.
You can search through their brand icons here.
When you find an icon you want. Click on the icon. Then in the dialog that pops up, click on the "Copy SVG code" button ( </> ). There's also a button to download the SVG.
If you use these FontAwesome icons, make sure you satisfy their usage requirements.


you can just add for him a style property and give it width and height if its not work :
you can find s good icons from these website:
heroicons
flaticons
feathericons.
with these links you can search for your icons and just copy svg codes and paste it on you html code

Related

SVG with multiple path

How do play with the different fill variables inside an svg ?
I am trying like this but I don't get any results :
<img class="icon-shop icon-colors" src="#/assets/icon-shop.svg"/>
...
<style>
.icon-colors {
--color-default: #c13127;
--color-dark: #ef5b49;
}
</style>
icon-shop.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="..." fill="var(--color-default)"/><path d="..." fill="var(--color-dark)"/><path d="..." fill="var(--color-default)"/><g><path d="..." fill="var(--color-default)"/></g></svg>
Edit 1 :
When I try to use svg as a .vue file, I get a blank page and this console error :
Failed to execute 'createElement' on 'Document': The tag name provided ('/img/icon-shop.7de319ba.svg') is not a valid name.
edit 2 :
I am not sure how I should export the variable components
<template>
<svg
v-if="name === 'shop'"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path
d="M15.6 1.6H8.4c-.4 0-.7.3-.7.7v2.5h8.5V2.3c.1-.4-.2-.7-.6-.7z"
fill="var(--color-default)"
/>
</svg>
</template>
<script>
export default {
props: ["name", "var(--color-default)", "var(--color-black)"],
};
</script>
Component Call
<IconShopVue
color-default="#c0ffee"
color-dark="#c0ffee"
class="w-8 h-8"
name="shop"
></IconShopVue>

UPDATE on how to make this code functional
<template>
<svg
v-if="name === 'shop'"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path
d="M15.6 1.6H8.4c-.4 0-.7.3-.7.7v2.5h8.5V2.3c.1-.4-.2-.7-.6-.7z"
:fill="colorDefault"
/>
</svg>
</template>
<script>
export default {
props: ["name", "colorDefault", "colorBlack"],
};
</script>
<IconShopVue
color-default="#c0ffee"
color-dark="#c0ffee"
class="w-8 h-8"
name="shop"
></IconShopVue>
You should put your svg into a .vue file, copy your SVG code into the template section. Then, pass some props to your .vue component and interpolate the actual default/dark colors as you would do with any other kind of props.
<my-cool-svg header-color="#c13127" outline-color="#ef5b49" fill-color="#c0ffee"></my-cool-svg>
This will provide a lot of flexibility overall VS working with a classic .svg file.
This is how the .vue should look like
<template>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="..." :fill="headerColor"/>
<path d="..." :fill="outlineColor"/>
<path d="..." :fill="fillColor"/>
<g>
<path d="..." :fill="fillColor"/>
</g>
</svg>
</template>
<script>
export default {
props: ['headerColor', 'outlineColor', 'fillColor']
}
</script>

Why am I getting an unauthorized firebase storage error?

My firebase storage rules:
rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read: if true;
allow write: if resource.contentType == "image/svg+xml" && resource.size < 1 * 1024 * 1024;
}
}
}
I created an upload form on my website and when I try to upload the following file, I keep getting error 403. The error code is storage/unauthorized, but I don't see why that would be when the only requirement to upload is that it's an SVG under 1 MB. The svg is ~3kb.
function uploadFile() {
var storageRef = firebase.storage().ref();
var file = document.getElementById("file").files[0];
var metadata = {
contentType: "image/svg+xml"
};
var uploadTask = storageRef
.child("path/" + file.name)
.put(file, metadata);
uploadTask.on(
firebase.storage.TaskEvent.STATE_CHANGED,
snapshot => {
//do stuff
},
error => {
switch (error.code) {
case "storage/unauthorized":
break;
case "storage/canceled":
break;
case "storage/unknown":
break;
}
},
() => {
//... do stuff
}
);
};
<form>
<input id="file" type="file" accept="image/svg+xml" /><br><br>
<button type="button" onclick="uploadFile()">
Upload logo
</button>
</form>
Another test I performed was uploading the file directly to my bucket via the Firebase console, and then using the security rules playground to simulate uploading that file. It succeeded, as you can see from the screenshot:
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="100" height="100" fill="#FDFBF5"/>
<path d="M37.2519 7.67798C68.1999 45.25 36.5859 45.8 40.1559 66.912C44.5559 92.938 81.0719 85.168 77.5099 64.08C79.9379 78.452 69.5359 91.044 54.2799 92.2C39.0239 93.356 24.6799 82.64 22.2459 68.268C17.5799 40.694 59.9679 37.742 37.2519 7.67798Z" fill="url(#paint0_radial)"/>
<path d="M70.1816 67.0919C75.3376 57.2319 72.5996 33.3219 39.9136 8.35791C63.3136 27.9579 52.7896 46.9459 45.6656 57.1679C37.1176 69.4299 59.2836 87.9199 70.1816 67.0919Z" fill="url(#paint1_radial)"/>
<path d="M70.3116 67.2001C75.4616 57.3521 72.7336 33.4701 40.0796 8.53613C63.4536 28.1081 56.4116 46.5361 49.2996 56.7501C40.7616 69.0001 59.4256 88.0001 70.3116 67.2001Z" fill="url(#paint2_radial)"/>
<path d="M37.248 7.67798C37.248 7.67798 52.286 24.18 36.13 39.328C18.79 55.586 20.244 65.508 25.318 76.886C30.392 88.264 52.422 98.686 67.628 87.586C82.834 76.486 77.028 62.786 77.028 62.786C77.028 62.786 82.56 78.522 58.692 85.122C58.692 85.122 37.368 89.304 33.146 66.018C28.924 42.732 63.09 46.504 37.248 7.67798Z" fill="url(#paint3_radial)"/>
<defs>
<radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(49.7635 63.8117) rotate(175.684) scale(31.2973 29.7352)">
<stop offset="0.12" stop-color="#FFF200"/>
<stop offset="0.46" stop-color="#F7941D"/>
<stop offset="0.93" stop-color="#F15A29"/>
</radialGradient>
<radialGradient id="paint1_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(48.4093 43.2512) rotate(166.097) scale(27.7059 27.3118)">
<stop offset="0.12" stop-color="#00ADEE"/>
<stop offset="0.46" stop-color="#14A1DF"/>
<stop offset="0.93" stop-color="#222265"/>
</radialGradient>
<radialGradient id="paint2_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(322586 -45769.5) rotate(-115.837) scale(7112.64 16975.5)">
<stop offset="0.12" stop-color="#00ADEE"/>
<stop offset="0.46" stop-color="#14A1DF"/>
<stop offset="0.93" stop-color="#222265"/>
</radialGradient>
<radialGradient id="paint3_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(50.0191 50.0705) rotate(5.71) scale(36.224 27.5302)">
<stop stop-color="#F15A29"/>
<stop offset="0.3" stop-color="#F7941D"/>
<stop offset="0.57" stop-color="#F9ED32"/>
<stop offset="0.85" stop-color="#F7941D"/>
</radialGradient>
</defs>
</svg>

The answer was pretty simple, I wasn't calling request.resource:
allow write: if request.resource.contentType == "image/svg+xml" && request.resource.size < 1 * 1024 * 1024;

SVG CSS Colors style

i'm Elia graphic designer. It's a pleasure to be here with you. I've a big question. I need to do an animate svg. Actually i use Adobe CC Animate with a plugin. This is the code:
<svg xmlns="http://www.w3.org/2000/svg" width="550" height="400" baseProfile="basic" image-rendering="optimizeSpeed">
<g overflow="visible">
<path fill="#3C3C3B" d="M39.8 0H0v2.25h39.8V0z"/>
<path fill="#898989" d="M2.2 2.25v15.9l4.7 3.6v55.9h30.65V2.25H2.2z"/>
<path fill="#FFEC00" d="M26.25 21.2H17.5v4.5h8.75v-4.5z"/>
<path fill="#3C3C3B" d="M38.3 36.15H19.35v3.2H38.3v-3.2zM31.6 41.95H19.4v3.15h12.2v-3.15zM39.4 46.8H4.3V49h35.1v-2.2z"/>
<path fill="#575756" d="M17.85 70.95q1.8 1.8 4.4 1.8 2.55 0 4.4-1.8 1.8-1.85 1.8-4.4 0-2.6-1.8-4.4-1.85-1.8-4.4-1.8-2.6 0-4.4 1.85-1.85 1.8-1.8 4.35 0 2.6 1.8 4.4zM83.75 74v3.65H4.35V74H2.2v3.65h1.05v13.9H85v-13.9h1V74h-2.25z"/>
<path fill="#575756" d="M75.1 72H52.55v4.2H75.1V72z"/>
<path fill="#3C3C3B" d="M79.35 76.15H46.4v1.55h32.95v-1.55zM78.55 60.45q0-6.1-4.3-10.45-4.35-4.3-10.45-4.3T53.35 50q-4.3 4.35-4.3 10.45t4.3 10.4q4.35 4.3 10.45 4.3t10.45-4.3q4.3-4.3 4.3-10.4z"/>
<path fill="#1D1D1B" d="M71.7 68.35q3.3-3.3 3.3-7.9v-.05q0-4.65-3.25-7.9-3.3-3.3-7.95-3.3-4.6 0-7.9 3.25-3.25 3.3-3.25 7.9Q52.6 65 55.9 68.3q3.25 3.3 7.9 3.3 4.6 0 7.9-3.25z"/>
<path fill="#575756" d="M65.15 58.5q-.15-.1-.75-.35l1.75-8.6q-2.3-.7-4.55 0l1.75 8.55q-.45.1-.8.3l-4.85-7.3q-2.1 1.1-3.25 3.2l7.3 4.85q-.2.25-.35.75l-8.6-1.75q-.7 2.3 0 4.55l8.7-1.85q.05.4.3.8l-7.3 4.8q1.2 2.2 3.25 3.2l4.75-7.3q.5.3.75.35l-1.75 8.6q2.3.7 4.55 0l-1.75-8.55q.6-.1.8-.25l4.85 7.3q2.2-1.2 3.2-3.25l-7.3-4.8q.3-.4.35-.75l8.5 1.8q.7-2.25 0-4.55L66.15 60q-.1-.5-.3-.75l7.3-4.9q-1.1-2-3.2-3.15l-4.8 7.3z"/>
<path fill="#3C3C3B" d="M65 40.3h-2.35v7.95H65V40.3zM25.45 80.95H18.2v7.25h7.25v-7.25z"/>
<path fill="#59595B" d="M19 84.6q0 1.15.85 2 .8.85 2 .85 1.15 0 2-.85.8-.85.8-2 0-1.2-.8-2-.85-.85-2-.85h-.05q-1.15 0-2 .85-.8.8-.8 2z"/>
<path fill="#FFEC00" d="M25.85 64.75h-7.2v3.7h7.2v-3.7z"/>
<path fill="#9C9B9B" d="M65.2 61.85q.6-.55.6-1.4 0-.8-.6-1.4-.55-.6-1.4-.6-.8 0-1.4.6-.6.6-.6 1.4 0 .85.6 1.4.6.6 1.4.6.85 0 1.4-.6z"/>
<path fill="#868686" d="M70.6 82.75H57.05v2.4H70.6v-2.4z"/>
</g></svg>
Unfortunalty the colors are inside the path. I need the svg with color in CSS Style. If i try to generate a SVG in illustrator this is the result (look the part into the **):
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" baseProfile="basic" id="_x31__9_"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 450 450"
xml:space="preserve">
**<style type="text/css">
.st0{fill:#EAB38B;}
.st1{fill:#97B6C4;}
</style>**
<g id="_x34_">
<g id="_x32__6_">
<g id="_x32__5_">
<g id="_x32_">
<g id="_x31_6_1_">
<g>
<path class="st0" d="M114.9,145.6c-0.1,0-0.3,0-0.4,0l-0.8,0.1c-0.8,0.1-0.6,0.3-1.4,0.4c-1.6,0.1-3.2,0-4.8,0.1
c-1.5,0.1-2.1-0.9-3-2c-1.4-1.8-3.7-3.5-4.3-5.8c-0.2-0.9-0.6-1.9-0.7-2.8c-0.1-0.8,0-1.5-0.2-2.3c-0.2-0.7-0.9-2.1,0.3-2
c0.3,0,0.9,0.1,1.1,0.3c0.5,0.4,0.9,1.1,1.1,1.7c0.1,0.5,0,1,0.2,1.4c0.2,0.6,0.6,1.2,0.9,1.7c0.1-1.6,0-2.9-0.2-4.5
c-0.1-1.3-0.2-2.6-0.3-3.9c-0.1-1.8-0.3-3.7-0.4-5.5c0,0,0,0,0,0c0-0.3-0.1-0.7-0.1-1.1c0-0.1,0.1-0.3,0.2-0.4
c0,0,0-0.1,0.1-0.1c0,0,0,0,0,0c0.1-0.1,0.1-0.1,0.2-0.2c0.6-0.5,1.3-0.5,2-0.2c0.1,0,0.1,0.1,0.2,0.1c0,0,0,0,0,0
c0.1,0.1,0.1,0.1,0.2,0.2c0.1,0.1,0.1,0.2,0.1,0.3c0,0.2,0,0.4,0,0.6c0.1,1.3,0.2,2.5,0.2,3.8c0.1,0.9,0.1,1.7,0.2,2.6
c0.1,0.8,0.2,2,0.5,2.3c0-0.2,0.1-0.5,0.1-0.7c0-0.2,0-0.5-0.1-0.7c0-0.4-0.2-1,0-1.5c0.2-0.8,1.5-1,2.1-0.6
c0.7,0.4,0.7,1.3,0.8,2c0,0.2,0.3,0.9,0.4,0.6c0.2-0.6,0.2-1.7,0.5-2c0.4-0.6,1.4-0.7,2-0.3c0.9,0.6,0.8,2.1,0.9,3
c0.2-0.2,0.1-0.8,0.3-1c0.2-0.3,0.7-0.5,1-0.5c1.5,0,1.4,1.8,1.5,2.9c0.3,1.9,0.4,3.8,0.4,5.7c0,0.9-0.1,1.9-0.2,2.8
c-0.2,0.8-0.7,1.5-0.8,2.3c-0.1,0.7,0.1,1.4,0.1,2.1c0,0.4,0,0.6,0.1,0.8C115,145.5,115,145.6,114.9,145.6z"/>
<polygon class="st1" points="116,144.6 104.5,145.2 105.1,148.4 116,147.3 "/>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
I'm looking for a solutions with a converter or something else.
Thank you so much!

Filtering click element event with matching css selector to an object

I've ran into a problem and can't seem to get the GTM to register the event specifically.
Here is how the HTML looks like for the element that I need to register when someone clicks on it.
<div class="targetDiv option option-hoverable">
<div class="shape">
<svg width="140" height="140" viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<title>Shape + Shape + Shape</title>
<desc>Created with Sketch.</desc>
<g transform="translate(0 0)" sketch:type="MSShapeGroup" fill="none">
<circle id="Shape" fill="#CFDF80" cx="40" cy="84.434" r="40"></circle>
<circle id="Shape" fill="#FDE9E8" cx="80" cy="40" r="40"></circle>
<circle fill="#E2506E" cx="100" cy="100" r="40"></circle>
</g>
</svg>
</div>
<h3>Product Title</h3>
<div class="actions">
<a class="button button-subtle button-toggle" data-colors="tender" data-toggled="Select" href="">Select</a>
</div>
</div>
I can't get the Click to register on the outter DIV click, it registers wither the button click or the click on shapes. I need it to register on the DIV with class targetDiv.
I'm getting correct Click triggers from other places, so listening isn't a problem.
Right now the trigger is set like this:
Trigger Type - Click - all elements
Trigger fires on some clicks.
And the conditions are:
Click Element -> matches CSS selector -> targetDiv

This
Click Element -> matches CSS selector -> targetDiv
wants to match a <targetDiv> element, which is not present in your html code.
Try writing a dot before the classname, since that is how you can write a css selector for a class:
Click Element -> matches CSS selector -> .targetDiv

SVG looks like it has opacity in chrome when it hasn't, how to solve it?

There is a bug that I can just see in Chrome, it appears that svg has opacity:
And this is on safari:
So I don't know how to solve this, I tried with opacity but not, also checking the fill-opacity in the SVG.
Here is the pen with the svg code embed (try it with Chrome and Safari):
http://codepen.io/jepser/pen/reNOJZ
This is the example exported by Illustrator, but I also tried with Sketch:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.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">
<svg version="1.1" id="Layer_1" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="140px" height="24px"
viewBox="0 0 140 24" enable-background="new 0 0 140 24" xml:space="preserve">
<title>Social media</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" sketch:type="MSPage">
<g id="Footer-Public-Website" transform="translate(-955.000000, -364.000000)" sketch:type="MSArtboardGroup">
<g id="footer-link-col4" transform="translate(952.000000, 179.000000)" sketch:type="MSLayerGroup">
<g id="Social-media" transform="translate(3.000000, 185.000000)" sketch:type="MSBitmapLayer">
<image overflow="visible" enable-background="new " width="48" height="48" id="Bitmap" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABGdBTUEAA1teXP8meAAABKZJREFU
aAXtWm1sFEUYnq+9bYuFllqrZ9TWVE1MjBg/fiGCYDQQlIINrSZnUctdaU+shZLww79NWo2RNnIW
otVC1RhPExQSScBoiCE2NWCIUdFUFH+ghkIt9m7nwx0uW5d1b2+ue3e2yW3Sm5nnnXnf5/242d3r
QGBekUjkeqBX9mJCl0OgBSU2Vy8BjN8YJZ+BxPnuWCx2FkryUF90AhNcNVdJu/FilP0pEhfuJKnI
w3lFXjokA05BZS+SZePm4XzAJHc012veK5CSO/KaMB9kRQf+7ywVM1DMgM8IFEvIZwB9Lye+NQDA
KaXHiSAYaOC+TPo4N6Y4g0cFED8KLKqwwKsxxoszrUsn9+UAZXz45zN/7DwU3/urNBDZsq2DlAb6
3YwxzpOC8Z7YwQ97wOnTCWvOw42Ni+uCdcOEkNUWlk0LO7p2imwWyLmcGX8bjLfu6X95v3Nt29Yd
X5sPWkvsuIz6pb+mVgztee0rO271G0Obb6yuqPweaVi3MNU26y+xwcHZqUTifjfy0igT/B27ccMw
hGGwp9KRl3Pff3vwjIDiqH2daj+rEjJL5pfJixeWj7yx+6d0BpIG/TKgaTNiDeHPB3b1fTADpOmY
ZTCRRuQJK2eAM/b7xYnzK73IS0tjx06NmVFnltVpA8af2dL5SOOm6O0W5tYSiK5zwzNh6g4I8dHI
0Os/PNESvqU12vWkqfjfMNusnDz56RTC6DsLwhj0lJaWHqquWHAi1Np+q4Xb29ra2hIOWMYdzL7G
6is7IIR4tm1r97vlCxd+qwf0fe2R7iZLyX9aDk5ZmKbBMtlHCJGSkrKVFm5vlzU0LEVYK7Vjqn1l
BzSTCSZko9liqZwHUCidEbN+xtxkQrBzbngZ1R5zw1UwZQecysyUr2hoCLm+SyeTyWPO+ZTTc4c/
jn/ixJesW1cBAWpx4qrjWTsgM1FzU3Ctm6Gh3a8cN3fPS3YZp/zF8fHxaTsm+3ffXN+GA+gqJ646
nrUD0gARMF3qkwjxmX3dSIixwf6X9jpJrW1uvjrAcJcTz2bsywGO6ENyB3EzSJkRl7gh+HQiOdli
dme2VonLK3hNXZ/f36N8OYCQtmDVmvUPpuhc+Xn4QHyEGvQLnkxuHBoc+OZKKQChzs5VGgEtTjzb
cVZ3YjfliOBHTfygUybrPbard5kTl+OmpqeD5UzfB3yFL6XZtwozivKLDFPqlD61yprq96CGapRm
Z5jk2wH541IkGr03gx1LDCMd3W+Zdb/UAvy2vh2QBATSH1chEn5u+6tEJ80qc1Xn5MQBCIl8rPDS
BdujOwbMe0dUlZjqPC+jqjoAweiGzdFtra4L6uv18Avbh2EAt7vKfYI5cUBygAT2bWrrfMDOR/7v
IbJmwxENavLpNS/XrF4p0zGR772MszcFFUcYBrfpCD/v54U9nR077vs+YFeGEQqYf2FAQNiO57Of
sxLKJ0kv3UUHvKJTCFkxA4WIspeNYga8olMI2fzPgDx7UIhI5cOG5I4uH5zIh/YC6JTckTz1IQ9O
FMBeTk1c5mxyx6Ojo5P33HXHfo5KroWIVkGAy3NqKcfKUsdt0AGQmNggj9v8AxmvdNB0EWB4AAAA
AElFTkSuQmCC" transform="matrix(0.5 0 0 0.5 116 0)">
</image>
<image overflow="visible" enable-background="new " width="48" height="48" id="Bitmap_2_" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABGdBTUEAA1teXP8meAAAAcNJREFU
aAXtWr1KxEAQ3r/jbESOsxB9BhHBB7DyBXyJgHaCoA9gcaCVQgSLaxR7myt9gDTWNtecnXjhtAi3
m5i5a8KSHDEbJ1nYVJnJzs433zfZ+2EoSS/P83ZItzfgQh5S0tkGX1uvhMw/lBSvJPo6931/QgE8
7W68ccH7bQWdh0tJ9ZlE4Z5YMk+tAg8FAeGS9AYM2iavQht8gJ21vedXEQnY2aoFNjxzBTStklPA
KWDIgPUtJAwJqBQeKzVVUl6E3z+j56E/ztvk9OwyyfPrPvQC5lKOZ2F49DS8f9fBVLHRWyhl/qQu
8FAwagHwDfLh7mZUhemiGNQCCE0mKZC4CEwVP2oBKfLafyyhvsQdLjaLWC576ujxqAroyeuwXQF1
sGiyB63ae2WT3l5f0bJrs+vK4nItlGWtiXunQBOsZ3Nar8C/n0JZtuC+6FQqe+ro+1mvgCtAlxTb
dgpgM67ncwrojGDbTgFsxvV86J/EOgBT27WQKYOm8U4BUwZN4+1XAGYPTFloKh6ws8XgRFMIDPMC
dgZTH/C3t+Fe6OELzCl2HgTB7GB/9zFma1uUyT4lfB0dzR8SLsdt2AuJpscwbvMLNKCBir53MSAA
AAAASUVORK5CYII=" transform="matrix(0.5 0 0 0.5 29 0)">
</image>
<image overflow="visible" enable-background="new " width="48" height="48" id="Bitmap_3_" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABGdBTUEAA1teXP8meAAABHBJREFU
aAXtWl9sFEUYn3+7e9cc1vaaomCURBIJhCAUCaQxnErQFx+MOdIHrKUJ7fEntVegaRoeiUmr/KkK
Xs+GVBJJpW8aEzE+EBLhgUYgEPBBEmNi06iIbWPgbmd2nGktXc7bvZm7W22T2+R638z3m9/3/b6Z
m9vbDgTiSiQSy4FV048JjUFgLJN9C/XiwB5nlFwAmXvdqVTqFyiTh1b1dUxwdKEmnS8vRtldnplc
R2YrDxdV8lKQLDgFNf1ILpt8ChdDn8wdLfQ171dImTvyAywGX0XA/z1LlRmozECJFSAljtcaThm7
wTn7GnAwAZhZh0LONgzQC1okOeCiBFDKzxIHUmCC5hy+vE3Hsf+izOlMf3B0KAfQu3vfwR3IQCcN
TOoooxe5w68ijJoxwjU52LxNuP9AL8/r8egU9yDXPh7oWy/dbV0H+kxodXtAZ7qdrDOVvT+1eWjo
1G0v3KvxeO0zNUvr0+mPfpCYppbEirpo7R1hFtxkCgJygzLmnJnrSx872mNTMDzXzvdOAevxS16O
OT86+sdc8rI9/dvUpFhuTNqFLm0BU7/f/dxFygcH3m21H2R7bNv+V0A7w79Pf/heyoVXMpc/92QP
wdhQAWsJEEX5cWTk9HgOMR88+X7fg6y9lVJ26REft8+JttYSbd3b9ZJYlgcf4fFpaH2IOeVXvLg+
TZ34Tvgam5PJbSFm7EQcb6cOvemF9+o3TWNA+JQLqyWAYednr8Bz/WeOH/9W2PIlLy3+pqbWZWLp
rJ0dqvZXWamkQxTcU6N9iKIPLQXDWhJW2jrdVFoCIKZaFXUHUrGxYdWr4NwYLQEckmfdg8ttIwSC
FYAgaih30m4+jPFqd1vF1poBCNHqhoaGKhXiYjAIwld0x2kJQAiRjY2xnbpBVPCxWCzCAdykgnVj
tATIgQYxk+INuknKYa9ZtekN1W9fdzxtAQDCVe0dhzrcJOWwHQt2FcOjL0BEQRj3t+zeW9J9vDvZ
txKdL4sHVc+7+1TtogRghEyrKnIu3tz2tGogH5wRCVnHfPy+rqIESEaDkBXR6ONX3k50NvpGKOBs
f+fQYbF9risA83QXLcB27GnCyE8GDhf93SDFi19evZ7ZKTi0bw04db74dXyifXR0eEKB3xOyq23f
BjNsfSW3Zk+QgkN7BjIse7bU5Fv2JF8MhSPfGAhXK+ToC9EWECLmHrBypeXL6u0kbR3dRyJV4Qvl
+n+E/vRhtLX9tfgl276///Tgicveuc57ntqyJfz65tgOwJ1kKR/YecZ5S/upxPxQACillynFIzQ7
eXH4k1O3hC/7jx/G4y1Lq+trN4iEt+s8JnHzq9glCXAHED/qOeZ4mhPOxM4i17b28nTzqdr6S8iD
2TAMeX/0mIc7sO7/pEqBZS+IKwKCrK4Kd2UGVKoUJGbxz4A8exBkhYLklrmjmYMTQUYJkFvmjuSp
D3lwIsA4gVDP5Cxyx2NjY9Mb16/9zEGhJyCiUQjwkkAilol09rgN+hJk/nxTHrf5Gw17R+AeyJMq
AAAAAElFTkSuQmCC" transform="matrix(0.5 0 0 0.5 0 0)">
</image>
<image overflow="visible" enable-background="new " width="48" height="48" id="Bitmap_4_" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABGdBTUEAA1teXP8meAAAA8pJREFU
aAXtWl9IFEEcnp1ZzzIsLSzLHiR6sCDKCEIKuh6KyqIoKqiHCiKM1B6CInsuy5BCkwykEOoxlKyM
/kA91EEanVf0B4J8yJREMi6Vu5vZaX8nJ8f2m1v3/sgd3MCyM9/vm2++38zc3rKMRsxSVVVVQnIL
G5jO3RrJWQJYuhZJQj8F11+SwO+zra2tAxqY13Ln9TGdLUhX05gvwcWIDPxZrU/OvJZR5iEhmHBO
ChsobBssw0zAwDtN9z0fayLBO41FyISYni4mbzRe0mJ5qT5TJ7F4xq9ANgFsWWcSy67ATM42NlZ2
BbBZmUlMUz1fZ9JEImNlt1Ais5eMvtkVsM6iIUIToVComQf9679/6Z8PF9QBg5iVn2g7qS9zhhDD
Y4HA9vabTe8sxt6a7bdHTta2z8ml3ZSxIks87mZSt1Bwgh9GzE+ZgxhwpoAkVJKWAOf8cdutxmd2
noADXDvedOPKLaR6P68+fb6D6Noe6wBC8NtWTNUGrq7rO6xxaYQ6Wq5d3WvFoa36v3K8AoLKcmyA
oZHBVxiOYSquQdhajB8Lc5yAJmQxJtjV0+PHcAz74PH8xXBDI4swPBbmOAHJyDgmeHTz1hUYjmHu
LTvKMJxK6fgx6zwBKQewwV2z83ZjOIapuFKhjWlEMOcJUNkX6Rx9Zxqr2b7/mO3zHTjAje4bqUuF
diSO3R0noI2z+5gQfCkrLSnqqKw8VIjFAYMYcFSfMVXaKj3AlY9RVaeHfa+e7FznHtRd2mIrhzF9
Q2lZyccTy881B8f9T7zDP/uBs6ZoSakrL38bNWgtY//3Aw4PykHQhrqT4jiBHx7PBFm/qY4Q7Q42
EHwtc+mk3jW3oH7j3AKMgmNM1oW18agSdbyFQKn1+uV2wbnj2VK5EEJ0g6YqHguPKwFTUPp6vxww
B0Z/0LEGtMZAw9fz+SBoWmPTacebAHn9+oHf0//VbRp4NJ2BMA70BQ3QwuLTwRz/BqJFvZ2do15C
dh0/db5Gd4kLOtUXRsdVdW7wXzzILra1XGk2OXHNfEQ77hWICICBtpb6pjcvvMvMeq0IGc+FYQSj
4uEqYBADDnChj1lPyDwIJ7QCIBApPt/TMfOCGW1eWlEx272yvMSVmxN+bwoGQkMvP70fiOcpE9FX
3ZOWQPQAYPSux/PNxOBKaUnGFkqpQTvxbAJ2M5TqeMavQPbbaKq3iJ0+hbMHdqR0jYN3Gj44ka4O
bXyBdwqnPuDghA037cJhz6Z31tvb619XvuqeQWcVa5Qv0AjLTzu3UYYmj9vQLhIY3QfHbf4BU+Bv
zcPEpP8AAAAASUVORK5CYII=" transform="matrix(0.5 0 0 0.5 58 0)">
</image>
<image overflow="visible" enable-background="new " width="48" height="48" id="Bitmap_5_" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABGdBTUEAA1teXP8meAAAA5hJREFU
aAXtWk1IVFEUvn9vRsiIGKHQRbUNQsJoPdtWJdFS24QajdqPPxC1DdLCMiMFNyWtgixauJ2toQtX
0soClQqHilzovPvTPW/miUzzc9574szAPEfevHvP+b7vnHvfuW8elxJ79PX1tZH48TEuZJISpxXa
avUwxN1UUqTJ7q+R6enpDQriafzYChc8Uauii+lSUmXM7p92kcs8rSvxEBAkXJLjYwymTbEI66EN
tLNan/PlEgnaWTmDeuhrBFDtUWqMQGMEImagMYUiJjCyuwiL4Lqu4oRJwrUkkisjjKKGSKqpVoZq
HpNGascAvmAuVVlBOTXM+6NEUEk5ERZCMaGIFo7j8DBaAgcglZ778W3zzvz8m0wYwlI+nZ3diROn
WicEZ12lbIq1BwrAldnxmedPRooBRW3LJ6S7d3DouyNiw1g89E2slFqw4kexwGHtgAO4sP7oALYy
mVsW1JvTWPCQdibPhXJHBSCVct/Nza6hEA/ACLiAEwOFCoBRncWA5W2gmqBwy2FiOVE3sSEMHUDq
3n0JwrRLPq6t/0wtvJ9dLye0VF+e80ipfr8dlSlDDGo4fVA4M4dcPt3WstrTP3TbXgau8VhOVACc
GS+r+wVivvMYa47FYhOpu6OL128OdGB8fBssJyoALe2KG+WgvKPJiS/2Dgw/SyaTzRgoLCcqAMLs
Q0LEAx4V7P/g2faLqz2pkSsV4ZCcuAAqsgUz0GYnckJ8RlQVItpQ3yHsGR7+CKUvvqx8fphOp7cr
4gAnIr2oAJjQKLuSooxa3nF3e1+/mlwuaVPQkeOsXLxQwpSmKLsCDURl9bam6sHM5PiU7VOF/eWu
gVMc1AhQQp1yZEX7pPnwdWOrP+xCxgyNFcUtaERllhKNAgPsqaePABNuUg3XoQ+qbdIqTyHEIFkl
hqEDsIJhqkQTDwBITlQAgnPnWteNM6GzGdARuIAT44YKAIBaEomX9hS5nCJE0TwXwjTAYy/n/JL9
ufcYhRrBCDiACwtB7eNvoFWx1n7UBw7Az8x/r1W4kXZ+KdRrFVteqLJrSzVeq/gB5N/j2DrH42R/
jbItudrsEGfvDnOI8GzsiuIDeBXSGnifyuXSdys871EUdtTLdSOAao9UYwQaIxAxAwz2HkTEqJo7
aGfexomqSYhGDNoZ7PqAjRPRoA7f29NstfOlpaW/F86fe6tZ00nKZIISfvTw5eAZc9tt2Cey+/sq
bLf5B4Z7U99vg8qhAAAAAElFTkSuQmCC" transform="matrix(0.5 0 0 0.5 87 0)">
</image>
</g>
</g>
</g>
</g>
</svg>

I recompressed your PNG images and the problem went away. For example:
<svg width="200" height="120" viewBox="0 0 200 120" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="0" y="0" width="200" height="30" fill="#08f"/>
<rect x="0" y="30" width="200" height="30" fill="#0cf"/>
<rect x="0" y="60" width="200" height="30" fill="#fa0"/>
<rect x="0" y="90" width="200" height="30" fill="#f50"/>
<!-- Original image: -->
<image x="30" y="36" width="48" height="48" xlink:href="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABGdBTUEAA1teXP8meAAABKZJREFU
aAXtWm1sFEUYnq+9bYuFllqrZ9TWVE1MjBg/fiGCYDQQlIINrSZnUctdaU+shZLww79NWo2RNnIW
otVC1RhPExQSScBoiCE2NWCIUdFUFH+ghkIt9m7nwx0uW5d1b2+ue3e2yW3Sm5nnnXnf5/242d3r
QGBekUjkeqBX9mJCl0OgBSU2Vy8BjN8YJZ+BxPnuWCx2FkryUF90AhNcNVdJu/FilP0pEhfuJKnI
w3lFXjokA05BZS+SZePm4XzAJHc012veK5CSO/KaMB9kRQf+7ywVM1DMgM8IFEvIZwB9Lye+NQDA
KaXHiSAYaOC+TPo4N6Y4g0cFED8KLKqwwKsxxoszrUsn9+UAZXz45zN/7DwU3/urNBDZsq2DlAb6
3YwxzpOC8Z7YwQ97wOnTCWvOw42Ni+uCdcOEkNUWlk0LO7p2imwWyLmcGX8bjLfu6X95v3Nt29Yd
X5sPWkvsuIz6pb+mVgztee0rO271G0Obb6yuqPweaVi3MNU26y+xwcHZqUTifjfy0igT/B27ccMw
hGGwp9KRl3Pff3vwjIDiqH2daj+rEjJL5pfJixeWj7yx+6d0BpIG/TKgaTNiDeHPB3b1fTADpOmY
ZTCRRuQJK2eAM/b7xYnzK73IS0tjx06NmVFnltVpA8af2dL5SOOm6O0W5tYSiK5zwzNh6g4I8dHI
0Os/PNESvqU12vWkqfjfMNusnDz56RTC6DsLwhj0lJaWHqquWHAi1Np+q4Xb29ra2hIOWMYdzL7G
6is7IIR4tm1r97vlCxd+qwf0fe2R7iZLyX9aDk5ZmKbBMtlHCJGSkrKVFm5vlzU0LEVYK7Vjqn1l
BzSTCSZko9liqZwHUCidEbN+xtxkQrBzbngZ1R5zw1UwZQecysyUr2hoCLm+SyeTyWPO+ZTTc4c/
jn/ixJesW1cBAWpx4qrjWTsgM1FzU3Ctm6Gh3a8cN3fPS3YZp/zF8fHxaTsm+3ffXN+GA+gqJ646
nrUD0gARMF3qkwjxmX3dSIixwf6X9jpJrW1uvjrAcJcTz2bsywGO6ENyB3EzSJkRl7gh+HQiOdli
dme2VonLK3hNXZ/f36N8OYCQtmDVmvUPpuhc+Xn4QHyEGvQLnkxuHBoc+OZKKQChzs5VGgEtTjzb
cVZ3YjfliOBHTfygUybrPbard5kTl+OmpqeD5UzfB3yFL6XZtwozivKLDFPqlD61yprq96CGapRm
Z5jk2wH541IkGr03gx1LDCMd3W+Zdb/UAvy2vh2QBATSH1chEn5u+6tEJ80qc1Xn5MQBCIl8rPDS
BdujOwbMe0dUlZjqPC+jqjoAweiGzdFtra4L6uv18Avbh2EAt7vKfYI5cUBygAT2bWrrfMDOR/7v
IbJmwxENavLpNS/XrF4p0zGR772MszcFFUcYBrfpCD/v54U9nR077vs+YFeGEQqYf2FAQNiO57Of
sxLKJ0kv3UUHvKJTCFkxA4WIspeNYga8olMI2fzPgDx7UIhI5cOG5I4uH5zIh/YC6JTckTz1IQ9O
FMBeTk1c5mxyx6Ojo5P33HXHfo5KroWIVkGAy3NqKcfKUsdt0AGQmNggj9v8AxmvdNB0EWB4AAAA
AElFTkSuQmCC" />
<!-- Recompressed image: -->
<image x="122" y="36" width="48" height="48" xlink:href="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAC7ElEQVR4nOyay2sTQRzHt0pV8CLq
SUWCVA+CRRC9iRfxBUqrRNqKMU27u7Pvnc2+EhA8exL1IF4E33jxoOLBiygKHsST/4AoqOjFt/ic
X9qYtM6kTXc208AOfC/tb9vPZ/Y3u7PJShIZCKHVyKlcMcrBK7Nc/TOfA4zACsxSHV5zoneiwdoN
MNckwEY0zFwD7FI3tA0rwC6JhkiaTEB0MgHRyQREJxMQHR4Cv5ATPjbt6pPZ1Os4+ITs8JZqB6cU
7F/S3Oi9MAHkxhf3HhxfI00OpPsmq1bD8XcCfkLq61ssNY3d+fxyMgF3Oiqgu8EX2SofkSiD7BKf
0Wa9KOtbafUw8gVlrW5H3zoioOLqy2OavYUFo9hBOKXeDn7LpneIVd8QD++mLkBa5sVISVvXCqSo
4e1TjnPj+zPBwyBtdC1VAd2N3o4U1fUzgfT371pKZv1n/bhxo2KP6XhPftTa2Oo4EE1VgMzQefhH
IDHZ/70sGA1HzxstVPk8sQ7iHwXZ2ECrz+VyS2BdpSoAvUz69Hp9dg0UHmUKONEN2t9QrECj1Rcw
3jkX+LbXQHM0O77HElCcKKYdw1rMyArPdFwAzsTgYGEFDei/hQwtiMM30CrTazcPDCzTrPhjxwVq
UG5cZJyERfXeb7SPr9IKxzy/koQh2VbCqdxktRHZItz+d7bMylPyo4XTa/YPD69M+pFOIgG4w9La
AoZseaUavBd/LSrmJlqN6lQvJJrAxGegDNd5bx8NDsTI3ucBWbgHaL9PcuXhKqA4wTlWG7HG0FBp
lWHHr+eFQO3DJUnqaYO/l/T9Qx7wXAQgyLK2zRK+B5nhVV7w3ARUxz85G3py7zjNE57fGSC7VMK3
oNXMG1Z0ljc8NwEI60YFT2CqF1xOA56rgIqDD6Ma3tHMPvHFSfQoLXiuAhB47oXLqmz4h0u2fzzp
A3vHBUQkExCdTEB0MgHRyQREp/u/6O76Vw26/mWPxq6xO1+3+QsAAP//AwCs+d8+UC5pPgAAAABJ
RU5ErkJggg==" />
</svg>
The icon on the left uses your original data, and the one on the right was obtained by loading the PNG image into GraphicConverter and re-saving it without changing anything. I've added some coloured bars in the background to show that there is nothing wrong with the alpha channel. Your original icon is just lighter.
This is what the start of your image file looks like:
0000000: 8950 4e47 0d0a 1a0a 0000 000d 4948 4452 .PNG........IHDR
0000010: 0000 0030 0000 0030 0806 0000 0057 02f9 ...0...0.....W..
0000020: 8700 0000 0467 414d 4100 035b 5e5c ff26 .....gAMA..[^\.&
0000030: 7800 0004 a649 4441 5468 05ed 5a6d 6c14 x....IDATh..Zml.
0000040: 4518 9eaf bd6d 8b85 965a ab67 d4d6 544d E....m...Z.g..TM
0000050: 4c8c 183f 7e21 8260 3410 9482 0dad 2667 L..?~!.`4.....&g
0000060: 51cb 5d69 4fac 8592 f0c3 bf4d 5a8d 9136 Q.]iO......MZ..6
0000070: 7216 a2d5 42d5 184f 1314 1249 c068 8821 r...B..O...I.h.!
0000080: 3635 6088 51d1 5414 7fa0 8642 2df6 6ee7 65`.Q.T....B-.n.
0000090: c31d 2e5b 9775 6f6f ae7b 77b6 c96d d29b ...[.uoo.{w..m..
Unlike the re-saved file, yours contains a gAMA chunk with a value of 0x00035b5e (which represents a gamma value of 2.2). Based on this gamma value, Chrome is changing your original RGB colour of (108, 115, 102) into (173, 178, 182), which is much brighter. For reference, the numbers work out as follows:
gamma = 0x00035b5e / 100000 = 219998 / 100000 = 2.19998
r_display = 255 * pow(108/255, 1/gamma) = 173
g_display = 255 * pow(115/255, 1/gamma) = 178
b_display = 255 * pow(122/255, 1/gamma) = 182
To fix your problem, either export your PNG images without gamma information (highly recommended), or try to set the gamma value to 1.0.
(Note: As I'm sure you'e already aware, you would save a lot of bandwidth by storing these icons as SVG vector data instead of PNG files.)

Just for someone looking for the same question.
I had the same problem here and solved it changing the SVG code (fill).
For some reason, I was seeing the image in Explorer and Inkscape fine (all black, no opacity), but the code was
fill="rgba(24, 90, 50, 0.28)"
Which was some kind of green and transparent, so I changed it to:
fill="rgba(0, 0, 0, 1)"
And it worked just fine (maybe you will have to clear your cache files).

Resources