一部のSVGはbase64として正しく表示されませんが、imgタグ内ではHTMLで正常に動作します

Question

何らかの理由で、私が使用しているSVGの一部がCSSでスタイル指定されても正しく表示されませんimgタグ内で使用されます。ここではデモンストレーションです：https://jsfiddle.net/xf29ze1m/

HTML（＃1、＃3が動作しません）：

<span class="testing"><i class="icon-test">#1</i></span> 
<span class="testing"><i class="icon-test2">this one works for some reason</i></span> 
<span class="testing"><i class="icon-test3">#2</i></span> 

HTML（＃1とimgタグ内の細かい＃3作品）：

<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAyOTcgMjk3IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyOTcgMjk3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij4KPGc+Cgk8Zz4KCQk8Zz4KCQkJPGc+CgkJCQk8Y2lyY2xlIHN0eWxlPSJmaWxsOiNFM0U1RTQ7IiBjeD0iMTQ4LjUiIGN5PSIxNDguNSIgcj0iMTQ4LjUiLz4KCQkJPC9nPgoJCTwvZz4KCTwvZz4KCTxwYXRoIHN0eWxlPSJmaWxsOiM5MjlEQTU7IiBkPSJNMjE3Ljg5MywxMjAuNDZMNDkuNSwxOThsOTksOTljNjYuNTQsMCwxMjIuODU1LTQzLjc2NSwxNDEuNzM5LTEwNC4wNzlMMjE3Ljg5MywxMjAuNDZ6Ii8+Cgk8Zz4KCQk8cGF0aCBzdHlsZT0iZmlsbDojQzYzQzIyOyIgZD0iTTI0OS42ODgsMTk4aC03Mi4zOTV2LTgyLjVoMjguNDhjNi41NDksMCwxMi41MzYsMy43LDE1LjQ2NSw5LjU1OGwxMS43MjEsMjMuNDQybDE1LjAzNiwxMS40MzQgICAgYzUuMTA1LDMuMTQ5LDguMjEzLDguNzE4LDguMjEzLDE0LjcxNnYxNi44M0MyNTYuMjA4LDE5NS4wODEsMjUzLjI4OSwxOTgsMjQ5LjY4OCwxOTh6Ii8+Cgk8L2c+Cgk8Zz4KCQk8cGF0aCBzdHlsZT0iZmlsbDojRjg2RTUxOyIgZD0iTTE4MS41LDE5OGgtMTMyVjk1LjE2NmMwLTYuOTk2LDUuNjcxLTEyLjY2NiwxMi42NjctMTIuNjY2aDEwNi42NjcgICAgYzYuOTk2LDAsMTIuNjY3LDUuNjcxLDEyLjY2NywxMi42NjZWMTk4SDE4MS41eiIvPgoJPC9nPgoJPGc+CgkJPHBhdGggc3R5bGU9ImZpbGw6I0UyNUQ0NzsiIGQ9Ik0xODEuNSw5NS4xNjdjMC02Ljk5Ni01LjY3MS0xMi42NjctMTIuNjY3LTEyLjY2N2gtMjAuNjY3VjE5OEgxODEuNVY5NS4xNjd6Ii8+Cgk8L2c+Cgk8Zz4KCQk8cGF0aCBzdHlsZT0iZmlsbDojRDBENUQ5OyIgZD0iTTIxMi41OTcsMTI2LjE5NUwyMjQsMTQ5aC0zM3YtMjdoMTQuODFDMjA4LjY4NCwxMjIsMjExLjMxMiwxMjMuNjI0LDIxMi41OTcsMTI2LjE5NXoiLz4KCTwvZz4KCTxnPgoJCTxjaXJjbGUgc3R5bGU9ImZpbGw6IzMyMzczQjsiIGN4PSI4OS4yOTEiIGN5PSIxOTgiIHI9IjIzLjI5MSIvPgoJPC9nPgoJPGc+CgkJPGNpcmNsZSBzdHlsZT0iZmlsbDojNDg0RjU0OyIgY3g9Ijg5LjI5MSIgY3k9IjE5OCIgcj0iOSIvPgoJPC9nPgoJPGc+CgkJPGNpcmNsZSBzdHlsZT0iZmlsbDojMzIzNzNCOyIgY3g9IjIyMS4yOTEiIGN5PSIxOTgiIHI9IjIzLjI5MSIvPgoJPC9nPgoJPGc+CgkJPGNpcmNsZSBzdHlsZT0iZmlsbDojNDg0RjU0OyIgY3g9IjIyMS4yOTIiIGN5PSIxOTgiIHI9IjkiLz4KCTwvZz4KCTxnPgoJCTxjaXJjbGUgc3R5bGU9ImZpbGw6IzMyMzczQjsiIGN4PSIxMTYuNSIgY3k9Ijk5IiByPSIzOSIvPgoJPC9nPgoJPGc+CgkJPGNpcmNsZSBzdHlsZT0iZmlsbDojRUNGMEYxOyIgY3g9IjExNi41IiBjeT0iOTkiIHI9IjMxLjMxOCIvPgoJPC9nPgoJPGc+CgkJPHBhdGggc3R5bGU9ImZpbGw6IzMyMzczQjsiIGQ9Ik0xMjguOTA3LDExMi41NDZjLTAuNzczLDAtMS41NTItMC4yNTUtMi4yLTAuNzc5bC0xMi40MDktMTAuMDQ2ICAgIEMxMTMuNDc3LDEwMS4wNTYsMTEzLDEwMC4wNTYsMTEzLDk5Vjc5LjVjMC0xLjkzMywxLjU2Ny0zLjUsMy41LTMuNXMzLjUsMS41NjcsMy41LDMuNXYxNy44M2wxMS4xMTEsOC45OTUgICAgYzEuNTAzLDEuMjE3LDEuNzM0LDMuNDIxLDAuNTE5LDQuOTIzQzEzMC45MzgsMTEyLjEwMywxMjkuOTI3LDExMi41NDYsMTI4LjkwNywxMTIuNTQ2eiIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=" /> 
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTI5IDEyOSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTI5IDEyOSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij4NCiAgPGc+DQogICAgPGc+DQogICAgICA8cGF0aCBkPSJNNjQuNSwxMjIuM2MzMiwwLDU3LjktMjYsNTcuOS01Ny45YzAtMzItMjYtNTcuOS01Ny45LTU3LjlTNi42LDMyLjQsNi42LDY0LjRDNi42LDk2LjMsMzIuNSwxMjIuMyw2NC41LDEyMi4zeiAgICAgTTY0LjUsMTQuNmMyNy41LDAsNDkuOCwyMi4zLDQ5LjgsNDkuOGMwLDI3LjUtMjIuMyw0OS44LTQ5LjgsNDkuOFMxNC43LDkxLjgsMTQuNyw2NC40QzE0LjcsMzYuOSwzNywxNC42LDY0LjUsMTQuNnoiIGZpbGw9IiM3Nzc2NzYiLz4NCiAgICAgIDxwYXRoIGQ9Im02MS44LDcxLjJoMTkuM2MyLjMsMCA0LjEtMS44IDQuMS00LjEgMC0yLjMtMS44LTQuMS00LjEtNC4xaC0xNS4ydi0yMy44YzAtMi4zLTEuOC00LjEtNC4xLTQuMXMtNC4xLDEuOC00LjEsNC4xdjI3LjljMCwyLjMgMS44LDQuMSA0LjEsNC4xeiIgZmlsbD0iIzc3NzY3NiIvPg0KICAgIDwvZz4NCiAgPC9nPg0KPC9zdmc+" /> 

CSS：なしのAvaIにbackground-position: 0 0;を代わりにbackground-position: center center;：

[class^="icon-"], 
[class*="icon-"] { 
    display: inline-block; 
    width: 16px; 
    height: 16px; 
    background-position: center center; 
    background-repeat: no-repeat; 
} 

img { 
    height:56px; 
    width:56px; 
} 
.icon-test { 
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAyOTcgMjk3IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyOTcgMjk3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij4KPGc+Cgk8Zz4KCQk8Zz4KCQkJPGc+CgkJCQk8Y2lyY2xlIHN0eWxlPSJmaWxsOiNFM0U1RTQ7IiBjeD0iMTQ4LjUiIGN5PSIxNDguNSIgcj0iMTQ4LjUiLz4KCQkJPC9nPgoJCTwvZz4KCTwvZz4KCTxwYXRoIHN0eWxlPSJmaWxsOiM5MjlEQTU7IiBkPSJNMjE3Ljg5MywxMjAuNDZMNDkuNSwxOThsOTksOTljNjYuNTQsMCwxMjIuODU1LTQzLjc2NSwxNDEuNzM5LTEwNC4wNzlMMjE3Ljg5MywxMjAuNDZ6Ii8+Cgk8Zz4KCQk8cGF0aCBzdHlsZT0iZmlsbDojQzYzQzIyOyIgZD0iTTI0OS42ODgsMTk4aC03Mi4zOTV2LTgyLjVoMjguNDhjNi41NDksMCwxMi41MzYsMy43LDE1LjQ2NSw5LjU1OGwxMS43MjEsMjMuNDQybDE1LjAzNiwxMS40MzQgICAgYzUuMTA1LDMuMTQ5LDguMjEzLDguNzE4LDguMjEzLDE0LjcxNnYxNi44M0MyNTYuMjA4LDE5NS4wODEsMjUzLjI4OSwxOTgsMjQ5LjY4OCwxOTh6Ii8+Cgk8L2c+Cgk8Zz4KCQk8cGF0aCBzdHlsZT0iZmlsbDojRjg2RTUxOyIgZD0iTTE4MS41LDE5OGgtMTMyVjk1LjE2NmMwLTYuOTk2LDUuNjcxLTEyLjY2NiwxMi42NjctMTIuNjY2aDEwNi42NjcgICAgYzYuOTk2LDAsMTIuNjY3LDUuNjcxLDEyLjY2NywxMi42NjZWMTk4SDE4MS41eiIvPgoJPC9nPgoJPGc+CgkJPHBhdGggc3R5bGU9ImZpbGw6I0UyNUQ0NzsiIGQ9Ik0xODEuNSw5NS4xNjdjMC02Ljk5Ni01LjY3MS0xMi42NjctMTIuNjY3LTEyLjY2N2gtMjAuNjY3VjE5OEgxODEuNVY5NS4xNjd6Ii8+Cgk8L2c+Cgk8Zz4KCQk8cGF0aCBzdHlsZT0iZmlsbDojRDBENUQ5OyIgZD0iTTIxMi41OTcsMTI2LjE5NUwyMjQsMTQ5aC0zM3YtMjdoMTQuODFDMjA4LjY4NCwxMjIsMjExLjMxMiwxMjMuNjI0LDIxMi41OTcsMTI2LjE5NXoiLz4KCTwvZz4KCTxnPgoJCTxjaXJjbGUgc3R5bGU9ImZpbGw6IzMyMzczQjsiIGN4PSI4OS4yOTEiIGN5PSIxOTgiIHI9IjIzLjI5MSIvPgoJPC9nPgoJPGc+CgkJPGNpcmNsZSBzdHlsZT0iZmlsbDojNDg0RjU0OyIgY3g9Ijg5LjI5MSIgY3k9IjE5OCIgcj0iOSIvPgoJPC9nPgoJPGc+CgkJPGNpcmNsZSBzdHlsZT0iZmlsbDojMzIzNzNCOyIgY3g9IjIyMS4yOTEiIGN5PSIxOTgiIHI9IjIzLjI5MSIvPgoJPC9nPgoJPGc+CgkJPGNpcmNsZSBzdHlsZT0iZmlsbDojNDg0RjU0OyIgY3g9IjIyMS4yOTIiIGN5PSIxOTgiIHI9IjkiLz4KCTwvZz4KCTxnPgoJCTxjaXJjbGUgc3R5bGU9ImZpbGw6IzMyMzczQjsiIGN4PSIxMTYuNSIgY3k9Ijk5IiByPSIzOSIvPgoJPC9nPgoJPGc+CgkJPGNpcmNsZSBzdHlsZT0iZmlsbDojRUNGMEYxOyIgY3g9IjExNi41IiBjeT0iOTkiIHI9IjMxLjMxOCIvPgoJPC9nPgoJPGc+CgkJPHBhdGggc3R5bGU9ImZpbGw6IzMyMzczQjsiIGQ9Ik0xMjguOTA3LDExMi41NDZjLTAuNzczLDAtMS41NTItMC4yNTUtMi4yLTAuNzc5bC0xMi40MDktMTAuMDQ2ICAgIEMxMTMuNDc3LDEwMS4wNTYsMTEzLDEwMC4wNTYsMTEzLDk5Vjc5LjVjMC0xLjkzMywxLjU2Ny0zLjUsMy41LTMuNXMzLjUsMS41NjcsMy41LDMuNXYxNy44M2wxMS4xMTEsOC45OTUgICAgYzEuNTAzLDEuMjE3LDEuNzM0LDMuNDIxLDAuNTE5LDQuOTIzQzEzMC45MzgsMTEyLjEwMywxMjkuOTI3LDExMi41NDYsMTI4LjkwNywxMTIuNTQ2eiIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=); 
} 

.icon-test2 { 
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDUwOCA1MDgiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUwOCA1MDg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIHN0eWxlPSJmaWxsOiNGRDg0Njk7IiBkPSJNNTA4LDI1NGMwLDE0MC40LTExMy42LDI1NC0yNTQsMjU0UzAsMzk0LjQsMCwyNTRTMTEzLjYsMCwyNTQsMGMxMTAuOCwwLDIwNC44LDcwLjgsMjM5LjYsMTY5LjYNCgljNy42LDIxLjIsMTIsNDMuNiwxMy42LDY2LjhDNTA4LDI0Mi40LDUwOCwyNDgsNTA4LDI1NHoiLz4NCjxwb2x5Z29uIHN0eWxlPSJmaWxsOiNFNkU5RUU7IiBwb2ludHM9IjM4MCwxMjUuNiAxNjUuNiwzMTguNCA3NCwzMDMuNiAiLz4NCjxwb2x5Z29uIHN0eWxlPSJmaWxsOiNBQ0IzQkE7IiBwb2ludHM9IjE2NS42LDMxOC40IDE5Ny4yLDM4Mi40IDIwNS42LDMzMC40IDM4MCwxMjUuNiAiLz4NCjxwb2x5Z29uIHN0eWxlPSJmaWxsOiNDRUQ1RTA7IiBwb2ludHM9IjE5Ny4yLDM4Mi40IDM4MCwxMjUuNiAyMDUuNiwzMzAuNCAiLz4NCjxwb2x5Z29uIHN0eWxlPSJmaWxsOiNFNkU5RUU7IiBwb2ludHM9IjM4MCwxMjUuNiAzMzYuNCwzNjAuOCAyMDUuNiwzMzAuNCAiLz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjwvc3ZnPg==); 
} 

.icon-test3 { 
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTI5IDEyOSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTI5IDEyOSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij4NCiAgPGc+DQogICAgPGc+DQogICAgICA8cGF0aCBkPSJNNjQuNSwxMjIuM2MzMiwwLDU3LjktMjYsNTcuOS01Ny45YzAtMzItMjYtNTcuOS01Ny45LTU3LjlTNi42LDMyLjQsNi42LDY0LjRDNi42LDk2LjMsMzIuNSwxMjIuMyw2NC41LDEyMi4zeiAgICAgTTY0LjUsMTQuNmMyNy41LDAsNDkuOCwyMi4zLDQ5LjgsNDkuOGMwLDI3LjUtMjIuMyw0OS44LTQ5LjgsNDkuOFMxNC43LDkxLjgsMTQuNyw2NC40QzE0LjcsMzYuOSwzNywxNC42LDY0LjUsMTQuNnoiIGZpbGw9IiM3Nzc2NzYiLz4NCiAgICAgIDxwYXRoIGQ9Im02MS44LDcxLjJoMTkuM2MyLjMsMCA0LjEtMS44IDQuMS00LjEgMC0yLjMtMS44LTQuMS00LjEtNC4xaC0xNS4ydi0yMy44YzAtMi4zLTEuOC00LjEtNC4xLTQuMXMtNC4xLDEuOC00LjEsNC4xdjI3LjljMCwyLjMgMS44LDQuMSA0LjEsNC4xeiIgZmlsbD0iIzc3NzY3NiIvPg0KICAgIDwvZz4NCiAgPC9nPg0KPC9zdmc+); 
} 

は、私が使用してみましたl。私もSVGファイル内の塗りつぶしの色を変更しようとしましたが、まだ動作しませんでした。すべてのポインタ？

Answer 1

background-sizeに値coverを含め、background-positionを削除しました。

[class^="icon-"], 
 
[class*="icon-"] { 
 
    display: inline-block; 
 
    width: 16px; 
 
    height: 16px; 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
} 
 
img { 
 
    height:56px; 
 
    width:56px; 
 
} 
 
.icon-test { 
 
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAyOTcgMjk3IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyOTcgMjk3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij4KPGc+Cgk8Zz4KCQk8Zz4KCQkJPGc+CgkJCQk8Y2lyY2xlIHN0eWxlPSJmaWxsOiNFM0U1RTQ7IiBjeD0iMTQ4LjUiIGN5PSIxNDguNSIgcj0iMTQ4LjUiLz4KCQkJPC9nPgoJCTwvZz4KCTwvZz4KCTxwYXRoIHN0eWxlPSJmaWxsOiM5MjlEQTU7IiBkPSJNMjE3Ljg5MywxMjAuNDZMNDkuNSwxOThsOTksOTljNjYuNTQsMCwxMjIuODU1LTQzLjc2NSwxNDEuNzM5LTEwNC4wNzlMMjE3Ljg5MywxMjAuNDZ6Ii8+Cgk8Zz4KCQk8cGF0aCBzdHlsZT0iZmlsbDojQzYzQzIyOyIgZD0iTTI0OS42ODgsMTk4aC03Mi4zOTV2LTgyLjVoMjguNDhjNi41NDksMCwxMi41MzYsMy43LDE1LjQ2NSw5LjU1OGwxMS43MjEsMjMuNDQybDE1LjAzNiwxMS40MzQgICAgYzUuMTA1LDMuMTQ5LDguMjEzLDguNzE4LDguMjEzLDE0LjcxNnYxNi44M0MyNTYuMjA4LDE5NS4wODEsMjUzLjI4OSwxOTgsMjQ5LjY4OCwxOTh6Ii8+Cgk8L2c+Cgk8Zz4KCQk8cGF0aCBzdHlsZT0iZmlsbDojRjg2RTUxOyIgZD0iTTE4MS41LDE5OGgtMTMyVjk1LjE2NmMwLTYuOTk2LDUuNjcxLTEyLjY2NiwxMi42NjctMTIuNjY2aDEwNi42NjcgICAgYzYuOTk2LDAsMTIuNjY3LDUuNjcxLDEyLjY2NywxMi42NjZWMTk4SDE4MS41eiIvPgoJPC9nPgoJPGc+CgkJPHBhdGggc3R5bGU9ImZpbGw6I0UyNUQ0NzsiIGQ9Ik0xODEuNSw5NS4xNjdjMC02Ljk5Ni01LjY3MS0xMi42NjctMTIuNjY3LTEyLjY2N2gtMjAuNjY3VjE5OEgxODEuNVY5NS4xNjd6Ii8+Cgk8L2c+Cgk8Zz4KCQk8cGF0aCBzdHlsZT0iZmlsbDojRDBENUQ5OyIgZD0iTTIxMi41OTcsMTI2LjE5NUwyMjQsMTQ5aC0zM3YtMjdoMTQuODFDMjA4LjY4NCwxMjIsMjExLjMxMiwxMjMuNjI0LDIxMi41OTcsMTI2LjE5NXoiLz4KCTwvZz4KCTxnPgoJCTxjaXJjbGUgc3R5bGU9ImZpbGw6IzMyMzczQjsiIGN4PSI4OS4yOTEiIGN5PSIxOTgiIHI9IjIzLjI5MSIvPgoJPC9nPgoJPGc+CgkJPGNpcmNsZSBzdHlsZT0iZmlsbDojNDg0RjU0OyIgY3g9Ijg5LjI5MSIgY3k9IjE5OCIgcj0iOSIvPgoJPC9nPgoJPGc+CgkJPGNpcmNsZSBzdHlsZT0iZmlsbDojMzIzNzNCOyIgY3g9IjIyMS4yOTEiIGN5PSIxOTgiIHI9IjIzLjI5MSIvPgoJPC9nPgoJPGc+CgkJPGNpcmNsZSBzdHlsZT0iZmlsbDojNDg0RjU0OyIgY3g9IjIyMS4yOTIiIGN5PSIxOTgiIHI9IjkiLz4KCTwvZz4KCTxnPgoJCTxjaXJjbGUgc3R5bGU9ImZpbGw6IzMyMzczQjsiIGN4PSIxMTYuNSIgY3k9Ijk5IiByPSIzOSIvPgoJPC9nPgoJPGc+CgkJPGNpcmNsZSBzdHlsZT0iZmlsbDojRUNGMEYxOyIgY3g9IjExNi41IiBjeT0iOTkiIHI9IjMxLjMxOCIvPgoJPC9nPgoJPGc+CgkJPHBhdGggc3R5bGU9ImZpbGw6IzMyMzczQjsiIGQ9Ik0xMjguOTA3LDExMi41NDZjLTAuNzczLDAtMS41NTItMC4yNTUtMi4yLTAuNzc5bC0xMi40MDktMTAuMDQ2ICAgIEMxMTMuNDc3LDEwMS4wNTYsMTEzLDEwMC4wNTYsMTEzLDk5Vjc5LjVjMC0xLjkzMywxLjU2Ny0zLjUsMy41LTMuNXMzLjUsMS41NjcsMy41LDMuNXYxNy44M2wxMS4xMTEsOC45OTUgICAgYzEuNTAzLDEuMjE3LDEuNzM0LDMuNDIxLDAuNTE5LDQuOTIzQzEzMC45MzgsMTEyLjEwMywxMjkuOTI3LDExMi41NDYsMTI4LjkwNywxMTIuNTQ2eiIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo='); 
 
} 
 

 
.icon-test2 { 
 
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDUwOCA1MDgiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUwOCA1MDg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIHN0eWxlPSJmaWxsOiNGRDg0Njk7IiBkPSJNNTA4LDI1NGMwLDE0MC40LTExMy42LDI1NC0yNTQsMjU0UzAsMzk0LjQsMCwyNTRTMTEzLjYsMCwyNTQsMGMxMTAuOCwwLDIwNC44LDcwLjgsMjM5LjYsMTY5LjYNCgljNy42LDIxLjIsMTIsNDMuNiwxMy42LDY2LjhDNTA4LDI0Mi40LDUwOCwyNDgsNTA4LDI1NHoiLz4NCjxwb2x5Z29uIHN0eWxlPSJmaWxsOiNFNkU5RUU7IiBwb2ludHM9IjM4MCwxMjUuNiAxNjUuNiwzMTguNCA3NCwzMDMuNiAiLz4NCjxwb2x5Z29uIHN0eWxlPSJmaWxsOiNBQ0IzQkE7IiBwb2ludHM9IjE2NS42LDMxOC40IDE5Ny4yLDM4Mi40IDIwNS42LDMzMC40IDM4MCwxMjUuNiAiLz4NCjxwb2x5Z29uIHN0eWxlPSJmaWxsOiNDRUQ1RTA7IiBwb2ludHM9IjE5Ny4yLDM4Mi40IDM4MCwxMjUuNiAyMDUuNiwzMzAuNCAiLz4NCjxwb2x5Z29uIHN0eWxlPSJmaWxsOiNFNkU5RUU7IiBwb2ludHM9IjM4MCwxMjUuNiAzMzYuNCwzNjAuOCAyMDUuNiwzMzAuNCAiLz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjwvc3ZnPg=='); 
 
} 
 

 
.icon-test3 { 
 
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTI5IDEyOSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTI5IDEyOSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij4NCiAgPGc+DQogICAgPGc+DQogICAgICA8cGF0aCBkPSJNNjQuNSwxMjIuM2MzMiwwLDU3LjktMjYsNTcuOS01Ny45YzAtMzItMjYtNTcuOS01Ny45LTU3LjlTNi42LDMyLjQsNi42LDY0LjRDNi42LDk2LjMsMzIuNSwxMjIuMyw2NC41LDEyMi4zeiAgICAgTTY0LjUsMTQuNmMyNy41LDAsNDkuOCwyMi4zLDQ5LjgsNDkuOGMwLDI3LjUtMjIuMyw0OS44LTQ5LjgsNDkuOFMxNC43LDkxLjgsMTQuNyw2NC40QzE0LjcsMzYuOSwzNywxNC42LDY0LjUsMTQuNnoiIGZpbGw9IiM3Nzc2NzYiLz4NCiAgICAgIDxwYXRoIGQ9Im02MS44LDcxLjJoMTkuM2MyLjMsMCA0LjEtMS44IDQuMS00LjEgMC0yLjMtMS44LTQuMS00LjEtNC4xaC0xNS4ydi0yMy44YzAtMi4zLTEuOC00LjEtNC4xLTQuMXMtNC4xLDEuOC00LjEsNC4xdjI3LjljMCwyLjMgMS44LDQuMSA0LjEsNC4xeiIgZmlsbD0iIzc3NzY3NiIvPg0KICAgIDwvZz4NCiAgPC9nPg0KPC9zdmc+'); 
 
}

