-
Notifications
You must be signed in to change notification settings - Fork 23
/
index.html
65 lines (55 loc) · 2.28 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
<!-- Copyright 2019 The Skiafy Authors
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
https://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. -->
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Skiafy your SVG</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script src="skiafy.js"></script>
<script src="main.js"></script>
</head>
<h1>Skiafy</h1>
<p id="use-webkit" class="caveat" hidden>This tool probably doesn't work on your browser. Try Chromium.</p>
<p class="caveat">Caveat emptor! This program makes lots of assumptions. Its
output is just a starting point; you may have to manipulate it further.</p>
<p>Strongly consider pre-processing the SVG source with <a
href="https://jakearchibald.github.io/svgomg/">Jake Archibald’s SVGOMG tool</a>
(a web interface to <a href="https://github.com/svg/svgo/">the SVGO SVG
optimizer</a>).</p>
<div id="top-stuff">
<div id="input-stuff">
<p>Paste your SVG source below and then <button id="go-button">Skiafy!</button></p>
<p>Options:</p>
<p>
<label><input id="flip-x" type="checkbox"> Flip on <var>x</var> axis</label><br/>
<label><input id="flip-y" type="checkbox"> Flip on <var>y</var> axis</label><br/>
<label>
<input id="preserve-fill" type="checkbox"> Try to preserve fill color (note, it's often preferable to specify an icon's color at runtime)
<br/>
<span class="limitation">Works only with fill attributes & expects colors in form #FFF or #FFFFFF.</span>
</label>
</p>
<p>
Translate (applies after flip):<br/>
<input id="transform-x" placeholder="x"><br/>
<input id="transform-y" placeholder="y">
</p>
<textarea id="user-input"></textarea>
<div>
<span>Skiafied:</span>
<pre id="output-span">Skiafied output will be here</pre>
</div>
</div>
<div id="svg-anchor">
</div>
</div>
</html>