Svg data image as css background?

妖精的绣舞 提交于 2020-12-29 09:36:06

问题


How to make svg data image as a div background in css? If in html <img src="data:image/svg+xml;base64,[data]"> it works just fine but as a css background it does not show. I createtd a sample on code pen so you can see. So i was investigating this problem and found that some other svg data images work just fine.

.frame__wrapper {
background: transparent url('data:image/svg+xml;base64,[data]') center top no-repeat;
background-size: 100% auto;
width: 310px;
height: 272px;
margin: 0 auto;
padding: 26px 10px;
}

codepen working sample with svg image I can not paste here encoded svg.

Using data uri from this tuttorial svg data uris i managed to set css backgkround. So base64 does not show yet.


回答1:


My steps on how to use svg data image as a background in css:

  1. I encoded an image as base64
  2. I embedded this encoded image into svg markup

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="your width" height="your height" viewBox="0 0 your width your height">
    <image xlink:href="data:image/jpeg;base64,[data]" x="0" y="0" height="100%" width="100%"/>
    </svg>
    
  3. Then I uri-encoded all this stuff here SVG encoder

  4. Finally I put the result into my background property with data:image/svg+xml;charset=utf-8,[data]

In my case I needed a filter to be applied to the background image, but if you don't need it, it's ok :) Also it doesn`t work in IE. Hope this info helps.

div {
    width: 100px;
    height: 100px;
    background: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20width%3D%22100%22%20height%3D%22100%22%20viewBox%3D%220%200%20100%20100%22%3E%0A%20%20%3Cimage%20xlink%3Ahref%3D%22data%3Aimage/jpeg%3Bbase64%2C/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCABkAGQDASIAAhEBAxEB/8QAHQAAAQQDAQEAAAAAAAAAAAAABwAFBggDBAkBAv/EADcQAAIBAwIEBAUDAgYDAQAAAAECAwQFEQAGBxIhMRNBUWEIFCJxkRUygUJSFiMkodHhCbHB8f/EABoBAAIDAQEAAAAAAAAAAAAAAAMEAQIFAAb/xAAoEQABBAEFAAECBwAAAAAAAAABAAIDESEEEhMxQVEUIjIzQlJhgcH/2gAMAwEAAhEDEQA/ALCRfH5t14oFFFOPpBlYsM58wB5k6lVp+N3ZVU5+cleij8MOC4yev21zkudhqLrdWVUNNAWVlSWYLLIM/UVQDPXt1/8AyZU/Ciu3DSQyXK4iAzkQ01JTdqeLPY/3N7np7eek3axratNDSX0uj9x+J/YFqtNLWTX2nllqseBRwHxJ3+yLlsepxok7fv8ARbns9Lc7dMJ6OpQSRyAEZU/frrnbt504TW/9OsFuWOqkZI5qyRiXlY9gzEZIGew6avJwSutFddoOKWpFTPDO8VUVOQko6Oo9gRj750zDNyk0MJWWLjrOVPteA9e+k2vAM6YS9r6Jxpa+cHSduRSxOABrlF2vWcL3IGvOcHVdN98Q71dt8n9N3KtlsVFzQLHBTrK9XKDhmYt0VFI5RjqTzdemsm4PiTbhlHRx7mt8tTT1B5IbpRjEMpA7MCfob2JOfI6DzRg7Sco/E8tsBWIyD19NfOR/91WK8fGvZLdLLHBaqqVlXxCHIX6cdTn06HWGyfHTti4wwvLSTRq7+GW5gQpGPz31blZ8qvE/4Vpcj00tVY3H8atHR3Hkt9lnqqUoGWVpFUnOfLS13Kz5C7hk/aqSWHZlfZd67Rq6+nlNdebfUVFVNOzH5YRsjMoXHTBYDGjhZtj3GKna4RROVkYGMMMNgnuR/T/1oS8ROId7upoNobQrFprvaoqiatqFnSKSoVivIsbMRzBe7KDnt3xqd2PiHufZWwqE3C80V2vjKZZrZWfUeQAYVZVP0seuThu41gSQh8YcXAE+erbjkdG8t2kj58TnxA3ZS7WpbdNV2qWrkjqlbw45Qrsw7EEjoAf+tXh+H/aNHtThdbIqaCnhqKoGrq3gBxJNJ9TMWIBY5PcjXLTiLxTpN73m2TVlLU0DoT4VKylPrJH7mPfGMdtdKOC3Ey12DgzZKm+V9LSlIQgRW+o49j1J9daWiYWMIPaQ1R3OsIxMMHrrBV1UNDTSTzyLDDGpZnc4Cj1J0ILt8VW0qdG+TE9a47ALyj8nVV/iw+Kq57o2K9toaapskUhLTAMeeQf0qCOw7n8a0C4JENJXQS33GnutKlTSTJPBIMrJGwZW+xGo1xY3j/gHYV2veIy9LCWVZWwrE9AM6pv/AOPjjLdK+mls1zmllop5wsIlOSjYPn6Ht/GrcccbFBuzhlf7U/KzS0rMgJ7svVf9xqbxYUVTqKpLviqrbhtzblzoqZYamvpHqFhhYhQS7M3L592PTUvsG3blxT4aPZ66nJpmgKzQ1B6uSOjqxHdWXIOtfhbc5UsNDbLhQIP02ZhCZx3QnPKPM4Pnoh7s3XWrQMkQ+VpypAjiHTt0PTXltRO1lgnK9LDG6RrQG0B6gpu7hY20Nt0chqo5a+io+RpXXpOB+5WHuPxjQZsVjpbtbWmRBE8lNHXgo2TGGLfTny6KCToj8aNy3Sg2rVSPPItPMhgNT2Ks3RQM+eToNQ1Uu1pZacsVhjY0E1PGpKvIqKEGT/dkn7app5HSNJOCpnYIyAE6Vm842q5VLSOqcqofBDfTyKR1z76Wm+qsF2oRCxVadKiMTRK5DEx5IRs+6qDpabtqBlWpb4UNtU9ks1uudo/zrepDVAZneeQgZkZ++enTyGgZxN2ft/hreESLcNS1YSypRM3ijHpjII+wOmGk4+8UqKKC33G7VYklXljglds5ODys2M5wR29dRjedbf53p7ndLU1VNTkKkkP1lgckBv7l6d/LOmxAy7JykjPIRXibqh0q654TUSGoqzztHPHzqeXqGUk5GiZR7pqILBRKI5Z41gLADoDgeQ8s6DO2b4KXcM1ZV+Kxp4JHWiXLhT6M2MLge2rC7dS33DZ9DVQotF4sRYpKwLoucsPLIHrjTjW0LCWc6zR7UMt+9au9UIlhieJiSiFjjmIPkPt5++iVsawDiNEtNeYkqkhbxIuZe5IIIDevbQp2NXi+bijtdJQkwxiVYMAhkVWKjmJGMk5JHkMddW+4E7RpY4nuNaI6NCAiu/1IH6jBx556aJsLTZVNwIwsuwOGlt4YgT25Pl3E3jeCvZT5YPp7afN5cVq9IpBPOoXkZSO4I1LLtw/e9U8s63qOJFIINMnNkjOQST9vxoYbu2uWHgArOVGVkkXqcHQ3yeBXa28qu26ePNXtTcUIFiq69wWKvSgOjD1BA/8AY0WeEXFSHiPamuVVQ1tJSxEq5kUsgx3HT/jUI3Xw25KdLlAzJKGaWFkXm5CO6kenrrZ4bcWJdpWxrTV0cDRxs3zEEzBCyEkEg+esLUaeMHc4f2taCeStrSvOIlw2dxQtl42JRbhanuNdUxRUIrKVljjqQ2UQvj6Sx6DOnjiXwTS67js0DK1PWr4CVhhbALxrnmA7Z6gZ76Bdw4TW62Pc7rYtxxLSrULVpy0rvUuyMWSIN0RTzHJbmPrgasNs3jCd22Vd21KCGux4xpiT0KgZHbr+3276icwxhogN/P8ACLC2aSzMK/1RHiRtjalu3xdaGt3G1G9G0dMlJS0csywIkSKELKpHMMHIB6Z0tRqXhjcN5TTX0360TSXKWSrlS4UsqzQySOXeM8pIbBY4bpkHtpaeA0lfmJMjVX+BLhhwsp79beWonrFKTGZppIWzITjLKzEH+nocalfEXaNJJZaqFFPJTjw0aMnnIHQex7alVu4iQx8NYrxU/LUMvIry5bCIzADGfTqdBjjJxOvdrtsT2Eo08rBUkLKQWbtnPl01bJel/wBKC+2b0LXxMpqC61K11NVqaJojGQlOpYdGPQZJAz5++rA7trZ6XdNus9MtNT7beEPP4KkPkD6k5R0ySe/p5HVY+JNZUx01LFuO9zy3KdVm5YFUQISfIDGSPMnvo4bs3Hb9k36t28sjXejpaWnT5ouGd+aJW5i3XJJJ1oUdthLggHKmO3rmbreYoLckVHApESeGoVwAfpBbHUdO3+2rZWSlemtduBEcMcTF5FKjlclcZwffqPtql/DKWzXapE9E8jyKcFJHA8/Qtk/xq397SoobLDKnMyKgUBMny1BsBRglbNlkuVqoLkr3F641MzTKzIF5AT+0dTkajl7uFUgR1pmmOCxRBkkDvjW9HeJo7KgprTUVZJIIBC4P86GXFb4grDw1jtn6vZq2O5MyFEQLlQxYBs+n0ntpURPc6mhM8jWtsrYoK9rrajJLBItLLLLJCVPVZFGCremcdvXUSvGwLPuGKnq3EqVI5lRw3VsHLBhj9v8AOi7w4lsW7dmrd7IJo6K5Vs0jwTBeanmU8rqMZH7hn+dbN721Y7DtCaW53GisqVDLStW1coQBSeZlXP8AUQDohbdscMoV0dwKY9ubC2tuqzU9HFBEaqFQ2ZFz16HK98jt29Rpqovh28Tiz+qLR11LtMIJZIHqeWN5QTnC+SEdSM9fbUisFtgiijrbVPC9E2Gp5KducN1yWDDvnA/GnzfO4aqq209LLWzGacgJGM8oA99Ks08UZJATjtTI4AHKc6bbewbX4sdSlulmeRpCc9s+Xf20tAWtgucUiqjxqOXqGUsc5PnpaB9HEp+sk+UCrfvint3DCYSzk1MIEYhZgBI4A6jPbH/OgNet+1dwWmoJnesFPM0yo2S0jH9o+3YaMe5eE93egE4tjraUnKw1oUiNwc5HXv0Gg1fdtV1p3vaSFXIqo1WNDhjhhrSY0A2UiXXhbe7+DW8hYotx3+tiWqq0My0shIdVxnHoDjHTUm4k3up25v1qmpCTNJb6FZFH7ZP9OnUAdh6aLHxVM9i2tbo7fNHWF0KVVNUzDmOQD9P28saDPGm5Utwu1lrqWWOeKexW5mKZwjimRWXr1yGUjRY3bgbQ3CnClLeH1/oKq9U5thEVQCpYP3X06AdfPXR6z1Yue3qCWV8rJTo3bo45RnprkzwkvJt+76RS2FdhkAAcwHXBPp7a6QbH3LLcNpw+BVJPVwklvDHM4Vj0PsM5GrEYUbsouVaPWW4U0I5lKnwpYjk5x+0jPX86Dm4eHlDvCoSHddleojonPhVHjNFIi5ycEdxnyPbyxnUmtO+q+1TMJo1pmVlzzftbPcj00VrZfrZvOg+Xc/J1ZAGW6cx1UX205VsdHpAzbRtHCCE2qIRW6xVcj1NEDMG5W6cwyckt2PXWhxT2NBx3stPCLwaO30POyN4PiRzyPylg3KRggKMEduvTropcSuC9XvKxx2kRRNTxSCZJnP1qwPdSOxx0zp8s+1rRYLPSUBjp6aKlU4gRsl2x3J78x9SdVYZGu3epuRsfEPusnxA/h5smi2ftWCkoquod7dhZagsVjnYt1whJAHXA656ddSq5fM18cSR5d2wwjXr7415ea2lEc9G7RRRc5mQKvkPIn21q8KdwR7o3bR0aSiUmRVBTsBntjUktvKVANYWGThhf61Y5moxAWXPIz9e566WrXXLaUVVUBwSo5QMA6WmOJqX3OVANnXa+t8JlxornRvXtPXSpbfFjZXVQow/QZxnm6ffVO6Ph/viHdtDcqu3VVStPUrJgQscKPT8D8a6tVlqkajFH4KtSqxZY/LmPc6YG2hG1SgWhXv5MdG4BWSh8pBwFzy31T3PcNPFS3qjrD4tSIokWnfKJkZZjj38sdjoWbzsT06vSWu11zJSytGpMTOWTP0kEAdOhOPfXVe57RMRUigyVOR56Y7hs9ec+JbmBz1GPPQm6euiiGe/Fzx+Hjh+1939RU17t9RHSSk8pdGQAhemSRq8PCzY9t2hvGottBehPTyU3K0BYFo1HZQR+cn7afP8ADUNNIHSiljdeoYL1GvLTt96eWumt0BhrGhbErDGD5Enz0R0dNwhh+5yaeJazUKl1eSWMEsWDDt/So9dRS2cTp46BoxPLA8QDAM2GALDH26Aa3d+Wfc9dUukVieWIMIwVqVGRyMCxyRnJI6ew0ONs8Lt2mKohudt8YdVSX5oZCjt6+WNKBjgbpMbm12p63xJXtYvloLhNIrLgLznIP/X/ABpg3dxqu9La0Y3GWKYsObBwevcfx0/Om7bHA+rtdRWVs81XNNEpaCl8IFWb0LA+w8tC2+1u6rXWw00m3LpzFJZHkeiZ0MgYFV5sHoRzdc+eudvAwFLdpKOHCfdB3LfZjPXM4qkilSEqfpLLzMeYnrnJ8tHL4OduQVF+vd1Cn/RytCAwxhuZgPwAdVD2BdKtOIUq2+grEXmZYal6V1BCoAobIHTBOCc9QR5avb8OEIs1tvcUT/5lTWmqcspBy3l9gQfzpeGJzpLd5lHkkDWU31WFFSff86WmD5yo/vX8aWtWkhaiBhTp018pAnMDyjOlpaMllmkp43cZUHtrHJSROWJQE50tLXKSsRt9O2cxKf41sW210okOIE6g5+kaWlrj0uHa9rLRRv3p0/GtE2ShWPAp0A9hpaWoCsVr/o1Gr9IFH8axzbbtz96ZO3ppaWpUBa6bVthn5vllBye2n7ZtDDQ3KeOFeVH6kaWloRVwpr4K++lpaWuUr//Z%22%20x%3D%220%22%20y%3D%220%22%20height%3D%22100%25%22%20width%3D%22100%25%22/%3E%0A%3C/svg%3E);
}
<div></div>


来源:https://stackoverflow.com/questions/41405884/svg-data-image-as-css-background

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!