mirror of
https://github.com/niklasvh/html2canvas.git
synced 2023-08-10 21:13:10 +03:00
42 lines
3.0 KiB
HTML
42 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Base64 svg</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
<script type="text/javascript" src="../../../test.js"></script>
|
|
<style>
|
|
body {
|
|
font-family: Arial;
|
|
}
|
|
|
|
#svg1:before {
|
|
content: '';
|
|
width: 125px;
|
|
height: 150px;
|
|
display: inline-block;
|
|
background-size: 125px 150px;
|
|
background-image: url('data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3OC4zMSA5My44MiIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6cmVkIj4NCgk8ZGVmcz4NCgkJPHN0eWxlPg0KCQkJLmNscy0xe2ZpbGw6IzEzYTNkNzt9DQoJCTwvc3R5bGU+DQoJPC9kZWZzPg0KCTx0aXRsZT4NCgkJbmV3cy1pY29uLWRqLXVwZGF0ZWQNCgk8L3RpdGxlPg0KCTxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTAsNDYuOTFWMEw1MS42NC4xM2wyLjIxLjU1YzEwLjcxLDIuNjgsMTguNTYsOS41MiwyMi40LDE5LjUxYTM0Ljc2LDM0Ljc2LDAsMCwxLDEuOTMsOC44NmwuMTMsMi4wOUg2Mi43MWwtLjEzLTFhMTYuMzksMTYuMzksMCwwLDAtMy4zMi04LjQsMTYuODIsMTYuODIsMCwwLDAtNy44My01LjQ4bC0xLjY5LS41OC0zNC0uMTJ2NjIuN0gzMS4zNFY5My44MkgwVjQ2LjkxWiIgLz4NCgk8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik00My4xMiw4Ni4xVjc4LjMybDIuNzktLjE0QTMyLjA2LDMyLjA2LDAsMCwwLDUwLDc3LjczLDE3LjEsMTcuMSwwLDAsMCw2MC45LDY5LjE0YzEuNy0zLjQzLDEuNjQtMi44OSwxLjczLTE1LjIzbC4wOC0xMUg3OC4yN2wtLjE2LDIzLjg3TDc3LjU3LDY5QTMxLjA5LDMxLjA5LDAsMCwxLDY5LDg0LjM2LDMxLjM1LDMxLjM1LDAsMCwxLDU2LjgzLDkyYTI5LjQyLDI5LjQyLDAsMCwxLTEwLDEuNzRsLTMuNzMuMTJWODYuMVoiIC8+DQo8L3N2Zz4NCg==');
|
|
}
|
|
#svg2:before {
|
|
content: '';
|
|
width: 64px;
|
|
height: 64px;
|
|
display: inline-block;
|
|
background-size: 64px 64px;
|
|
background-image: url('data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3OC4zMSA5My44MiIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6cmVkIj4NCgk8ZGVmcz4NCgkJPHN0eWxlPg0KCQkJLmNscy0xe2ZpbGw6IzEzYTNkNzt9DQoJCTwvc3R5bGU+DQoJPC9kZWZzPg0KCTx0aXRsZT4NCgkJbmV3cy1pY29uLWRqLXVwZGF0ZWQNCgk8L3RpdGxlPg0KCTxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTAsNDYuOTFWMEw1MS42NC4xM2wyLjIxLjU1YzEwLjcxLDIuNjgsMTguNTYsOS41MiwyMi40LDE5LjUxYTM0Ljc2LDM0Ljc2LDAsMCwxLDEuOTMsOC44NmwuMTMsMi4wOUg2Mi43MWwtLjEzLTFhMTYuMzksMTYuMzksMCwwLDAtMy4zMi04LjQsMTYuODIsMTYuODIsMCwwLDAtNy44My01LjQ4bC0xLjY5LS41OC0zNC0uMTJ2NjIuN0gzMS4zNFY5My44MkgwVjQ2LjkxWiIgLz4NCgk8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik00My4xMiw4Ni4xVjc4LjMybDIuNzktLjE0QTMyLjA2LDMyLjA2LDAsMCwwLDUwLDc3LjczLDE3LjEsMTcuMSwwLDAsMCw2MC45LDY5LjE0YzEuNy0zLjQzLDEuNjQtMi44OSwxLjczLTE1LjIzbC4wOC0xMUg3OC4yN2wtLjE2LDIzLjg3TDc3LjU3LDY5QTMxLjA5LDMxLjA5LDAsMCwxLDY5LDg0LjM2LDMxLjM1LDMxLjM1LDAsMCwxLDU2LjgzLDkyYTI5LjQyLDI5LjQyLDAsMCwxLTEwLDEuNzRsLTMuNzMuMTJWODYuMVoiIC8+DQo8L3N2Zz4NCg==');
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div>
|
|
Inline svg1 image(same size as fixed size): <br />
|
|
<div id="svg1"></div>
|
|
|
|
Inline svg2 image(custom size): <br />
|
|
<div id="svg2"></div>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |