<!DOCTYPE html>
<html>
<head>
<style>canvas {width: 30px; height: 30px;}</style>
<script>
function draw(canvas, alpha, image) {
canvas.width = 30;
canvas.height = 30;
var context = canvas.getContext('2d');
context.globalAlpha = alpha;
context.drawImage(image, 0, 0);
}
window.onload = function() {
image = document.querySelector('img');
draw(document.querySelector('#normal'), 1, image);
draw(document.querySelector('#alpha'), 0.5, image);
}
</script>
</head>
<body>
<p>Normal canvas: <canvas id="normal"></canvas></p>
<p>Alpha canvas: <canvas id="alpha"></canvas></p>
<p>Image: <img src='image.svg'/></p>
</body>
</html>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" height="36" viewBox="0 0 36 36">
<g>
<rect x="6" y="2" width="24" height="24" rx="3" ry="3" fill="black"/>
<rect x="7" y="3" width="22" height="22" rx="3" ry="3" fill="black"/>
</g>
<g transform="translate(9, 5)" id="contents">
<path fill="#ffe600" d="M7.99 2.5L8 6 7 8v7.5c0 .28-.22.5-.5.5h-2c-.28 0-.5-.22-.5-.5V8L3 6V2.5c0-.28.22-.5.5-.5.27 0 .49.22.49.5L4 5h1V2.5c0-.28.22-.5.5-.5.27 0 .49.22.49.5L6 5h1V2.5c0-.28.22-.5.5-.5.27 0 .49.22.49.5zM14.5 2H14c-.77 0-1.47.48-2 1.28-.62.91-.99 2.24-.99 3.72L11 10.5c0 .28.22.5.5.5h.5v4.5c0 .28.22.5.5.5h2c.28 0 .5-.22.5-.5v-13c0-.28-.22-.5-.5-.5z"/>
</g>
</svg>