Skip to content

Instantly share code, notes, and snippets.

@marinhero

marinhero/encoding.html

Created February 13, 2017 20:13
Show Gist options
  • Save marinhero/829527f99cfa8a988699feb09b6bc382 to your computer and use it in GitHub Desktop.
Save marinhero/829527f99cfa8a988699feb09b6bc382 to your computer and use it in GitHub Desktop.
Download ZIP
SVG encode exampe
Raw
encoding.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ENCODING TEST</title>
<style>
.icon {
background:
url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KPHBhdGggZmlsbD0iIzAwMDAwMCIgZD0iTTE2IDMuNTM4Yy0wLjU4OCAwLjI2My0xLjIyMiAwLjQzOC0xLjg4NCAwLjUxNiAwLjY3OC0wLjQwNiAxLjE5Ny0xLjA1MCAxLjQ0NC0xLjgxNi0wLjYzNCAwLjM3NS0xLjMzOCAwLjY1LTIuMDg0IDAuNzk3LTAuNi0wLjYzOC0xLjQ1My0xLjAzNC0yLjM5Ny0xLjAzNC0xLjgxMyAwLTMuMjgxIDEuNDY5LTMuMjgxIDMuMjgxIDAgMC4yNTYgMC4wMjggMC41MDYgMC4wODQgMC43NDctMi43MjgtMC4xMzgtNS4xNDctMS40NDQtNi43NjYtMy40MzEtMC4yODEgMC40ODQtMC40NDQgMS4wNTAtMC40NDQgMS42NSAwIDEuMTM4IDAuNTc4IDIuMTQ0IDEuNDU5IDIuNzMxLTAuNTM4LTAuMDE2LTEuMDQ0LTAuMTY2LTEuNDg4LTAuNDA5IDAgMC4wMTMgMCAwLjAyOCAwIDAuMDQxIDAgMS41OTEgMS4xMzEgMi45MTkgMi42MzQgMy4yMTktMC4yNzUgMC4wNzUtMC41NjYgMC4xMTYtMC44NjYgMC4xMTYtMC4yMTIgMC0wLjQxNi0wLjAyMi0wLjYxOS0wLjA1OSAwLjQxOSAxLjMwMyAxLjYzMSAyLjI1MyAzLjA2NiAyLjI4MS0xLjEyNSAwLjg4MS0yLjUzOCAxLjQwNi00LjA3OCAxLjQwNi0wLjI2NiAwLTAuNTI1LTAuMDE2LTAuNzg0LTAuMDQ3IDEuNDU2IDAuOTM0IDMuMTgxIDEuNDc1IDUuMDM0IDEuNDc1IDYuMDM3IDAgOS4zNDEtNS4wMDMgOS4zNDEtOS4zNDEgMC0wLjE0NC0wLjAwMy0wLjI4NC0wLjAwOS0wLjQyNSAwLjY0MS0wLjQ1OSAxLjE5Ny0xLjAzOCAxLjYzNy0xLjY5N3oiPjwvcGF0aD4KPC9zdmc+Cg==)
no-repeat
left center;
padding: 5px 0 5px 25px;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h1>Encoded SVG TEST</h1>
As markup
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnk
gSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLj
EvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkI
j4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIg
eG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIxNiIgaGV
pZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KPHBhdGggZmlsbD0iIzAwMDAwMCIgZD0iTT
E2IDMuNTM4Yy0wLjU4OCAwLjI2My0xLjIyMiAwLjQzOC0xLjg4NCAwLjUxNiAwLjY3OC0wLjQwN
iAxLjE5Ny0xLjA1MCAxLjQ0NC0xLjgxNi0wLjYzNCAwLjM3NS0xLjMzOCAwLjY1LTIuMDg0IDAu
Nzk3LTAuNi0wLjYzOC0xLjQ1My0xLjAzNC0yLjM5Ny0xLjAzNC0xLjgxMyAwLTMuMjgxIDEuNDY
5LTMuMjgxIDMuMjgxIDAgMC4yNTYgMC4wMjggMC41MDYgMC4wODQgMC43NDctMi43MjgtMC4xMz
gtNS4xNDctMS40NDQtNi43NjYtMy40MzEtMC4yODEgMC40ODQtMC40NDQgMS4wNTAtMC40NDQgM
S42NSAwIDEuMTM4IDAuNTc4IDIuMTQ0IDEuNDU5IDIuNzMxLTAuNTM4LTAuMDE2LTEuMDQ0LTAu
MTY2LTEuNDg4LTAuNDA5IDAgMC4wMTMgMCAwLjAyOCAwIDAuMDQxIDAgMS41OTEgMS4xMzEgMi4
5MTkgMi42MzQgMy4yMTktMC4yNzUgMC4wNzUtMC41NjYgMC4xMTYtMC44NjYgMC4xMTYtMC4yMT
IgMC0wLjQxNi0wLjAyMi0wLjYxOS0wLjA1OSAwLjQxOSAxLjMwMyAxLjYzMSAyLjI1MyAzLjA2N
iAyLjI4MS0xLjEyNSAwLjg4MS0yLjUzOCAxLjQwNi00LjA3OCAxLjQwNi0wLjI2NiAwLTAuNTI1
LTAuMDE2LTAuNzg0LTAuMDQ3IDEuNDU2IDAuOTM0IDMuMTgxIDEuNDc1IDUuMDM0IDEuNDc1IDY
uMDM3IDAgOS4zNDEtNS4wMDMgOS4zNDEtOS4zNDEgMC0wLjE0NC0wLjAwMy0wLjI4NC0wLjAwOS
0wLjQyNSAwLjY0MS0wLjQ1OSAxLjE5Ny0xLjAzOCAxLjYzNy0xLjY5N3oiPjwvcGF0aD4KPC9zd
mc+Cg=="/>
<br>
<br>
<br>
As CSS
<span class="icon" alt="Icon"></span>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment