CODEWITHSUNDEEP
csssvg
Bharat Koshti
Bharat Koshti

Reputation: 81

How to change color on hover of SVG base64

CSS:

.img-smiley  {
    background-image:url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjgwcHgiIGhlaWdodD0iODBweCIgdmlld0JveD0iMzIgLTMyIDgwIDgwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDMyIC0zMiA4MCA4MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8ZyBpZD0iIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMi4wMDAwMDAsIDk3Mi4wMDAwMDApIj4NCgk8ZyBpZD0iQW5zd2VyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgMTEyLjAwMDAwMCkiPg0KCQk8ZyBpZD0iR3JvdXAtMTAiPg0KCQkJPGcgaWQ9IlBhZ2UtMS1Db3B5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNS4wMDAwMDAsIDIwLjAwMDAwMCkiPg0KCQkJCTxwYXRoIGZpbGw9IiM3ODkwOUMiIGQ9Ik0yNS0xMDY2Yy0xNC43LDAtMjYuNy0xMi0yNi43LTI2LjdjMC0wLjksMC43LTEuNywxLjctMS43czEuNywwLjcsMS43LDEuN2MwLDEyLjksMTAuNSwyMy4zLDIzLjMsMjMuMw0KCQkJCQlzMjMuMy0xMC41LDIzLjMtMjMuM2MwLTAuOSwwLjctMS43LDEuNy0xLjdzMS43LDAuNywxLjcsMS43QzUxLjctMTA3OCwzOS43LTEwNjYsMjUtMTA2NiBNMTAtMTExMWM0LjYsMCw4LjMsMy43LDguMyw4LjMNCgkJCQkJYzAsMC45LTAuNywxLjctMS43LDEuN2MtMC45LDAtMS43LTAuNy0xLjctMS43YzAtMi44LTIuMi01LTUtNWMtMi44LDAtNSwyLjItNSw1YzAsMC45LTAuNywxLjctMS43LDEuN3MtMS43LTAuNy0xLjctMS43DQoJCQkJCUMxLjctMTEwNy4zLDUuNC0xMTExLDEwLTExMTEgTTQwLTExMTFjNC42LDAsOC4zLDMuNyw4LjMsOC4zYzAsMC45LTAuNywxLjctMS43LDEuN2MtMC45LDAtMS43LTAuNy0xLjctMS43YzAtMi44LTIuMi01LTUtNQ0KCQkJCQlzLTUsMi4yLTUsNWMwLDAuOS0wLjcsMS43LTEuNywxLjdjLTAuOSwwLTEuNy0wLjctMS43LTEuN0MzMS43LTExMDcuMywzNS40LTExMTEsNDAtMTExMSBNMjUtMTEzNmMtMjIuMSwwLTQwLDE3LjktNDAsNDANCgkJCQkJczE3LjksNDAsNDAsNDBzNDAtMTcuOSw0MC00MFM0Ny4xLTExMzYsMjUtMTEzNiIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo=");
    height:80px;
    width:80px;
    display:block;  
}

HTML:

<body>
    <a href="javascript:void(0)">
        <div class="img-smiley">
        </div>
    </a>
</body>

How should I change color on hover from original to green?

Upvotes: 0

Views: 4441

Answers (3)

Mamtha GP
Mamtha GP

Reputation: 1

Firstly you have to encode your SVG html tag or SVG image in the base 64 format. Here is the link to convert from SVG to base 64.

Next you have to set your encoded base64 to the background-image property.

For ex: 

background-image: url("data:image/svg+xml;base64,IDxzdmcgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSIwIDAgMzIgMzIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQogICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBjbGFzcz0iYm9yZGVyIiBkPSJNMTYgMS41QzI0LjAwODEgMS41IDMwLjUgNy45OTE4NyAzMC41IDE2QzMwLjUgMjQuMDA4MSAyNC4wMDgxIDMwLjUgMTYgMzAuNUM3Ljk5MTg3IDMwLjUgMS41IDI0LjAwODEgMS41IDE2QzEuNSA3Ljk5MTg3IDcuOTkxODcgMS41IDE2IDEuNVoiIHN0cm9rZT0iIzJGMkMyNiIgc3Ryb2tlLXdpZHRoPSIzIj48L3BhdGg+DQogICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBjbGFzcz0iYXJyb3ciIGQ9Ik0xOC4yODU3IDE2LjM4MUwxNC4yODU3IDIwLjAxTDE0LjI4NTcgMTIuNzUxOUwxOC4yODU3IDE2LjM4MVoiIGZpbGw9IiMyRjJDMjYiPjwvcGF0aD4NCiAgICAgICAgICAgICAgICAgICAgPC9zdmc+"); width:32px; height: 32px; background-size:cover; background-repeat:no-repeat;