<span class="icon-test"></span> 
 
<span class="icon-test2"></span> 
 
<span class="icon-test3"></span> 
 
<br> 
 
<br> 
 
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAyOTcgMjk3IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyOTcgMjk3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij4KPGc+Cgk8Zz4KCQk8Zz4KCQkJPGc+CgkJCQk8Y2lyY2xlIHN0eWxlPSJmaWxsOiNFM0U1RTQ7IiBjeD0iMTQ4LjUiIGN5PSIxNDguNSIgcj0iMTQ4LjUiLz4KCQkJPC9nPgoJCTwvZz4KCTwvZz4KCTxwYXRoIHN0eWxlPSJmaWxsOiM5MjlEQTU7IiBkPSJNMjE3Ljg5MywxMjAuNDZMNDkuNSwxOThsOTksOTljNjYuNTQsMCwxMjIuODU1LTQzLjc2NSwxNDEuNzM5LTEwNC4wNzlMMjE3Ljg5MywxMjAuNDZ6Ii8+Cgk8Zz4KCQk8cGF0aCBzdHlsZT0iZmlsbDojQzYzQzIyOyIgZD0iTTI0OS42ODgsMTk4aC03Mi4zOTV2LTgyLjVoMjguNDhjNi41NDksMCwxMi41MzYsMy43LDE1LjQ2NSw5LjU1OGwxMS43MjEsMjMuNDQybDE1LjAzNiwxMS40MzQgICAgYzUuMTA1LDMuMTQ5LDguMjEzLDguNzE4LDguMjEzLDE0LjcxNnYxNi44M0MyNTYuMjA4LDE5NS4wODEsMjUzLjI4OSwxOTgsMjQ5LjY4OCwxOTh6Ii8+Cgk8L2c+Cgk8Zz4KCQk8cGF0aCBzdHlsZT0iZmlsbDojRjg2RTUxOyIgZD0iTTE4MS41LDE5OGgtMTMyVjk1LjE2NmMwLTYuOTk2LDUuNjcxLTEyLjY2NiwxMi42NjctMTIuNjY2aDEwNi42NjcgICAgYzYuOTk2LDAsMTIuNjY3LDUuNjcxLDEyLjY2NywxMi42NjZWMTk4SDE4MS41eiIvPgoJPC9nPgoJPGc+CgkJPHBhdGggc3R5bGU9ImZpbGw6I0UyNUQ0NzsiIGQ9Ik0xODEuNSw5NS4xNjdjMC02Ljk5Ni01LjY3MS0xMi42NjctMTIuNjY3LTEyLjY2N2gtMjAuNjY3VjE5OEgxODEuNVY5NS4xNjd6Ii8+Cgk8L2c+Cgk8Zz4KCQk8cGF0aCBzdHlsZT0iZmlsbDojRDBENUQ5OyIgZD0iTTIxMi41OTcsMTI2LjE5NUwyMjQsMTQ5aC0zM3YtMjdoMTQuODFDMjA4LjY4NCwxMjIsMjExLjMxMiwxMjMuNjI0LDIxMi41OTcsMTI2LjE5NXoiLz4KCTwvZz4KCTxnPgoJCTxjaXJjbGUgc3R5bGU9ImZpbGw6IzMyMzczQjsiIGN4PSI4OS4yOTEiIGN5PSIxOTgiIHI9IjIzLjI5MSIvPgoJPC9nPgoJPGc+CgkJPGNpcmNsZSBzdHlsZT0iZmlsbDojNDg0RjU0OyIgY3g9Ijg5LjI5MSIgY3k9IjE5OCIgcj0iOSIvPgoJPC9nPgoJPGc+CgkJPGNpcmNsZSBzdHlsZT0iZmlsbDojMzIzNzNCOyIgY3g9IjIyMS4yOTEiIGN5PSIxOTgiIHI9IjIzLjI5MSIvPgoJPC9nPgoJPGc+CgkJPGNpcmNsZSBzdHlsZT0iZmlsbDojNDg0RjU0OyIgY3g9IjIyMS4yOTIiIGN5PSIxOTgiIHI9IjkiLz4KCTwvZz4KCTxnPgoJCTxjaXJjbGUgc3R5bGU9ImZpbGw6IzMyMzczQjsiIGN4PSIxMTYuNSIgY3k9Ijk5IiByPSIzOSIvPgoJPC9nPgoJPGc+CgkJPGNpcmNsZSBzdHlsZT0iZmlsbDojRUNGMEYxOyIgY3g9IjExNi41IiBjeT0iOTkiIHI9IjMxLjMxOCIvPgoJPC9nPgoJPGc+CgkJPHBhdGggc3R5bGU9ImZpbGw6IzMyMzczQjsiIGQ9Ik0xMjguOTA3LDExMi41NDZjLTAuNzczLDAtMS41NTItMC4yNTUtMi4yLTAuNzc5bC0xMi40MDktMTAuMDQ2ICAgIEMxMTMuNDc3LDEwMS4wNTYsMTEzLDEwMC4wNTYsMTEzLDk5Vjc5LjVjMC0xLjkzMywxLjU2Ny0zLjUsMy41LTMuNXMzLjUsMS41NjcsMy41LDMuNXYxNy44M2wxMS4xMTEsOC45OTUgICAgYzEuNTAzLDEuMjE3LDEuNzM0LDMuNDIxLDAuNTE5LDQuOTIzQzEzMC45MzgsMTEyLjEwMywxMjkuOTI3LDExMi41NDYsMTI4LjkwNywxMTIuNTQ2eiIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=" /> 
 
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTI5IDEyOSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTI5IDEyOSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij4NCiAgPGc+DQogICAgPGc+DQogICAgICA8cGF0aCBkPSJNNjQuNSwxMjIuM2MzMiwwLDU3LjktMjYsNTcuOS01Ny45YzAtMzItMjYtNTcuOS01Ny45LTU3LjlTNi42LDMyLjQsNi42LDY0LjRDNi42LDk2LjMsMzIuNSwxMjIuMyw2NC41LDEyMi4zeiAgICAgTTY0LjUsMTQuNmMyNy41LDAsNDkuOCwyMi4zLDQ5LjgsNDkuOGMwLDI3LjUtMjIuMyw0OS44LTQ5LjgsNDkuOFMxNC43LDkxLjgsMTQuNyw2NC40QzE0LjcsMzYuOSwzNywxNC42LDY0LjUsMTQuNnoiIGZpbGw9IiM3Nzc2NzYiLz4NCiAgICAgIDxwYXRoIGQ9Im02MS44LDcxLjJoMTkuM2MyLjMsMCA0LjEtMS44IDQuMS00LjEgMC0yLjMtMS44LTQuMS00LjEtNC4xaC0xNS4ydi0yMy44YzAtMi4zLTEuOC00LjEtNC4xLTQuMXMtNC4xLDEuOC00LjEsNC4xdjI3LjljMCwyLjMgMS44LDQuMSA0LjEsNC4xeiIgZmlsbD0iIzc3NzY3NiIvPg0KICAgIDwvZz4NCiAgPC9nPg0KPC9zdmc+" /> 
 
<span>#1 &amp; #3 works in an img tag</span>