How do I auto-scale this svg height? - css
I have the svg below.
I include it in my file and I try to scale it to 100% of it's containing folders width. I want to set the height to auto. Now it has a set height.
.logo {
width: 43%;
margin: 0 auto;
display: block;
height: auto;
}
.logotype-icon {
width: 100%;
}
<!doctype html>
<html lang="se">
<!-- svg -->
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol viewBox="0 0 192 33" id="icon-logo">
<title>Group</title>
<desc>Created with Sketch.</desc>
<!-- Generator: Sketch 3.3.2 (12043) - http://www.bohemiancoding.com/sketch -->
<g id="icon-logo-Page-1" stroke="black" stroke-width="1" fill="black" fill-rule="evenodd" sketch:type="MSPage">
<g id="icon-logo-Group" sketch:type="MSLayerGroup" fill="#FFFFFF">
<path d="M42.7416189,22.7800784 L50.9622425,13.0373333 C51.2192504,12.740549 51.5618268,12.4440784 51.7901102,12.2373333 L46.0258772,12.2373333 L45.7978961,14.5171765 L43.1153386,14.5171765 L43.343622,9.80847059 L55.6715339,9.80847059 L55.6715339,12.2975686 L47.6223496,21.7422745 C47.3097071,22.1256471 46.9671307,22.4211765 46.596737,22.7778824 L52.8746835,22.7778824 L53.1026646,20.408 L55.785222,20.408 L55.558148,25.2054902 L42.7416189,25.2054902 L42.7416189,22.7800784"
id="icon-logo-Fill-1" sketch:type="MSShapeGroup" />
<path d="M68.2945512,15.7918431 L68.2945512,15.4938039 C68.2945512,14.219451 67.4969197,11.8818824 64.7856378,11.8818824 C62.0743559,11.8818824 61.1597102,13.9261176 61.0463244,15.7918431 L68.2945512,15.7918431 L68.2945512,15.7918431 Z M70.7234268,24.4980392 C69.6941858,24.9410196 67.7249008,25.563451 65.4986079,25.563451 C60.5888504,25.5333333 57.6786142,22.3935686 57.6786142,17.5694118 C57.6786142,13.0084706 60.162822,9.45552941 64.9579843,9.45552941 C69.4081512,9.45552941 71.6634709,12.8318431 71.6634709,17.5982745 L71.6634709,18.0415686 L61.0463244,18.0415686 C61.0741417,21.0348235 63.1867465,22.9592157 66.1263118,22.9592157 C67.9819087,22.9592157 69.6074079,22.4547451 70.8933543,21.774902 L70.7234268,24.4980392 L70.7234268,24.4980392 Z"
id="icon-logo-Fill-2" sketch:type="MSShapeGroup" />
<path d="M73.3343244,22.7800784 L75.0184819,22.7800784 L75.075326,12.2373333 L72.9926551,12.2373333 L72.9926551,9.80972549 L78.2715969,9.80972549 C78.2715969,10.8462745 78.1860283,11.9141961 77.9858646,13.2164706 L78.0436157,13.2164706 C78.6432,11.2318431 80.2989354,9.45552941 83.2672252,9.45552941 C86.7483213,9.45552941 88.4327811,11.7353725 88.4327811,15.4072157 C88.4327811,17.8649412 88.3469102,20.3214118 88.3190929,22.7800784 L90.2593512,22.7800784 L90.2593512,25.2076863 L83.4371528,25.2076863 L83.4371528,22.7800784 L85.1216126,22.7800784 C85.1494299,20.5303529 85.2362079,18.248 85.2362079,15.9982745 C85.2362079,13.8373333 84.2650205,12.2373333 82.2391937,12.2373333 C80.0419276,12.2373333 78.385285,14.0440784 78.3296504,16.9171765 L78.2150551,22.7800784 L80.2130646,22.7800784 L80.2130646,25.2076863 L73.3352315,25.2076863 L73.3343244,22.7800784"
id="icon-logo-Fill-3" sketch:type="MSShapeGroup" />
<path d="M101.929323,11.5264314 C101.187024,11.2597647 100.188019,11.0517647 98.7617764,11.0517647 C95.022463,11.0517647 93.2258268,13.7460392 93.2258268,17.5970196 C93.2258268,21.4467451 95.022463,24.1422745 98.7617764,24.1422745 C100.81663,24.1422745 102.213846,23.755451 103.21406,23.2534902 L103.21406,24.7656471 C102.244082,25.2076863 100.673008,25.563451 98.7049323,25.563451 C93.9375874,25.563451 91.6269354,21.9502745 91.6269354,17.5970196 C91.6269354,13.2428235 94.0234583,9.63090196 98.8473449,9.63090196 C100.959043,9.63090196 102.186331,10.0164706 103.299931,10.4296471 L103.299931,14.1316078 L101.929323,14.1316078 L101.929323,11.5264314"
id="icon-logo-Fill-4" sketch:type="MSShapeGroup" />
<path d="M111.891855,24.1435294 C115.317619,24.1435294 117.115465,21.448 117.115465,17.5982745 C117.115465,13.7472941 115.317619,11.0530196 111.891855,11.0530196 C108.466394,11.0530196 106.668548,13.7472941 106.668548,17.5982745 C106.669757,21.448 108.466394,24.1435294 111.891855,24.1435294 L111.891855,24.1435294 L111.891855,24.1435294 Z M111.891855,9.63215686 C116.402192,9.63215686 118.712844,13.2440784 118.712844,17.5982745 C118.712844,21.9515294 116.402192,25.563451 111.891855,25.563451 C107.381518,25.563451 105.069657,21.9515294 105.069657,17.5982745 C105.069657,13.2440784 107.382728,9.63215686 111.891855,9.63215686 L111.891855,9.63215686 L111.891855,9.63215686 Z"
id="icon-logo-Fill-5" sketch:type="MSShapeGroup" />
<path d="M119.811024,23.9069804 L122.00708,23.9069804 L122.062715,11.2895686 L119.496265,11.2895686 L119.496265,9.98760784 L123.574828,9.98760784 C123.574828,10.9629804 123.490167,12.1184314 123.233159,13.630902 L123.29212,13.630902 C123.976365,11.2597647 125.774211,9.63215686 128.656932,9.63215686 C131.398148,9.63215686 133.594507,10.9353725 133.594507,15.5825882 C133.594507,18.366902 133.508636,21.1214118 133.479912,23.9069804 L135.792983,23.9069804 L135.792983,25.2089412 L129.799559,25.2089412 L129.799559,23.9069804 L131.994406,23.9069804 C132.023433,21.1524706 132.11263,18.4271373 132.11263,15.6738824 C132.11263,12.5617255 130.970003,11.0530196 128.315263,11.0530196 C125.346066,11.0530196 123.576945,13.8084706 123.547918,16.6818824 L123.491376,23.9082353 L125.802028,23.9082353 L125.802028,25.211451 L119.809814,25.211451 L119.809814,23.9069804 L119.811024,23.9069804"
id="icon-logo-Fill-6" sketch:type="MSShapeGroup" />
<path d="M143.412813,24.1435294 C146.838576,24.1435294 148.637329,21.448 148.637329,17.5982745 C148.637329,13.7472941 146.838576,11.0530196 143.412813,11.0530196 C139.987351,11.0530196 138.189506,13.7472941 138.189506,17.5982745 C138.190715,21.448 139.987351,24.1435294 143.412813,24.1435294 L143.412813,24.1435294 L143.412813,24.1435294 Z M143.412813,9.63215686 C147.92315,9.63215686 150.235011,13.2440784 150.235011,17.5982745 C150.235011,21.9515294 147.92315,25.563451 143.412813,25.563451 C138.902476,25.563451 136.590614,21.9515294 136.590614,17.5982745 C136.591824,13.2440784 138.902476,9.63215686 143.412813,9.63215686 L143.412813,9.63215686 L143.412813,9.63215686 Z"
id="icon-logo-Fill-7" sketch:type="MSShapeGroup" />
<path d="M171.076535,23.9069804 L173.272592,23.9069804 C173.300409,21.1524706 173.387187,18.4271373 173.387187,15.6738824 C173.387187,12.5617255 172.074633,11.0530196 169.562306,11.0530196 C166.993436,11.0530196 165.1968,13.7209412 165.141165,16.5328627 L165.024151,23.9082353 L167.337222,23.9082353 L167.337222,25.211451 L161.342891,25.211451 L161.342891,23.9082353 L163.540157,23.9082353 C163.566765,21.1537255 163.597909,18.4283922 163.597909,15.6751373 C163.597909,12.5629804 162.315288,11.0542745 159.886413,11.0542745 C157.205367,11.0542745 155.349468,13.7221961 155.32165,16.5341176 L155.263899,23.9094902 L157.57697,23.9094902 L157.57697,25.211451 L151.611364,25.211451 L151.611364,23.9094902 L153.782022,23.9094902 L153.836447,11.2920784 L151.297512,11.2920784 L151.297512,9.98760784 L155.350677,9.98760784 C155.350677,10.9629804 155.265109,12.1184314 155.008101,13.630902 L155.065852,13.630902 C155.750098,11.2597647 157.748409,9.63215686 160.175773,9.63215686 C162.660283,9.63215686 164.202331,10.9353725 164.771981,13.2440784 C165.342539,12.030902 166.5408,9.63215686 169.936328,9.63215686 C172.760995,9.63215686 174.875112,11.1719216 174.875112,15.5825882 C174.875112,18.366902 174.789241,21.1214118 174.761424,23.9069804 L177.072378,23.9069804 L177.072378,25.2089412 L171.078954,25.2089412 L171.078954,23.9069804 L171.076535,23.9069804"
id="icon-logo-Fill-8" sketch:type="MSShapeGroup" />
<path d="M182.185928,9.98760784 L182.185928,11.2895686 L180.103257,11.2895686 L184.069644,22.5112157 C184.184239,22.8089412 184.297625,23.2271373 184.383194,23.6390588 L184.440038,23.6390588 C184.467855,23.3711373 184.58245,22.8980392 184.695836,22.5711373 L188.491994,11.2873725 L186.295635,11.2873725 L186.295635,9.98760784 L191.748435,9.98760784 L191.748435,11.2895686 L189.979616,11.2895686 L184.870602,26.129098 C183.270803,30.7766275 181.58846,33 178.162998,33 C177.450028,33 176.933594,32.8785882 176.451931,32.7631373 L176.451931,31.3134118 C176.7936,31.3711373 177.534387,31.5800784 178.24766,31.5800784 C180.302513,31.5800784 181.616277,30.5435294 182.500687,28.3512157 L183.61338,25.5982745 L178.363162,11.2945882 L176.45314,11.2945882 L176.45314,9.98760784 L182.185928,9.98760784"
id="icon-logo-Fill-10" sketch:type="MSShapeGroup" />
<path d="M23.4778205,21.696 L9.6296315,21.696 C8.832,21.696 8.18252598,22.3698824 8.18252598,23.1974902 C8.18252598,24.0276078 8.83079055,24.6989804 9.6296315,24.6989804 L23.4778205,24.6989804 C24.2766614,24.6989804 24.9261354,24.0276078 24.9261354,23.1974902 C24.9261354,22.3676863 24.2766614,21.696 23.4778205,21.696"
id="icon-logo-Fill-12" sketch:type="MSShapeGroup" />
<path d="M23.4778205,10.8840784 L9.6296315,10.8840784 C8.832,10.8840784 8.18252598,11.5579608 8.18252598,12.3855686 C8.18252598,13.2156863 8.83079055,13.8895686 9.6296315,13.8895686 L23.4778205,13.8895686 C24.2766614,13.8895686 24.9261354,13.2156863 24.9261354,12.3855686 C24.9261354,11.5579608 24.2766614,10.8840784 23.4778205,10.8840784 L23.4778205,10.8840784 L23.4778205,10.8840784 Z M30.4146142,17.6614902 L2.8119685,17.6614902 C2.82587717,17.6589804 2.83645984,17.6589804 2.83645984,17.6589804 C1.29773858,17.6589804 0.0371905512,16.3723922 0,14.7846275 C1.32313701,6.53364706 8.2287874,0.245333333 16.5549354,0.245333333 C24.8774551,0.245333333 31.7782677,6.52862745 33.1062425,14.7736471 C33.0808441,16.3184314 31.892863,17.5833725 30.4146142,17.6614902 L30.4146142,17.6614902 L30.4146142,17.6614902 Z"
id="icon-logo-Fill-13" sketch:type="MSShapeGroup" />
</g>
</g>
</symbol>
</svg>
</head>
<body>
<a alt="Zenconomy" class="logo" itemprop="url" href="/?utm_link=logo">
<svg class="logotype-icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-logo"></use>
</svg>
</a>
</body>
</html>
Normally setting a max-width makes imgs and svgs scale...
Try this:
svg {
width:100%;
max-width:100%;
}
Just adjust your width to whatever percentage you see fits best.
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>
How to change SVG fill color in Ionic 5
I am trying to implement dark mode in the app and for that I need to change the fill color of the svg icon when a user changes mode. I am trying to use a variable directly in the svg code but it seems to have no effect. <svg class="trophy" xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36"><g id="Group_216" data-name="Group 216" transform="translate(-28 -158)"><rect id="Rectangle_2" data-name="Rectangle 2" width="36" height="36" rx="5" transform="translate(28 158)" fill="var(--primaryforicon)"/> <path id="trophy" d="M19.853,6.795a.4.4,0,0,0-.4-.4H17.768V4.935c0-.013,0-.024,0-.037a.613.613,0,0,0-.612-.613l-.022,0v0H9.015V4.3a.61.61,0,0,0-.563.608c0,.013,0,.025,0,.037V6.394H6.773a.4.4,0,0,0-.4.384h0v5.452h0v0h0a.4.4,0,0,0,.4.4H8.511a4.659,4.659,0,0,0,3.562,3.85v2.66H9.992a.521.521,0,1,0,0,1.041v0h6.238v0a.521.521,0,1,0,0-1.041H14.15v-2.66a4.657,4.657,0,0,0,3.566-3.851h1.736a.4.4,0,0,0,.4-.381h0V6.795h0Zm-11.4,4.8H7.414V7.436H8.456Zm10.355,0H17.767V7.436h1.045Z" transform="translate(33.058 163.583)" fill="var(--secondaryforicon)"/> It would be really helpful is someone can help me with this
Try this:
<svg class="trophy" xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36"><g id="Group_216" data-name="Group 216" transform="translate(-28 -158)"><rect id="Rectangle_2" data-name="Rectangle 2" width="36" height="36" rx="5" transform="translate(28 158)" fill="var(--primaryforicon)"/>
<path id="trophy" d="M19.853,6.795a.4.4,0,0,0-.4-.4H17.768V4.935c0-.013,0-.024,0-.037a.613.613,0,0,0-.612-.613l-.022,0v0H9.015V4.3a.61.61,0,0,0-.563.608c0,.013,0,.025,0,.037V6.394H6.773a.4.4,0,0,0-.4.384h0v5.452h0v0h0a.4.4,0,0,0,.4.4H8.511a4.659,4.659,0,0,0,3.562,3.85v2.66H9.992a.521.521,0,1,0,0,1.041v0h6.238v0a.521.521,0,1,0,0-1.041H14.15v-2.66a4.657,4.657,0,0,0,3.566-3.851h1.736a.4.4,0,0,0,.4-.381h0V6.795h0Zm-11.4,4.8H7.414V7.436H8.456Zm10.355,0H17.767V7.436h1.045Z" transform="translate(33.058 163.583)" fill="var(--secondaryforicon)"/>
<script>
let varr = "yellow";
const svg0 = document.getElementsByClassName("trophy")[0];
svg0.addEventListener("click", (e) => e.target.setAttribute("fill", varr));
</script>
"var" is a reserved word, cannot be a variable name.
Try this solution. First detect whether the app running on dark mode. Then switch the fill color dynamically.
import { ThemeDetection } from '#ionic-native/theme-detection';
fillcolor: string;
constructor(private themeDetection: ThemeDetection) { }
...
this.themeDetection.isAvailable()
.then((res: ThemeDetectionResponse) => {
if(res.value) {
this.themeDetection.isDarkModeEnabled().then((res: ThemeDetectionResponse) => {
if(res){
this.fillcolor = "#FFFFF"
}else{
this.fillcolor = "#00000"
}
})
.catch((error: any) => console.error(error));
}
})
.catch((error: any) => console.error(error));
in SVG
<svg class="trophy" xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36"><g id="Group_216" data-name="Group 216" transform="translate(-28 -158)"><rect id="Rectangle_2" data-name="Rectangle 2" width="36" height="36" rx="5" transform="translate(28 158)" [attr.fill]="fillcolor"/>
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!
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).