-
Notifications
You must be signed in to change notification settings - Fork 18
/
index.html
233 lines (208 loc) · 11.6 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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="description"
content="swiftvg — Convert SVG path data to swift 3 syntax"
/>
<title>
swiftvg – Convert SVG path data to a Swift 3 UIBezierPath
</title>
<style>
* { box-sizing: border-box; }
html,
body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
body {
background-color: #FFF;
color: #000;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
font-size: 16px;
line-height: 1.4;
padding-top: 1px;
}
main {
margin: 5vw auto 0 auto;
width: 90vw;
}
code {
border-radius: 3px;
font-weight: 600;
}
a {
color: #000;
}
p {
margin: 0;
max-width: 40em;
}
p + * {
margin-top: 1em;
}
a:hover,
a:active {
color: #000;
}
.h1,
.h2,
.h3 {
line-height: 1.1;
letter-spacing: 0.03em;
margin: 0 0 1em; 0;
}
.h2,
.h3 {
font-weight: 500;
}
.h1 {
border-top: 6px solid #000;
font-size: 3rem;
padding: 0.4em 0 0 0;
}
.h2 {
font-size: 2.25rem;
}
.h3 {
font-size: 1.5rem;
}
.h4 {
font-size: 1.25rem;
text-transform: uppercase;
}
footer {
font-size: 0.618rem;
margin: 0.5em 0;
}
svg {
fill: #000;
}
.io {
margin-top: 1em;
}
.input,
.output {
border: 1px solid #000;
border-radius: 3px;
color: #000;
display: block;
font-family: monospace;
font-size: 1rem;
font-weight: 600;
height: 50vh;
line-height: 1.4;
max-height: 300px;
padding: 0.5em 0.9em;;
width: 100%;
}
.output {
background-color: #FAFAFA;
overflow: scroll;
white-space: pre;
margin-top: 1em;
}
@media (min-width: 768px) {
main {
margin-top: 2vw;
}
.text,
.io {
display: inline-block;
margin-top: 0;
width: calc(50% - 12px);
vertical-align: top;
}
.text {
margin-right: 19px;
}
.input,
.output {
height: 30vh;
}
}
</style>
</head>
<body>
<main>
<h1 class="h1">
<svg
width="207px"
height="62px"
viewBox="0 0 207 62"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<path
d="M9.93650014,36.744 L0.891500139,36.744 C0.980833919,39.0666783 1.505662,40.9984923 2.46600014,42.5395 C3.42633827,44.0805077 4.65465932,45.3199953 6.15100014,46.258 C7.64734095,47.1960047 9.35582387,47.865998 11.2765001,48.268 C13.1971764,48.670002 15.1624901,48.871 17.1725001,48.871 C19.1378433,48.871 21.0696573,48.6811686 22.9680001,48.3015 C24.866343,47.9218314 26.5524928,47.2630047 28.0265001,46.325 C29.5005075,45.3869953 30.6953289,44.1475077 31.6110001,42.6065 C32.5266714,41.0654923 32.9845001,39.1560114 32.9845001,36.878 C32.9845001,35.269992 32.6718366,33.9188388 32.0465001,32.8245 C31.4211637,31.7301612 30.5948386,30.8145037 29.5675001,30.0775 C28.5401617,29.3404963 27.3676734,28.7486689 26.0500001,28.302 C24.7323269,27.8553311 23.3811737,27.4756682 21.9965001,27.163 C20.6564934,26.8503318 19.3388399,26.5600013 18.0435001,26.292 C16.7481603,26.0239987 15.5980052,25.7225017 14.5930001,25.3875 C13.5879951,25.0524983 12.7728366,24.6170027 12.1475001,24.081 C11.5221637,23.5449973 11.2095001,22.8526709 11.2095001,22.004 C11.2095001,21.2893298 11.388165,20.7198355 11.7455001,20.2955 C12.1028353,19.8711645 12.5383309,19.5473344 13.0520001,19.324 C13.5656694,19.1006655 14.1351637,18.9555003 14.7605001,18.8885 C15.3858366,18.8214997 15.9664975,18.788 16.5025001,18.788 C18.199842,18.788 19.6738272,19.1118301 20.9245001,19.7595 C22.1751731,20.4071699 22.8674995,21.6466575 23.0015001,23.478 L32.0465001,23.478 C31.8678326,21.3339893 31.3206714,19.558507 30.4050001,18.1515 C29.4893289,16.744493 28.3391737,15.6166709 26.9545001,14.768 C25.5698265,13.9193291 23.9953423,13.3163351 22.2310001,12.959 C20.466658,12.6016649 18.6465095,12.423 16.7705001,12.423 C14.8944908,12.423 13.0631757,12.5904983 11.2765001,12.9255 C9.48982454,13.2605017 7.88184062,13.8411625 6.45250014,14.6675 C5.02315966,15.4938375 3.87300449,16.6216595 3.00200014,18.051 C2.13099578,19.4803405 1.69550014,21.3116555 1.69550014,23.545 C1.69550014,25.0636743 2.00816368,26.3478281 2.63350014,27.3975 C3.2588366,28.4471719 4.08516167,29.3181632 5.11250014,30.0105 C6.13983861,30.7028368 7.31232688,31.2611645 8.63000014,31.6855 C9.94767339,32.1098355 11.2988265,32.4783318 12.6835001,32.791 C16.0781838,33.5056702 18.7246573,34.2203298 20.6230001,34.935 C22.521343,35.6496702 23.4705001,36.7216595 23.4705001,38.151 C23.4705001,38.9996709 23.2695021,39.7031639 22.8675001,40.2615 C22.4654981,40.8198361 21.9630032,41.2664983 21.3600001,41.6015 C20.7569971,41.9365017 20.0870038,42.1821659 19.3500001,42.3385 C18.6129965,42.4948341 17.9095035,42.573 17.2395001,42.573 C16.3014954,42.573 15.3970045,42.4613344 14.5260001,42.238 C13.6549958,42.0146656 12.8845035,41.6685023 12.2145001,41.1995 C11.5444968,40.7304977 10.9973356,40.1275037 10.5730001,39.3905 C10.1486647,38.6534963 9.93650014,37.7713385 9.93650014,36.744 Z M72.9465001,48 L83.8675001,13.361 L74.0855001,13.361 L67.7205001,36.811 L67.5865001,36.811 L61.6905001,13.361 L52.4445001,13.361 L46.6825001,36.878 L46.5485001,36.878 L40.1835001,13.361 L30.1335001,13.361 L41.1215001,48 L50.9705001,48 L56.8665001,24.751 L57.0005001,24.751 L63.1645001,48 L72.9465001,48 Z M94.4735001,8.001 L94.4735001,0.162 L84.9595001,0.162 L84.9595001,8.001 L94.4735001,8.001 Z M84.9595001,13.361 L84.9595001,48 L94.4735001,48 L94.4735001,13.361 L84.9595001,13.361 Z M101.8585,19.726 L101.8585,48 L111.3725,48 L111.3725,19.726 L117.9385,19.726 L117.9385,13.361 L111.3725,13.361 L111.3725,11.284 C111.3725,9.85465952 111.651664,8.83850302 112.21,8.2355 C112.768336,7.63249698 113.69516,7.331 114.9905,7.331 C116.196506,7.331 117.357828,7.39799933 118.4745,7.532 L118.4745,0.43 C117.670496,0.38533311 116.844171,0.329500335 115.9955,0.2625 C115.146829,0.195499665 114.298171,0.162 113.4495,0.162 C109.563481,0.162 106.660176,1.14465684 104.7395,3.11 C102.818824,5.07534316 101.8585,7.59898459 101.8585,10.681 L101.8585,13.361 L96.1635,13.361 L96.1635,19.726 L101.8585,19.726 Z M133.9565,13.361 L133.9565,2.976 L124.4425,2.976 L124.4425,13.361 L117.934143,13.3621826 L117.934143,19.7255859 L124.4425,19.726 L124.4425,40.161 C124.4425,41.9030087 124.73283,43.3099946 125.3135,44.382 C125.89417,45.4540054 126.686995,46.2803304 127.692,46.861 C128.697005,47.4416696 129.858327,47.832499 131.176,48.0335 C132.493673,48.234501 133.889493,48.335 135.3635,48.335 C136.301505,48.335 137.261828,48.3126669 138.2445,48.268 C139.227172,48.2233331 140.120496,48.1340007 140.9245,48 L140.9245,40.63 C140.477831,40.7193338 140.008836,40.7863331 139.5175,40.831 C139.026164,40.8756669 138.512503,40.898 137.9765,40.898 C136.368492,40.898 135.296503,40.6300027 134.7605,40.094 C134.224497,39.5579973 133.9565,38.486008 133.9565,36.878 L133.9565,19.726 L140.9245,19.726 L140.9245,13.361 L133.9565,13.361 Z M163.945,48 L175.67,13.361 L166.223,13.361 L158.92,37.012 L158.786,37.012 L151.483,13.361 L141.5,13.361 L153.359,48 L163.945,48 Z M190.0755,39.826 C188.601493,39.826 187.373171,39.5133365 186.3905,38.888 C185.407828,38.2626635 184.615003,37.4586716 184.012,36.476 C183.408997,35.4933284 182.984668,34.3878395 182.739,33.1595 C182.493332,31.9311605 182.3705,30.6916729 182.3705,29.441 C182.3705,28.1456602 182.515665,26.9061726 182.806,25.7225 C183.096335,24.5388274 183.56533,23.4891712 184.213,22.5735 C184.86067,21.6578288 185.664662,20.9320027 186.625,20.396 C187.585338,19.8599973 188.735493,19.592 190.0755,19.592 C191.638841,19.592 192.934161,19.8823304 193.9615,20.463 C194.988838,21.0436696 195.815163,21.8253284 196.4405,22.808 C197.065836,23.7906716 197.512499,24.9184936 197.7805,26.1915 C198.048501,27.4645064 198.1825,28.8156595 198.1825,30.245 C198.1825,31.4956729 198.015002,32.6904943 197.68,33.8295 C197.344998,34.9685057 196.842503,35.9846622 196.1725,36.878 C195.502497,37.7713378 194.653838,38.4859973 193.6265,39.022 C192.599161,39.5580027 191.415507,39.826 190.0755,39.826 Z M206.871,45.789 L206.871,13.361 L197.826,13.361 L197.826,17.984 L197.692,17.984 C196.530661,15.9739899 195.090175,14.5446709 193.3705,13.696 C191.650825,12.8473291 189.652011,12.423 187.374,12.423 C184.961988,12.423 182.829176,12.8919953 180.9755,13.83 C179.121824,14.7680047 177.569673,16.0298254 176.319,17.6155 C175.068327,19.2011746 174.11917,21.0324896 173.4715,23.1095 C172.82383,25.1865104 172.5,27.3416555 172.5,29.575 C172.5,31.9423452 172.779164,34.1868227 173.3375,36.3085 C173.895836,38.4301773 174.777994,40.2838254 175.984,41.8695 C177.190006,43.4551746 178.730991,44.7058288 180.607,45.6215 C182.483009,46.5371712 184.71632,46.995 187.307,46.995 C189.406344,46.995 191.405157,46.5595044 193.3035,45.6885 C195.201843,44.8174956 196.664662,43.4663425 197.692,41.635 L197.826,41.635 L197.826,46.191 C197.870667,48.6476789 197.278839,50.679992 196.0505,52.288 C194.822161,53.896008 192.868013,54.7 190.188,54.7 C188.490658,54.7 186.99434,54.3538368 185.699,53.6615 C184.40366,52.9691632 183.532669,51.7296756 183.086,49.943 L173.639,49.943 C173.773001,51.9083432 174.320162,53.594493 175.2805,55.0015 C176.240838,56.408507 177.446826,57.5586622 178.8985,58.452 C180.350174,59.3453378 181.958158,60.0041645 183.7225,60.4285 C185.486842,60.8528355 187.217658,61.065 188.915,61.065 C192.890353,61.065 196.061655,60.5290054 198.429,59.457 C200.796345,58.3849946 202.605327,57.0785077 203.856,55.5375 C205.106673,53.9964923 205.921831,52.3326756 206.3015,50.546 C206.681169,48.7593244 206.871,47.1736736 206.871,45.789 Z"
></path>
</svg>
</h1>
<section class="text">
<h2 class="h3">Convert SVG path data to a Swift 3 UIBezierPath</h2>
<p>
As an iOS developer, you have to support at least three different
pixel densities. Why waste your time managing a million image assets
for different resolutions and states?
</p>
<p>
<code>swiftvg</code> is a little tool written in javascript to help
you convert your vector SVG images into
<code>UIBezierPath</code> shapes. Paste the string from the
<code>d</code> attribute and vóila, your
<code>UIBezierPath</code> code is generated for you.
</p>
<p>
The code is open source (MIT) on
<a href="https://github.com/mike-engel/swiftvg">Github</a>. Check it
out, maybe.
</p>
</section>
<section class="io">
<textarea
class="input"
data-hook="input"
placeholder="Your `d` attribute string goes here."
>
M10,6 L10,0 L6,0 L6,6 L0,6 L0,10 L6,10 L6,16 L10,16 L10,10 L16,10 L16,6 L10,6 Z</textarea
>
<textarea
class="output"
data-hook="output"
readonly
>
let shape = UIBezierPath()
shape.move(to: CGPoint(x: 10, y: 6))
shape.addLine(to: CGPoint(x: 10, y: 0))
shape.addLine(to: CGPoint(x: 6, y: 0))
shape.addLine(to: CGPoint(x: 6, y: 6))
shape.addLine(to: CGPoint(x: 0, y: 6))
shape.addLine(to: CGPoint(x: 0, y: 10))
shape.addLine(to: CGPoint(x: 6, y: 10))
shape.addLine(to: CGPoint(x: 6, y: 16))
shape.addLine(to: CGPoint(x: 10, y: 16))
shape.addLine(to: CGPoint(x: 10, y: 10))
shape.addLine(to: CGPoint(x: 16, y: 10))
shape.addLine(to: CGPoint(x: 16, y: 6))
shape.addLine(to: CGPoint(x: 10, y: 6))
shape.close()</textarea
>
</section>
<footer>
<span>© 2017 Mike Engel</span>
<span
><a
href="https://github.com/mike-engel/swiftvg/tree/master/LICENSE.md"
target="_blank"
>MIT</a
></span
>
</footer>
</main>
<script src="site/bundle.js"></script>
</body>
</html>