Final Step for hover: You have to convert that SVG to base64 by changing the stroke and fill color of the path inside SVG tag .

EX:

background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggY2xhc3M9ImJvcmRlciIgZD0iTTE2IDEuNUMyNC4wMDgxIDEuNSAzMC41IDcuOTkxODcgMzAuNSAxNkMzMC41IDI0LjAwODEgMjQuMDA4MSAzMC41IDE2IDMwLjVDNy45OTE4NyAzMC41IDEuNSAyNC4wMDgxIDEuNSAxNkMxLjUgNy45OTE4NyA3Ljk5MTg3IDEuNSAxNiAxLjVaIiBzdHJva2U9IiNlZTNjMTUiIHN0cm9rZS13aWR0aD0iMyI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBjbGFzcz0iYXJyb3ciIGQ9Ik0xOC4yODU3IDE2LjM4MUwxNC4yODU3IDIwLjAxTDE0LjI4NTcgMTIuNzUxOUwxOC4yODU3IDE2LjM4MVoiIGZpbGw9IiNlZTNjMTUiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8L3N2Zz4="); width:32px; height: 32px; background-size:cover; background-repeat:no-repeat;

You can try by pasting this code on your HTML page and run.

Upvotes: 0

RRR
RRR

Reputation: 1084

Hi instead of background-image use mask-image and then change the background-color color on hover... kindly check https://jsfiddle.net/RRR0308/v3n0g8zt/1/

HTML

<a href="javascript:void(0)">
        <div class="img-smiley">
        </div>
    </a>

CSS

