/
index.html
131 lines (126 loc) · 6.37 KB
/
index.html
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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html>
<head>
<title>SVGTOJS</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" href="/favicon-1.ico">
</head>
<body onload="init();">
<div class="app" id="nojs">
<script>document.getElementsByClassName("app")[0].id = "intro"</script>
<div class="page">
<div class="pageTitle">svgtojs requires js <pre style="display: inline;">:/</pre></div>
<div class="pageContainer">
<div class="topUI limitWidth">
<div class="info">The svgtojs tool requires javascript, naturally. Please enable it to run this website.<br/>We've made sure the UI uses as little javascript as possible to function.<br/> There are no net requests made after loading this site. What you download the first time round (html+css+js) is what you get, and nothing more.</div>
</div>
</div>
</div>
<div class="page">
<div class="pageTitle"><b>svgtojs</b> - What is it?</div>
<div class="pageContainer">
<div class="topUI limitWidth">
<div class="info">The svgtojs tool is a program which converts conventional svg images into a set of drawing commands for the HTML5 Canvas API. These commands are output to text, such that a file can store and recall the canvas representation of the svg file it was made from. This is especially useful for graphics libraries which can't use svg images, such as three.js, or for sending bitmap versions of svgs for very small file cost, often as little as 1.2x the original svg files. Refer to the project page for more information.<br/><br/>
<b>Copy-Paste Tool</b><br/>
Use the Copy-Paste Tool if you are new to this tool and have never used it before. The UI will be able to introduce the concepts needed to understand the input, outputs, and options related to this tool.<br/><br/>
<b>Batch Tool</b><br/>
The batch tool can operate the same way on multiple files quickly, making it useful to experienced users with larger needs.<br/><br/>
<b>Participate</b><br/>
To see the full project page with ongoing, unreleased developments, go to <a href="https://www.github.com/dylan-thinnes/svgtojs">dylan-thinnes/svgtojs</a>.<br/>
To see the source for the latest release which composes this website, go to <a href="https://www.github.com/svgtojs/svgtojs.github.io">svgtojs/svgtojs.github.io</a>.
</div>
</div>
</div>
<div class="pageNav">
<div class="buttons">
<a class="button dynamic largeWidth" id="multiMode">< To Batch Tool</a>
<a class="button dynamic largeWidth" id="singleMode">To Copy-Paste Tool ></a>
</div>
</div>
</div>
<div class="page">
<div class="pageTitle">Copy-Paste Tool</div>
<div class="pageContainer">
<div class="topUI" id="left">
<div class="title">Input SVG</div>
<div contenteditable="true" spellcheck="false" class="code" id="svgCodeInput"></div>
<div class="buttons">
<!-- <a class="button" id="svgUpload">Upload</a> -->
<a class="button" id="svgGetMarkup">Test Markup</a>
<a class="button" id="svgPreview">Preview</a>
<a class="button" id="svgSubmit">Submit</a>
</div>
<!--<div class="buttons">
<input type="checkbox">Auto-Preview</input>
</div>-->
<div class="title">SVG Preview:</div>
<div class="outputContainer" id="svgPreviewOutput">
</div>
<!-- <div class="title gotoView" id="gotoIntroFromSingle">< To Intro</div> -->
</div>
<div class="topUI" id="right">
<div class="title">Output</div>
<div contenteditable="true" spellcheck="false" class="code" id="jsCodeOutput"></div>
<div class="buttons">
<!-- <a class="button" id="jsDownload">Download</a> -->
<a class="button" id="jsTest">Test</a>
</div>
<!--<div class="buttons">
<input type="text" name="" placeholder="canvas name"></input>
<input type="checkbox" id="singleAutoTest">Auto-Test</input>
</div>-->
<div class="title">JS Test:</div>
<div class="outputContainer" id="">
<canvas id="canvasPreview" height="0" width="0"></canvas>
</div>
<!-- <div class="title gotoView" id="gotoMultiFromSingle">To Batch Tool ></div> -->
<!-- <div class="button dynamic gotoView" id="gotoMultiFromSingle">To Batch Tool ></div> -->
</div>
</div>
<div class="pageNav">
<div class="buttons">
<a class="button dynamic largeWidth" id="gotoIntroFromSingle">< To Intro</a>
<a class="button dynamic largeWidth" id="gotoMultiFromSingle">To Batch Tool ></a>
</div>
</div>
</div>
<div class="page">
<div class="pageTitle">Batch Tool</div>
<div class="pageContainer">
<div class="topUI limitWidth">
<div class="buttons">
<input type="file" name="batchUpload" multiple id="batchUpload"></input>
</div>
<div class="buttons">
<input type="text" name="" placeholder="Batch Filename" id="batchFileName"></input>
<input type="checkbox" name="" id="batchAutoConvert">Auto-Convert</input>
</div>
<div id="fileList">
<div class="file headers"><input class="fileSelected" id="checkAll" type="checkbox" name=""></input><div class="fileRow"><div class="fileSVG">File Name</div><span class="fileSpacer">></span><div type="text" class="fileJS">Output Name</div></div></div>
</div>
<pre id="fileListKey">Color Codes for ">": <span id="fileListKey1">Error</span> <span id="fileListKey2">Ready to Convert</span> <span id="fileListKey3">Converting</span> <span id="fileListKey4">Converted - Ready to DL</span>
</pre>
<div class="buttons">
<div class="button" id="batchConvert">Convert</div>
<div class="button" id="batchDownload">Download</div>
</div>
</div>
</div>
<div class="pageNav">
<div class="buttons">
<a class="button dynamic largeWidth" id="gotoSingleFromMulti">< To Copy-Paste Tool</a>
<a class="button dynamic largeWidth" id="gotoIntroFromMulti">To Intro ></a>
</div>
</div>
</div>
</div>
<canvas id="canvgCanvas"></canvas>
<script type="text/javascript" src="scripts/sinon-3.2.1.js"></script>
<script type="text/javascript" src="scripts/rgbcolor.js"></script>
<script type="text/javascript" src="scripts/StackBlur.js"></script>
<script type="text/javascript" src="scripts/canvg.js"></script>
<script type="text/javascript" src="scripts/FileSaver.min.js"></script>
<script type="text/javascript" src="scripts/Blob.js"></script>
<script type="text/javascript" src="scripts/main.js"></script>
</body>
</html>