SVG looks like it has opacity in chrome when it hasn't, how to solve it? - css
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).
Related
Web component stylsheet is re-downloaded everytime an instance of it is created
I am making a pair of custom web components to show notifications. The wc-notifier is the parent, which creates wc-notifications on itself, there maybe multiple notifications shown at the same time, in which case one parent, many children. Each web component has links to two external stylesheets: base.mins.css It's own shadow.mins.css As you can see below I duplicated the links because I am trying to use the preload functionality of the browser: I know I could inline the stylesheet, but I would like to link the styles, for the same reason we normally link stylesheets. <template id="TEMPLATE_wc-notification"> <link rel="stylesheet" type="text/css" href="/static/csslib/base.min.css"> <link rel="preload" as="style" type="text/css" href="/static/csslib/base.min.css"> <link rel="stylesheet" type="text/css" href="/static/wclib/wc-notification/shadow.min.css"> <link rel="preload" as="style" type="text/css" href="/static/wclib/wc-notification/shadow.min.css"> <div id="CONTAINER" class="d:f a-i:s o-y:a max-h:80vh"><div name="icon" class="o-align:c-m h:64"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000" draggable="false" class="icon-svg" id="INFO"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000" draggable="false" class="icon-svg" id="SUCCESS"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000" draggable="false" class="icon-svg" id="WARNING"><path d="M0 0h24v24H0z" fill="none"/><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000" draggable="false" class="icon-svg" id="ERROR"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg></div><slot id="SLOT" class="d:b f-s:24 f-w:500 o-w:a m-t:10"></slot><div id="CLOSE" class="o-align:c-m a-r:1/1 c:p bg-c:black|15a#h b-r-r:6 h:64"><svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 0 24 24" width="32px" fill="black" draggable="false" class="p:4"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg></div></div> </template><script type="module" async src="/static/wclib/wc-notification/component.min.js"></script> <template id="TEMPLATE_wc-notifier"> <link rel="stylesheet" type="text/css" href="/static/csslib/base.min.css"> <link rel="preload" as="style" type="text/css" href="/static/csslib/base.min.css"> <link rel="stylesheet" type="text/css" href="/static/wclib/wc-notifier/shadow.min.css"> <link rel="preload" as="style" type="text/css" href="/static/wclib/wc-notifier/shadow.min.css"> <div id="CONTAINER" class="p:f r:0 t:0 d:f f-d:c a-i:e z-i:1000" hidden><slot></slot></div> </template><script type="module" async src="/static/wclib/wc-notifier/component.min.js"></script> Say I perform a fetch, and the server does not respond. Then I wish to show a notification that the submission failed. Now the problem comes in that I would like to show a notification about the failed fetch. However when I try create the notification, the browser then wishes to re-download the stylesheet for the notification, however now there is "no connection", so the notification is not styled. Heres the response Headers (showing its not set to no-cache etc): Note I test the failed fetch within about 10 seconds of the page loading: Cache-Control: max-age=6000 Content-Disposition: inline; filename="component.min.js" Content-Length: 1105 Content-Type: application/javascript Date: Wed, 21 Sep 2022 20:47:35 GMT Last-Modified: Wed, 21 Sep 2022 20:47:35 GMT Server: WSGIServer/0.2 CPython/3.9.13 Set-Cookie: ... expires=Sat, 22 Oct 2022 20:47:35 GMT; HttpOnly; Max-Age=2678400; Path=/; SameSite=Lax Vary: Cookie Why does the browser try to redownload the stylesheet? How do I make it download once at start up, and not again everytime I create an element of wc-notification? The above scenario is the worst case, but even good cases its slow to style the component, because everytime I add a web component, the stylesheet is re-downloaded. I also tried #import, but it results in the same issue, the stylesheet is downloaded every time. <template id="TEMPLATE_wc-notification"><style>#import "/static/csslib/base.min.css"</style> <style>#import "/static/wclib/wc-notification/shadow.min.css"</style> <div id="CONTAINER" class="d:f a-i:s o-y:a max-h:80vh"><div name="icon" class="o-align:c-m h:64"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000" draggable="false" class="icon-svg" id="INFO"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000" draggable="false" class="icon-svg" id="SUCCESS"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000" draggable="false" class="icon-svg" id="WARNING"><path d="M0 0h24v24H0z" fill="none"/><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000" draggable="false" class="icon-svg" id="ERROR"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg></div><slot id="SLOT" class="d:b f-s:24 f-w:500 o-w:a m-t:10"></slot><div id="CLOSE" class="o-align:c-m a-r:1/1 c:p bg-c:black|15a#h b-r-r:6 h:64"><svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 0 24 24" width="32px" fill="black" draggable="false" class="p:4"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg></div></div> </template><script type="module" async src="/static/wclib/wc-notification/component.min.js"></script> <template id="TEMPLATE_wc-notifier"><style>#import "/static/csslib/base.min.css"</style> <style>#import "/static/wclib/wc-notifier/shadow.min.css"</style> <div id="CONTAINER" class="p:f r:0 t:0 d:f f-d:c a-i:e z-i:1000" hidden><slot></slot></div> </template><script type="module" async src="/static/wclib/wc-notifier/component.min.js"></script> I did come across Constructable Style Sheets when trying to look fo ra solution, but Safari does not support the replace and replaceSync methods, which are the heart of it for web components.
I'm assuming that:
You are including the templates in the HTML of the web page
Since one of your css files is named "shadow.min.css", that you are using a Shadow DOM.
You are wanting to make a single http call for your css files regardless of the number of custom tags in the web page.
Since you are building a web component, you should adhere to the principle of compartmentalization, meaning: A user of the component only has to include a [script] tag in the HTML and everything else gets loaded by the component - and stays in the component.
When you inject a [link] tag into the Shadow DOM from within your component, the browser will cache the file that was retrieved. Usually, that's all you have to do.
For the templates, since we don't have HTML imports at the moment, the easiest way to fetch a template ONLY ONCE in spite of the number of custom tags in the web page is to make use of native Javascript modules. Modern browsers seem to have good support for native JS modules. CAVEAT, your template file must have a .js extension or it won't work ie. template.js. If this doesn't work for your particular situation, then you have to store the content of the template somehow - see the answer to this question: Single HTTP request for HTML template file for multiple instances of the same Web Component
So, assuming a directory structure like this:
Document-root
- index.html
-/static
-- /components
--- /wc-notification
---- component.js
---- template.js
--/csslib
--- base.min.css
--- /wclib
---- /wc-notification
----- shadow.min.css
index.html
<head>
<script type="module" src="/static/components/wc-notification/component.js"></script>
</head>
<body>
<wc-notification>Foo</wc-notification>
<wc-notification>Bar</wc-notification>
<wc-notification>Baz</wc-notification>
</body>
component.js
import { template } from "./template.js";
export class WCNotificaton extends HTMLElement {
#css_file1 = "/static/csslib/base.min.css";
#css_file2 = "/static/wclib/wc-notification/shadow.min.css"
constructor() {
super();
const style = document.createElement('style');
const fragment = document.createRange().createContextualFragment(template);
style.setAttribute("rel", "stylesheet");
this.style1 = style.cloneNode();
this.style1.setAttribute("href", this.css_file1);
this.style2 = style.cloneNode();
this.style2.setAttribute("href", this.css_file2);
this.notification_template = fragment.querySelector('#TEMPLATE_wc-notification').content;
this.notifier_template = fragment.querySelector('#TEMPLATE_wc-notifier').content;
this.shadow = this.attachShadow({ mode: "open" })
}
connectedCallback() {
this.doSomethingwithTheTemplates();
this.render();
}
doSomethingwithTheTemplates() {
this.notify = // the result of processing the templates, should be a DOM Node;
}
render() {
this.shadow.append(this.style1);
this.shadow.append(this.style2);
this.shadow.append(this.notify);
}
document.addEventListener('DOMContentLoaded', customElements.define('wc-notification', WCNotificaton);
template.js (I'm using a template literal here because it's easy)
export const template = `
<template id="TEMPLATE_wc-notification">
<!-- Do not include <link> or #import, <style> is OK -->
</template>
<template id="TEMPLATE_wc-notifier">
<!-- Do not include <link> or #import, <style> is OK -->
</template>
`;
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"/>
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!
How do I auto-scale this svg height?
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.