-
Notifications
You must be signed in to change notification settings - Fork 1
/
icon_maker.htm
72 lines (61 loc) · 2.02 KB
/
icon_maker.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Open Web App Icon</title>
<script type="text/javascript">
'use strict';
var init = window.onload = function () {
var lnk = document.querySelector('a'),
cnv = document.createElement('canvas'),
ctx = cnv.getContext('2d'),
img = new Image();
while (lnk.hasChildNodes()) {
lnk.removeChild(lnk.lastChild);
}
lnk.appendChild(cnv);
cnv.width = cnv.height = 512;
img.onload = function () {
ctx.drawImage(img, 0, 0);
self.URL.revokeObjectURL(img.src);
lnk.href = ctx.canvas.toDataURL('image/png;base64;');
lnk.download = 'icon.png';
};
img.src = self.URL.createObjectURL(
new Blob([document.querySelector('#code').value],
{type: 'image/svg+xml;charset=utf-8'})
);
};
</script>
</head>
<body style="text-align:center">
<a id="icon"></a>
<hr />
<div><button onclick="init()">Redraw</button></div>
<textarea id="code" rows="20" cols="60">
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="-14 -14 28 28" width="512" height="512">
<title>mozilla.ch - logo</title>
<desc>
This is Mozilla Switzerland's official logo.
The canvas is square, no rounded corners.
There's a solid red background, a large white
letter "m" at the bottom and a small white
Swiss cross in the top right corner.
</desc>
<rect id="background" fill="#c33"
x="-50%" y="-50%" width="100%" height="100%" />
<path id="mozilla_logo" fill="#fff"
d="m-7,-4 q0.3,0.5 0.5,1.5
c2,-2 6,-2 7.5,0.5
c3,-3 9,-3 8.75,2.75
v11 h-4 v-10 q0,-4 -4,-1
v11 h-4 v-10 q0,-4 -4,-1
v11 h-4 v-10 q0,-3.5 -0.5,-4.75 z" />
<g id="swiss_cross" fill="#fff">
<rect x="27%" y="-42%" width="7%" height="23%" />
<rect x="19%" y="-34%" width="23%" height="7%" />
</g>
</svg></textarea>
</body>
</html>