.img-smiley 
{
  background-color: red;
    -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjgwcHgiIGhlaWdodD0iODBweCIgdmlld0JveD0iMzIgLTMyIDgwIDgwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDMyIC0zMiA4MCA4MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8ZyBpZD0iIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMi4wMDAwMDAsIDk3Mi4wMDAwMDApIj4NCgk8ZyBpZD0iQW5zd2VyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgMTEyLjAwMDAwMCkiPg0KCQk8ZyBpZD0iR3JvdXAtMTAiPg0KCQkJPGcgaWQ9IlBhZ2UtMS1Db3B5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNS4wMDAwMDAsIDIwLjAwMDAwMCkiPg0KCQkJCTxwYXRoIGZpbGw9IiM3ODkwOUMiIGQ9Ik0yNS0xMDY2Yy0xNC43LDAtMjYuNy0xMi0yNi43LTI2LjdjMC0wLjksMC43LTEuNywxLjctMS43czEuNywwLjcsMS43LDEuN2MwLDEyLjksMTAuNSwyMy4zLDIzLjMsMjMuMw0KCQkJCQlzMjMuMy0xMC41LDIzLjMtMjMuM2MwLTAuOSwwLjctMS43LDEuNy0xLjdzMS43LDAuNywxLjcsMS43QzUxLjctMTA3OCwzOS43LTEwNjYsMjUtMTA2NiBNMTAtMTExMWM0LjYsMCw4LjMsMy43LDguMyw4LjMNCgkJCQkJYzAsMC45LTAuNywxLjctMS43LDEuN2MtMC45LDAtMS43LTAuNy0xLjctMS43YzAtMi44LTIuMi01LTUtNWMtMi44LDAtNSwyLjItNSw1YzAsMC45LTAuNywxLjctMS43LDEuN3MtMS43LTAuNy0xLjctMS43DQoJCQkJCUMxLjctMTEwNy4zLDUuNC0xMTExLDEwLTExMTEgTTQwLTExMTFjNC42LDAsOC4zLDMuNyw4LjMsOC4zYzAsMC45LTAuNywxLjctMS43LDEuN2MtMC45LDAtMS43LTAuNy0xLjctMS43YzAtMi44LTIuMi01LTUtNQ0KCQkJCQlzLTUsMi4yLTUsNWMwLDAuOS0wLjcsMS43LTEuNywxLjdjLTAuOSwwLTEuNy0wLjctMS43LTEuN0MzMS43LTExMDcuMywzNS40LTExMTEsNDAtMTExMSBNMjUtMTEzNmMtMjIuMSwwLTQwLDE3LjktNDAsNDANCgkJCQkJczE3LjksNDAsNDAsNDBzNDAtMTcuOSw0MC00MFM0Ny4xLTExMzYsMjUtMTEzNiIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo=");
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjgwcHgiIGhlaWdodD0iODBweCIgdmlld0JveD0iMzIgLTMyIDgwIDgwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDMyIC0zMiA4MCA4MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8ZyBpZD0iIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMi4wMDAwMDAsIDk3Mi4wMDAwMDApIj4NCgk8ZyBpZD0iQW5zd2VyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgMTEyLjAwMDAwMCkiPg0KCQk8ZyBpZD0iR3JvdXAtMTAiPg0KCQkJPGcgaWQ9IlBhZ2UtMS1Db3B5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNS4wMDAwMDAsIDIwLjAwMDAwMCkiPg0KCQkJCTxwYXRoIGZpbGw9IiM3ODkwOUMiIGQ9Ik0yNS0xMDY2Yy0xNC43LDAtMjYuNy0xMi0yNi43LTI2LjdjMC0wLjksMC43LTEuNywxLjctMS43czEuNywwLjcsMS43LDEuN2MwLDEyLjksMTAuNSwyMy4zLDIzLjMsMjMuMw0KCQkJCQlzMjMuMy0xMC41LDIzLjMtMjMuM2MwLTAuOSwwLjctMS43LDEuNy0xLjdzMS43LDAuNywxLjcsMS43QzUxLjctMTA3OCwzOS43LTEwNjYsMjUtMTA2NiBNMTAtMTExMWM0LjYsMCw4LjMsMy43LDguMyw4LjMNCgkJCQkJYzAsMC45LTAuNywxLjctMS43LDEuN2MtMC45LDAtMS43LTAuNy0xLjctMS43YzAtMi44LTIuMi01LTUtNWMtMi44LDAtNSwyLjItNSw1YzAsMC45LTAuNywxLjctMS43LDEuN3MtMS43LTAuNy0xLjctMS43DQoJCQkJCUMxLjctMTEwNy4zLDUuNC0xMTExLDEwLTExMTEgTTQwLTExMTFjNC42LDAsOC4zLDMuNyw4LjMsOC4zYzAsMC45LTAuNywxLjctMS43LDEuN2MtMC45LDAtMS43LTAuNy0xLjctMS43YzAtMi44LTIuMi01LTUtNQ0KCQkJCQlzLTUsMi4yLTUsNWMwLDAuOS0wLjcsMS43LTEuNywxLjdjLTAuOSwwLTEuNy0wLjctMS43LTEuN0MzMS43LTExMDcuMywzNS40LTExMTEsNDAtMTExMSBNMjUtMTEzNmMtMjIuMSwwLTQwLDE3LjktNDAsNDANCgkJCQkJczE3LjksNDAsNDAsNDBzNDAtMTcuOSw0MC00MFM0Ny4xLTExMzYsMjUtMTEzNiIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo=");

    height:80px;
    width:80px;
    display:block;  
}

.img-smiley:hover{
    background:green;
}

Upvotes: 2

iuliu.net
iuliu.net

Reputation: 7145

The current color of the image is something that's embedded inside the image's encoding and something that CSS can't know anything about, so in order to change it you need another base64 image and set it as the background.

Assuming the green base64 green image in base64 is data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPS, you can do something like this:

.img-smiley:hover {
    background-image:url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPS");
}

Or use the smiley character if it fits your needs and style it accordingly. Something like this:

http://jsfiddle.net/Paulpro/wmZVB/5/

Upvotes: 1

Related Questions