-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathCSS2SVG.htm
617 lines (567 loc) · 36.3 KB
/
CSS2SVG.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
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
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>CSS3 Gradient → SVG Image Converter</title>
<style>
/* AM: CSS/JS annotations by Anthony Martinez are preceded by "AM:" */
*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
*:not(#NO):not(#IE){filter:none} /* AM: Hide filters in IE9 since they don't work correctly with border-radius -- doubled to overcome #convert filter */
html,body{min-height:100%;margin:0;text-shadow:1px 1px 2px #bbb}
body{font:1em/1.35 sans-serif;background:#c1c4ce;overflow-x:hidden;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f7',endColorstr='#c1c4ce');
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3ClinearGradient id='g1' x2='0' y2='1'%3E%3Cstop stop-color='%23f5f5f7'/%3E%3Cstop offset='1' stop-color='%23c1c4ce'/%3E%3C/linearGradient%3E%3Crect width='100%25' height='100%25' fill='url(%23g1)'/%3E%3C/svg%3E");
background:-moz-linear-gradient(#f5f5f7,#c1c4ce);background:linear-gradient(#f5f5f7,#c1c4ce)}
a{text-decoration:none;border-bottom:solid 1px}label>a{border:0;vertical-align:super;font:italic 90%/0 sans-serif}a:hover{background:#ff7}
div,svg,textarea,#output{display:block;margin:.25em auto}
h1,h2,.no-js,p.inputboxes,button,#footer,#git{text-align:center}
p{margin:.25em 0}.no-js,#preview p,#downwarn{color:#822}
.inputboxes,.outputboxes,#preview{margin:.5em auto;width:80%;max-width:1400px}
.inputboxes{border:1px solid #333;margin-bottom:20px;padding:10px;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px}
textarea,#preview{width:100%;resize:vertical}
input:focus,textarea:focus,code,kbd{outline:0;background:#eff}
#cssinput{height:100px;padding:5px}
input:disabled+label{color:#aaa}
#userH,#userW,textarea,code,kbd{font:normal 1em Consolas,monospace,serif}
#userH,#userW,textarea{border:solid 1px #333;font-size:75%;overflow:auto\9} /* AM: overflow:auto only for IE, to hide scrollbars on textarea until needed. */
#userH,#userW{width:60px;text-align:right}
#wrap{position:relative}
button{border:1px solid #fff;float:right;margin:0 0 0 2em;height:35px;min-width:75px;font-weight:700;cursor:pointer;
-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;
-webkit-box-shadow:0 0 3px #555;-moz-box-shadow:0 0 3px #555;box-shadow:0 0 3px #555;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3ClinearGradient id='g1' x2='0' y2='1'%3E%3Cstop stop-color='%23eee'/%3E%3Cstop offset='1' stop-color='%23ccc'/%3E%3C/linearGradient%3E%3Crect width='100%25' height='100%25' fill='url(%23g1)'/%3E%3C/svg%3E");
background:linear-gradient(#eee,#ccc)}
button:disabled{cursor:not-allowed}
button:not(:disabled):hover,button:focus{color:#fff;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3ClinearGradient id='g1' x2='0' y2='1'%3E%3Cstop stop-color='%237d7e7d'/%3E%3Cstop offset='1' stop-color='%230e0e0e'/%3E%3C/linearGradient%3E%3Crect width='100%25' height='100%25' fill='url(%23g1)'/%3E%3C/svg%3E");
background:linear-gradient(#7d7e7d,#0e0e0e)}
#convert{position:absolute;top:0;right:0;color:#fff;background:#499bea;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#499bea',endColorstr='#207ce5');
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3ClinearGradient id='g1' x2='0' y2='1'%3E%3Cstop stop-color='%23499bea'/%3E%3Cstop offset='1' stop-color='%23207ce5'/%3E%3C/linearGradient%3E%3Crect width='100%25' height='100%25' fill='url(%23g1)'/%3E%3C/svg%3E");
background:-moz-linear-gradient(#499bea,#207ce5);background:linear-gradient(#499bea,#207ce5)}
#convert:hover,#convert:focus{background:#2c539e;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2c539e',endColorstr='#16294f');
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3ClinearGradient id='g1' x2='0' y2='1'%3E%3Cstop stop-color='%232c539e'/%3E%3Cstop offset='1' stop-color='%2316294f'/%3E%3C/linearGradient%3E%3Crect width='100%25' height='100%25' fill='url(%23g1)'/%3E%3C/svg%3E");
background:-moz-linear-gradient(#2c539e,#16294f);background:linear-gradient(#2c539e,#16294f)}
.outputboxes textarea{height:200px;padding:10px;
-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;
-webkit-box-shadow:inset 0 0 20px #999;-moz-box-shadow:inset 0 0 20px #999;box-shadow:inset 0 0 20px #999}
#output,#preview{margin:.75em auto}
textarea[readonly]{background:#ccc}
svg{margin:0 auto;box-shadow:0 0 8px #777;background:#fff}
#uritext,#warn,#git{display:none}
#footer{font-size:75%}
/* AM: GitHub ribbon with no image (inspired by github.com/codepo8/css-fork-on-github-ribbon)! However, it will not show (properly if at all) in IE8-, FF3-, or O10.1- -- the media query filters them out */
@media screen and (min-width:800px){
#git{position:fixed;display:block;top:38px;right:-45px;border:dotted #fff;border-width:1px 0;width:198px;padding:5px 20px;
font:700 1em/1.4 Corbel,Candara,'Segoe UI';
background:#a00;color:#fff;text-shadow:1px 1px 5px #444;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;
-webkit-box-shadow:0 0 0 1px #a00,0 0 9px #999;-moz-box-shadow:0 0 0 1px #a00,0 0 9px #999;box-shadow:0 0 0 1px #a00,0 0 9px #777;
/* AM: WebKit needs special treatment (the translate3d) to compensate for awful font rendering. Blech! */
-webkit-transform:rotate(45deg) translate3d(0,0,0);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}
#git:hover{background:#fc0;-webkit-box-shadow:0 0 0 1px #fc0,0 0 9px #777;-moz-box-shadow:0 0 0 1px #fc0,0 0 9px #777;box-shadow:0 0 0 1px #fc0,0 0 9px #777}
}
</style>
</head>
<body>
<h1>CSS3 Gradient → SVG Image Converter</h1>
<noscript><p class="no-js">This page requires JavaScript to function correctly.</p></noscript>
<p class="inputboxes">
Need to create CSS3 Gradients? We'd recommend using <a href="http://www.colorzilla.com/gradient-editor/" target="_blank">ColorZilla's Ultimate CSS Gradient Generator</a>.
</p>
<div class="inputboxes">
<p>Enter any CSS3 linear gradient below. <code>-moz-</code>, <code>-webkit-</code>, <code>-o-</code>, <code>-ms-</code>, or W3C unprefixed syntaxes are supported, as are multiple gradients in <a href="http://www.css3.info/preview/multiple-backgrounds/">CSS multiple background syntax</a>. The <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-size">background-size</a></code> property is also supported.</p>
<form>
<textarea id="cssinput"></textarea>
<div id="wrap">
<input type="checkbox" id="clearit"/><label for="clearit">Clear Input Box on Focus</label>
<div><input type="checkbox" id="uricheck"/><label for="uricheck">Generate CSS for IE9 (Data URI Output) <a href="http://css-tricks.com/data-uris/" title="Learn more about data URIs">(?)</a></label>
<input type="checkbox" id="batch" disabled="disabled"/><label for="batch">Batch Mode <a href="https://github.com/camartinez1229/css2svg/blob/master/advanced-usage-techniques.md#batch-mode" title="Read explanation of feature on Github page">(?)</a></label></div>
<p>Width: <input id="userW"/> Height: <input id="userH"/>
<input type="radio" name="userUnit" id="per"/><label for="per">Percent</label>
<input type="radio" name="userUnit" id="userUnit" checked="checked"/><label for="userUnit">Pixels</label></p>
<button id="convert">Convert!</button>
</div>
</form>
</div>
<div class="outputboxes">
<div id="outputtext">
<p>For accurate rendering, specify a width and height above matching the size at which you plan to use the SVG. Otherwise, the script assumes a 300x300 pixel default. After clicking "Convert", paste the output below into a text editor and save as an <kbd>.svg</kbd> file.</p>
<textarea id="output" readonly="readonly"></textarea>
</div>
<div id="updatetext"></div>
<div id="uritext">
<p id="urip"><em id="warn">Preview display/updating is disabled while Batch Mode is active.</em> After clicking "Convert", copy the data URI output below for use as a CSS gradient fallback. <span id="bexp"><code>.selector{background:<paste output here>}</code> is all you need to make it work.</span></p>
<textarea id="uricode" readonly="readonly"></textarea>
</div>
<div id="footer">
<p>Version 1.5.4 — August 14, 2013</p>
<p><em>Page fully compatible with Chrome 7+, Firefox 4+, IE9+, Safari 5.1+, and Opera 11.6+</em> — <a href="http://www.kmhcreative.com/labs/CSS3-2-SVG/">About This Utility</a></p>
<p>© 2011 Kristiana M. Hansen — Free To Use & Distribute<br/><a href="http://www.kmhcreative.com">www.kmhcreative.com</a></p>
<p>Updates contributed by <a href="http://www.linkedin.com/in/canthonymartinez/">Anthony Martinez</a></p>
<p><b>Did any gradient(s) not convert correctly or at all? Please report any issues or other feedback in an update or fork of this <a href="http://jsfiddle.net/camartinez1229/thSxh/">JSFiddle</a> or <a href="https://github.com/kmhcreative/css2svg">Github Repo</a>, or write to <i id="add"><noscript>(please enable JavaScript to see this address)</noscript></i>.</b></p>
</div>
</div>
<a id="git" href="https://github.com/kmhcreative/css2svg">Fork Us On GitHub</a>
<script>
/*!
* CSS2SVG 1.5.4 -- August 14, 2013
* Original script by Kristiana M. Hansen -- www.kmhcreative.com
* Updates by Anthony Martinez -- www.linkedin.com/in/canthonymartinez/
* Licensed Under Creative Commons Attribution-Sharealike 3.0 -- creativecommons.org/licenses/by-sa/3.0/
* Permission hereby granted to use or modify in any way you see fit, as long as this notice stays intact.
*/
(function(){"use strict"; // AM: Activate stricter JS mode on modern browsers.
// AM: Encoded address, originally generated at rumkin.com/tools/mailto_encoder/custom.php -- substantially modded. For script reuse, delete or replace with a function you generate at the source URL.
var doc=document,ML="+t.<ma 1hn2czlgi=or@:\"e>9/f",MI="G5I34A;2=?54>C1?>0H::7<F9?1B545;GE4A;2=?54>C1?>0H::7<F9?1B545;DA1=?54E@JFB8653",OT="",e=78,em=doc.getElementById("add");
while(e--){OT+=ML.charAt(MI.charCodeAt(e)-48);}
em.innerHTML=OT;
window.trim||(String.prototype.trim=function(){return this.replace(/^\s+|\s+$/g,'');}); // AM: IE8- doesn't natively support trim()
// AM: Define window.btoa for IE9- -- adapted from gist.github.com/viatropos/4117663; currently unused in Version >=1.2.0, but will be used again once canvas support is introduced.
//window.btoa||(window.btoa=function(a,b,c,d,e){b='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';for(d=e='';a[d|0]||(b='=',d%1);e+=b[63&c>>8-d%1*8])c=c<<8|a.charCodeAt(d-=-.75);return e;})
// AM: adapted from stackoverflow.com/a/6970814 -- allows for parsing of multiple backgrounds.
function split(string){
var token = /((?:(?:rgb|hsl)a?\(.*?\)\s*\d{0,3}(?:\.\d+)?%?|[^"']|".*?"|'.*?')*?)([(,)]|$)/g; // AM: Modded to permit (rgb|hsl)a?(<colors>) <stop>%, -- without fix, the <stop>% gets trashed, throwing off everything else--ugh.
token.lastIndex=0;
return (function recurse(){
for(var array = [];;) {
var result = '';
result = token.exec(string);
if(result[2] === '(') {
array.push(result[1].trim() + '(' + recurse().join(',') + ')');
result = token.exec(string);
} else {array.push(result[1].trim());}
if(result[2] !== ','){return array;}
}
})();
}
var vect,svg,uri,h,w,
defSvg='<svg width="300px" height="300px" style="background:#ccc"></svg>',
uH=doc.getElementById('userH'),uW=doc.getElementById('userW'),
inp=doc.getElementById('cssinput'),out=doc.getElementById('output'),
convert=doc.getElementById('convert'),update=doc.getElementById('updatetext'),
u=doc.getElementById('uricheck'),b=doc.getElementById('batch'),
uTxt=doc.getElementById('uritext'),uCode=doc.getElementById('uricode'),
bWarn=doc.getElementById('warn'),bExp=doc.getElementById('bexp'),
uOut,bgsUriOut,bUriOut,sel,rep,
x1,y1,x2,y2,tx1,ty1,tx2,ty2,c=100,
// gradientType="linear", // AM: currently unused. May have a use when radial-gradient support is introduced.
dir,dl,bgs,co,col,
colorArr=[],stopArr,stl,
units,prev,prevW,bl,oldWebkit,error,bgSize,bgSizeStr,updateB,toFromFix,hex,downWarnDiv,
cocheck="Check your gradient direction and/or color values.",
trans=/rgba|hsla|transparent/,bgSt=/background-size:[^;}]+/i;
// AM: This function borrowed from gist.github.com/mstalfoort/1293822
function hasInlSvg(){var svgd = doc.createElement('div');svgd.innerHTML='<svg/>';return(svgd.firstChild && svgd.firstChild.namespaceURI)==='http://www.w3.org/2000/svg';}
// AM: Toggle 'batch mode' checkbox based on status of IE9 CSS checkbox
function uTog(){b.disabled=!u.checked;}
// AM: Add batch mode explanatory text if box is checked and input is empty, and toggle display of some elements (also executes when background-size is detected in input).
function bTog(){
var blo='block',inl='inline',no='none';
if(b.checked&&!inp.value){inp.value='.ex1{background:linear-gradient(75deg,#fff,#000)}\n.ex2{background:linear-gradient(to top left,rgba(34,62,99,.5),#fc0,#fedcba)}';}
update.style.display = doc.getElementById('outputtext').style.display = b.checked ? no : blo;
uTxt.style.display = b.checked ? blo : no;
u.disabled = b.checked;
if(b.checked && hasInlSvg())
{bWarn.style.display=inl; if(b.checked){bExp.style.display=no;}}
else{bExp.style.display=inl;bWarn.style.display=no;}
out.value=uCode.value='';
// AM: preview only visible to browsers with inline SVG support. Also reset preview on each convert or page load.
if(hasInlSvg())
{prev=doc.getElementById('preview'),downWarnDiv=doc.getElementById('downwarn');
downWarnDiv.innerHTML=prev.style.cssText='';
prev.innerHTML=defSvg;prevW=update.clientWidth;
updateB.disabled=out.readOnly=1;}
}
u.onclick=uTog; b.onclick=bTog;
window.onload=function(){uTog();bTog();}; // AM: Check status of checkboxes on page load/refresh
inp.onfocus=function(){if(doc.getElementById('clearit').checked){this.value='';}}; // AM: Clear input only if clear on focus checkbox is checked
inp.onkeydown=function(e){ent(e,convert);};
doc.forms[0].onsubmit=function(){return !1;};
// AM: Allow shift+enter to fire convert or update. Code adapted from astackoverflow.com/a/155265.
function ent(e,id){e=e||event;
if(e.keyCode===13&&e.shiftKey){id.click();
e.preventDefault ? e.preventDefault() : e.returnValue=0; // AM: IE8- uses returnValue
}
}
if(hasInlSvg())
{update.innerHTML='<button id="updateb" disabled>Update</button><p>You can edit the output and click "Update" to refresh the preview. If you need to edit the dimensions, then you should edit your original input and convert again, to properly update the SVG angle calculation.</p><h2>Preview</h2><div id="downwarn"></div><div id="preview">'+defSvg+'</div>';
updateB=doc.getElementById('updateb');
out.onkeydown=function(e){ent(e,updateB);};
updateB.onclick=updatePreview;}
convert.onclick=function(){
if(!inp.value){error='This script currently cannot read minds. Please input at least one gradient for it to work with\u2014thanks!';out.value=uCode.value=error;return !1;}
oldWebkit=toFromFix=vect=svg=bgSize=bgsUriOut=bUriOut=sel=''; // AM: reset key variables upon each convert, otherwise, strange gradient renderings may occur
w = !!uW.value ? parseFloat(uW.value) : 300, h = !!uH.value ? parseFloat(uH.value) : 300,
units = doc.getElementById('userUnit').checked ? 'px' : '%';
if(b.checked) // AM: Batch Mode enabled
{// AM: The magic sauce that makes Batch Mode possible -- next line adapted from stackoverflow.com/a/6205047
var css=inp.value.replace(/}/g,'}~'),cssA=css.split('~');
cssA.pop(); // AM: Last item seems to reliably be an empty string, so, toss it
var csl=cssA.length;cssA.reverse(); // AM: Reverse array order so the while loop will process items in the correct order
// AM: throw error if no CSS selectors found
if(!csl){bUriOut='ERROR: You must have at least one well-formed CSS selector, e.g., ".selector{background:linear-gradient(#fff,#000)}", in order for Batch Mode to work.';}
while(csl--) // AM: for each selector, capture the selector and then process the gradient(s)
{sel=cssA[csl].match(/.*?{/);cssA[csl]=cssA[csl].replace(sel,'');
splitGradient(cssA[csl]);
if(!!error){bUriOut+=sel+' <<<<<ERROR: '+error+'>>>>> }\n\n';}
}
uCode.value=bUriOut;
}
else{splitGradient(inp.value);
if(!!error){bTog();out.value=uCode.value='ERROR: '+error;}
}
if(hasInlSvg()&&!bgSize){updateB.disabled=out.readOnly=!!error;} // AM: Enable update button and output codebox only after successful convert
}
function splitGradient(string){bgsUriOut=dir=error=uri=''; // AM: These must get reset upon each iteration of the css loop above
if(string.match(/radial/)){error="The script currently supports only LINEAR gradients.";return !1;}
else if(string.match(/\d(r?em|ex|ch|vh|vm|vmin|vmax)/)){error='Font- or viewport-relative units are not supported. Valid units are "%", "px", "cm", "mm", "in", "pt", and "pc".';return !1;}
// AM: Check for incorrect hex colors here since they may escape the color check below and affect rendering, cause the script to trip, or other weird stuff.
else if(string.match(/#([\da-f]{4,5}|[\da-f]{1,2})\W/)){error=cocheck;return !1;}
if(string.match(bgSt)){bgSize='yes'; bgSizeStr=string.match(bgSt)[0]; string=string.replace(bgSt,'');}
bTog();
bgs = split(string),bl=bgs.length;
if(!!bgSize){bgs.reverse();} // AM: Reverse gradients to process in correct order if background-size detected
while(bl--){rep='';stopArr=[];
if(bgs[bl].match(/repeating/)){rep='yes';}
// AM: Find angle
if(bgs[bl].match(/\-?\d{0,3}(\.\d+)?(deg|g?rad\b|turn)/)){dir=bgs[bl].match(/\-?\d{0,3}(?:\.\d+)?(?:deg|g?rad|turn)/gi);
if(dir[1].match(/g?rad|turn/)) // AM: convert other units to degrees
{var pf1=parseFloat(dir[1]);
if(dir[1].match(/grad/)){dir[1]=pf1/1.1111111;}
else if(dir[1].match(/rad/)){dir[1]=pf1/0.0174532925199;}
else{dir[1]=pf1*360;}
}
dir=parseFloat(dir[1]);
if(!bgs[bl].match(/-(moz|webkit|o|ms)-/)){dir=90-dir;} // AM: Degrees in unprefixed W3C syntax are measured differently
}
// AM: isolate old WebKit syntax
else if(bgs[bl].match(/-webkit-gradient/)){var s=/left|right|\btop\b|bottom|center/g;dl=4;
if(bgs[bl].match(s))
{dir=bgs[bl].match(s);
while(dl--){dir[dl]=dir[dl].replace(/left|top/g,0).replace(/right|bottom/g,100).replace(/center/g,50);} // AM: convert keywords to corresponding percents
}
else{ // AM: Point-to-point figures
dir=bgs[bl].match(/(\-?\d+\.?\d*%?)/g);
dir=dir.slice(0,4); // AM: Get only what's needed, the first four #s or %s
while(dl--)
{if(!dir[dl].match(/%/)) // AM: Convert pixel values to %
{var wh = dl % 2 === 1 ? h : w; // AM: Make sure x-points get divided by width and y, by height
dir[dl]=dir[dl]/wh*c;}
dir[dl]=parseFloat(dir[dl]);
}
}
x1=Math.round(dir[0]*c)/c,y1=Math.round(dir[1]*c)/c,
x2=Math.round(dir[2]*c)/c,y2=Math.round(dir[3]*c)/c;
oldWebkit = 'yes', toFromFix = bgs[bl].match(/from\(.*?\),\s*to\(.*?\),\s*color-stop/) ? 'yes' : ''; // AM: WebKit allows to() to come before color-stops. If that happens, then extra processing will happen below.
}
// AM: No angle defined, so check for origin or destination keywords
else if(bgs[bl].match(/(to )?(top|left|right|bottom)/)){dir=bgs[bl].match(/(to )?(top|left|right|bottom)\s?(top|left|right|bottom)?/gi);
if(dir[0].match(/(right|left)/)){dir[0]=dir[0].replace(/(right|left)\s(top|bottom)/g,"$2$1");} // AM: normalize keyword order for normalizeAngle
dir=dir[0].replace(/\s/g,'');
}
else if(!bgs[bl].match('center')){dir='tobottom';} // AM: no angle or keywords defined; use default 'to bottom'. If 'center' is found, error will be thrown below in normalizeAngle.
bgs[bl]=bgs[bl].replace(/.*?{|color-stop|repeating|linear|radial|gradient|-(moz|webkit|o|ms)-|background(-image)?\:|deg|g?rad|turn|to\s|\btop\b|right|left|bottom|center|-(?!\s+\d)|^\(,|\)$| \b/gm,'').
// AM: If stop-values are present, bound them with '
replace(/(\)|#(?:[\da-f]{3}){1,2}(?!(?:%|px|cm|mm|in\b|pt|pc))|(?:from|to|[^blac])\(|(?:,|\()[a-z]+)(calc\([^)]+\)|\d{0,3}\.?\d*(%|px|cm|mm|in\b|pt|pc)|0?\.\d+)/ig,"$1'$2'");
// AM: Match colors and stop-values when present
colorArr=bgs[bl].match(/(?:from\(|to\()?('.*?',)?(#([\da-f]{3}){1,2}(?!%|px|cm|mm|in\b|pt|pc)|(rgb|hsl)a?\((\d{0,3}(\.\d+)?%?,?){3}[0-1]?\.?\d*\)|[a-z]{5,}|[a-eg-z]{3,})('.*?')?/gi),col=colorArr.length,co=col;
while(col--)
{stopArr[col]=colorArr[col].replace(/.*?'|[^']*/,"'").replace(/'(.*?)'.*?,/,"$1").replace(/'/g,''); // AM: Separate stop-values into new array
colorArr[col]=colorArr[col].replace(/(from|to)\(|'.*?',?/g,''); // AM: Remove stops and other junk to leave colors
/* AM: Test for parsable colors in gradient. Ex: Browsers should throw an error (at least FF does) if rgb() has 4 values, which above regex allows.
* Test only runs in browsers supporting CSS3 colors. Older ones like IE8-, FF2-, O9.6-, and S3.0- skip it.
* Test is permissive. Chances are, it will let RGB values >255, alpha values >1, HSL hues >360, and percents >100 pass even when invalid. Browsers usually cap such values, anyway.
* However, there's no error-checking here for totally invalid values that colorArr will miss above, such as negative RGB decimal values.
* Test will also pick up any stray values not processed by the direction check above.
*/
var d=doc.createElement('div');
d.style.cssText="color:rgba(0,0,0,0)";
if(d.style.color){
d.style.cssText='color:'+colorArr[col];
if(!d.style.color){error=cocheck;return !1;}
}
d=null;
}
stl=stopArr.length;
if(!!oldWebkit){
while(stl--){if(!stopArr[stl].match(/%/)){stopArr[stl]=parseFloat(stopArr[stl])*c+'%';}} // AM: convert WebKit-style decimals to %s
if(!!toFromFix){var fix=colorArr.splice(1,1);colorArr.push(fix.toString());stopArr.splice(1,1);stopArr.push('100%');} // AM: Move color in to() function to end of array
}
if(!oldWebkit){normalizeAngle(dir,bl);}
else{buildSvg(bl);}
if(!!error){return !1;}
if(!!bgSize){finishSVG(svg,uri,1);} // AM: Process each gradient into individual SVG files... inefficient, but it's the only way I know of currently to allow for proper usage of background-size in CSS.
}
if(!bgSize&&!error){finishSVG(svg,uri,bgs.length);}
else{
if(b.checked){bUriOut+=sel+'background:'+bgsUriOut+'}\n\n'; bUriOut=bUriOut.replace(/,\n}/g,'}');}
bgsUriOut=bgsUriOut.replace(/,\n$|,$/g,''); uCode.value=bgsUriOut;
out.readOnly=1;out.value='Output display, editing, and updating is unavailable while using "background-size" in your input. To make changes, edit your original input and convert again.';
if(hasInlSvg()){updateB.disabled=1;sizePreview(bgsUriOut);}
}
}
function normalizeAngle(st,bl){var d='to',t='top',r='right',b='bottom',l='left';
if(isNum(st)){svgAngle(st,bl);} // AM: Angle defined, proceed to calculate vector coords
else{
/* AM: Direction keywords defined -- use pre-determined vector coords and then go to buildSvg.
* Also sets up variables needed for converting pixel-based color-stops to SVG offset values.
* 'center' is a missing keyword. It's invalid in the new W3C syntax, and was poorly supported in the previous prefixed syntax (apparently, only FF supported it).
* Old Webkit syntax is entirely isolated and processed separately before ever reaching this point, thus making it possible to keep the below matrix simple.
*/
x1=y1=y2=tx1=ty1=tx2=ty2=0,x2=c; // AM: reset default coords with each convert. Otherwise, strange things happen, especially with multiple gradients.
if(st===d+r||st===l){tx2=w;}
else if(st===d+t+r||st===b+l){y1=c,ty1=h,tx2=w;}
else if(st===d+t||st===b){x1=y1=c,tx1=tx2=w,ty1=h;}
else if(st===d+t+l||st===b+r){x1=y1=c,x2=0,tx1=w,ty1=h;}
else if(st===d+l||st===r){x1=y1=y2=c,x2=0,tx1=ty2=w,ty1=h;}
else if(st===d+b+l||st===t+r){x1=y2=c,x2=0,tx1=w,ty2=h;}
else if(st===d+b||st===t){x2=0,y2=c,ty2=h;}
else if(st===d+b+r||st===t+l){y2=c,tx2=w,ty2=h;}
else{error="Check your direction value(s). Valid keywords are 'top', 'right', 'bottom', and 'left'.";return !1;}
buildSvg(bl);
}
}
// AM: check if variable is a number -- stackoverflow.com/a/1421988
function isNum(o){return!isNaN(o-0)&&o!==null&&o!==""&&o!==false;}
function svgAngle(v,bl){
// AM: Code is adapted from visualcsstools.com -- determines vect coords based on angle
var wc=w/2,hc=h/2,
m,n=0,o=0,r=360,mx=10000,
k=((v%r)+r)%r,
j=(r-k)*Math.PI/180,
i=Math.tan(j),
l=hc-i*wc;
tx1=ty1=tx2=ty2=null;
if(k===0){tx1=w,ty1=ty2=hc,tx2='0';}
else if(k<90||k>270){n=w;}
else if(k===90){tx1=tx2=wc,ty1='0',ty2=h;}
else if(k===180){tx1='0',ty1=ty2=hc,tx2=w;}
else if(k===270){tx1=tx2=wc,ty1=h,ty2='0';}
if(k>180){o=h;}
m=o+(n/i);
// AM: I could not quite figure out what m, n, and o are supposed to represent from the original code on visualcsstools.com
tx1 = !tx1 ? i*(m-l)/(Math.pow(i,2)+1) : tx1;
ty1 = !ty1 ? i*tx1+l : ty1,
tx2 = !tx2 ? w-tx1 : tx2,
ty2 = !ty2 ? h-ty1 : ty2;
x1=Math.round(tx2/w*mx)/c,y1=Math.round(ty2/h*mx)/c,
x2=Math.round(tx1/w*mx)/c,y2=Math.round(ty1/h*mx)/c,
buildSvg(bl);
}
function buildSvg(bl){var sGrad='',uGrad='',sj=stopArr.join(),
sal = stopArr.length, sr = sal < 20 ? 1000 : 10000, // AM: With many stops, a greater decimal precision of offsets may help
rl=Math.sqrt(Math.pow(tx1-tx2,2) + Math.pow(ty1-ty2,2)); // AM: This calculation (for some hypotenuse, maybe?) needed for later converting pixel color-stops to offset values. Adapted from visualcsstools.com.
// AM: Add first and last stops if missing
if(!isNum(parseFloat(stopArr[0]))){stopArr[0]='0%';}
if(!isNum(parseFloat(stopArr[co-1]))){stopArr[co-1]= !sj.match(/calc|px|cm|mm|in\b|pt|pc/) ? '100%' : rl+"px";}
calcStops(rl); // AM: check if any more stops are missing, and if so, calculate them
if(!!error){return !1;}
if(y1===y2){y1=y2=0;} // AM: equal y-values safe to zero out
vect=" gradientUnits='userSpaceOnUse' x1='"+x1+"%' y1='"+y1+"%' x2='"+x2+"%' y2='"+y2+"%'";
// AM: remove gradientUnits if coords are within bounding box...except in case of old Webkit syntax, which apparently (and oddly) depends on it for accurate rendering. Go figure.
if (x1>=0&&x1<=c && y1>=0&&y1<=c && x2>=0&&x2<=c && y2>=0&&y2<=c && !oldWebkit){vect=vect.replace(" gradientUnits='userSpaceOnUse'",'');}
if(!vect.match(/gradientUnits/))
/* AM: Convert vect coords to decimal to save more bytes (also, since % signs have to be encoded as '%25' anyway in data-URI output, costing a few extra bytes),
* but only when gradientUnits='userSpaceOnUse' is not present -- in that case, they must remain unchanged, or else the rendering will be wrong.
*/
{vect=vect.replace(/x1='[^']+/,"x1='"+x1/c).replace(/y1='[^']+/,"y1='"+y1/c).replace(/x2='[^']+/,"x2='"+x2/c).replace(/y2='[^']+/,"y2='"+y2/c);}
bl = !bgSize ? bl : 0; // AM: If background-size in use, reset id on each gradient
vect="<linearGradient id='g"+(bl+1)+"'"+vect+">\n";
for(var i=0;i<sal;i++){var s=stopArr[i],ps=parseFloat(s); s = !s.match(/px/) ? ps/c : ps/rl; // AM: plug in pre-calculated offset or convert pixel color-stops to proper offset value
var off=Math.round(s*sr)/sr,color=fixColor(colorArr[i]),opac=addOpacity(colorArr[i]);
sGrad+="<stop offset='"+off+"' stop-color='"+color+"'";
if(colorArr[i].match(trans)){sGrad+=" stop-opacity='"+opac+"'";}
sGrad+="/>\n";
/* AM: For IE9 data URI, preserve original (semi)transparent colors since IE9 renders them correctly anyway, and they take fewer bytes than stop-color + stop-opacity.
* Input with background-size will get cross-browser data URI output unless IE9 checkbox is marked.
*/
if(u.checked||!!bgSize)
{uGrad+="<stop offset='"+off+"'";
color = u.checked&&colorArr[i].match(trans) ? colorArr[i] : color;
uGrad+=" stop-color='"+color+"'";
if(!u.checked&&colorArr[i].match(trans)){uGrad+=" stop-opacity='"+opac+"'";}
uGrad+='/>\n';
}
}
if(!!rep) // AM: Logic for repeating gradients. It finds the difference between the last & first offsets, multiplies coords by that to resize the gradient and adjusts offsets to make them relative to the new size.
{var stops=sGrad.match(/t='(\d?\.?\d+)'/g),sl,sl2,nStops=[];sl=sl2=stops.length;
while(sl--){stops[sl]=stops[sl].replace(/t='|'/g,'');}
var pso=parseFloat(stops[sl2-1]),diff=pso-parseFloat(stops[0]),mul=1/pso;
while(sl2--)
{nStops[sl2]=Math.round(parseFloat(stops[sl2])*mul*sr)/sr,nStops[0]=0,
sGrad=sGrad.replace(stops[sl2],nStops[sl2]);
if(u.checked||!!bgSize){uGrad=uGrad.replace(stops[sl2],nStops[sl2]);}
}
var xy=[x1,y1,x2,y2],z=4;while(z--){xy[z]=Math.round(xy[z]*diff*c)/c+'%';}
vect=vect.replace(/x1='[^']+/,"x1='"+xy[0]).replace(/y1='[^']+/,"y1='"+xy[1]).replace(/x2='[^']+/,"x2='"+xy[2]).replace(/y2='[^']+/,"y2='"+xy[3]).replace("ent ","ent spreadMethod='repeat' ");
}
vect=vect.replace(/ x1='0%?'| x2='(100%|1)'| y1='0%?'| y2='0%?'/g,'').replace("'0%","'0"); // AM: remove defaults and units from zeros
if(!bgSize){svg+=vect,uri+=vect;}
else{svg=vect,uri=vect;}
svg=svg+sGrad,uri=uri+uGrad;
// AM: remove default values and leading zeros when present
var s2=/offset='0' | stop-opacity='1'/g,s3=/'0\./g,r="'.",en="</linearGradient>\n";
svg=svg.replace(s2,'').replace(s3,r)+en;
uri=uri.replace(s2,'').replace(s3,r)+en;
return svg,uri;
}
function calcStops(rl){var u=0,y=0,stp=0;
while(y<stl){
if(stopArr[y].match(/\d/)){
if(stopArr[y].match(/calc|cm|mm|in|pt|pc/)){stopArr[y]=fixStops(stopArr[y],rl);}
var unit=stopArr[y].match(/%|px/),s=y,z=0,st=parseFloat(stopArr[s]);
while(z<s){
if(!stopArr[z].match(/\d/)){stopArr[z]=stp+((st-stp)/(s-u))*(z-u)+unit;}
z++;
}
u=z,stp=parseFloat(stopArr[s]);
}
y++;
}
}
// AM: Convert other units to pixels
function fixStops(x,rl,g,f,y,i,z){y=1,z='';
// AM: parse stop value or split calc() expression if present
if(!x.match(/calc/)){f=parseFloat(x);}
else{g=x.replace(/^calc\(|\)$/g,'').replace(/(\*|\/)/g,' $1 ').split(' '),y=g.length;}
for(i=0;i<y;i++){
if(y>1){x=g[i],f=parseFloat(g[i]);}
if(x.match(/cm/)){f*=37.79527559;}
else if(x.match(/mm/)){f*=3.779527559;}
else if(x.match(/in/)){f*=96;}
else if(x.match(/pt/)){f*=1.33333333;}
else if(x.match(/pc/)){f*=16;}
else if(x.match(/%/)){f=(f/100)*rl;}
else if(!x.match(/px/)){f=x;}
if(y>1){z+=f;} // AM: convert calc() to expression with normalized units
}
return z ? eval(z)+'px' : (f*c)/c+'px';
}
function fixColor(hu){
/* AM: To conform to the SVG spec, colors should be CSS2-compatible values, which excludes RGBA and HSL/A.
* This function will convert RGB/A and HSL/A, as well as most SVG/CSS3 color names, to hex to not only satisfy the SVG spec,
* but also make the output SVG more efficient.
*/
var crgb,cl,cp,cpl,hsl,flo=/(\d+(\.\d+)?)|\.\d+/g,na=/[a-z]{8,}|black|white|yellow|fuchsia|magenta/i;
if(hu.match(/transparent/))
{return '#000';}
/* AM: Browsers don't agree here. FF and IE render 'transparent' as white, but black follows the CSS3 spec, and Chrome/Safari/Opera follow it.
* However, the keyword appears to be undefined in the SVG spec, so, this could be a matter up for debate.
*/
else if(hu.match(/rgba?|hsla?/)||hu.match(na))
{if(hu.match(/rgba?/))
{if(hu.match(/%/)) // AM: Convert %s to dec
{cp=hu.match(flo),cpl=cp.length;
while(cpl--){cp[cpl]=cp[cpl]/c*255;}
}
crgb = !cp ? hu.match(/\d{1,3}/g) : cp, cl=crgb.length;
while(cl--){crgb[cl] = crgb[cl]>255 ? 255 : crgb[cl];}} // AM: Cap any errant values over max
/* AM: convert colors >7 letters into hex since #RRGGBB takes fewer bytes. The additional listed colors will shrink down to #RGB.
* FF2- and IE8- do not support getComputedStyle, so, those browsers will just return the original input.
*/
else if(hu.match(na) && window.getComputedStyle)
{var d = doc.createElement("div");
d.style.color = hu.match(na)[0];
doc.body.appendChild(d);
crgb = getComputedStyle(d,null).color; // AM: gives color in rgb()
if(!crgb.match(/rgb/)){return hu;} // AM: Abort and return input if not processed correctly (older browsers not supporting CSS3/SVG color names, for instance)
crgb = crgb.replace(/[^\d,]/g,'').split(',');
doc.body.removeChild(d);}
else if(hu.match(/hsla?/))
{hsl = hu.match(flo);
// AM: Convert HSL to RGB first (making sure any errant s & l >100 get capped), then convert result to hex below
crgb = hslToRgb(hsl[0]%360/360,Math.min((hsl[1])/c,1),Math.min((hsl[2])/c,1));}
else{return hu;}
rgbToHex(crgb[0]|0,crgb[1]|0,crgb[2]|0); // AM: |0 forces int value
return '#'+hex;
}
else{return hu;}
}
function addOpacity(op){// AM: convert alpha or 'transparent' to stop-opacity
if(op.match(trans))
{if(op.match(/(?:\d*(?:\.\d+)?%?,){3}0?(\.\d+)?\)/)) // AM: search for a color triplet and capture its alpha value
{var opv = op.match(/(0?(\.\d+)?)\)/)[1];
return opv.replace('0.','.');}
else if(op.match(/transparent/))
{return '0';}
else{return '1';}
}
else{return '';}
}
function rgbToHex(r,g,b){// AM: Code adapted from stackoverflow.com/a/5624139
hex=((1<<24)+(r<<16)+(g<<8)+b).toString(16).slice(1);
var s=/(\w)\1(\w)\2(\w)\3/i;
// AM: If hex can be shrank to 3-digits, then do it. \w searches a-z, A-Z, & 0-9, but hex will only have a-f and 0-9.
hex=hex.match(s) ? hex.replace(s,'$1$2$3') : hex;
return hex;
}
// AM: This function adapted from stackoverflow.com/a/9493060
function hslToRgb(h,s,l){var r,g,b;
function hue2rgb(p,q,t){
if(t<0){t += 1;}
if(t>1){t -= 1;}
if(t<1/6){return p+(q-p)*6*t;}
if(t<1/2){return q;}
if(t<2/3){return p+(q-p)*(2/3-t)*6;}
return p;
}
if(s===0){r=g=b=l;} // achromatic
else{
var q=l<0.5 ? l*(1+s) : l+s-l*s,
p=2*l-q;
r = hue2rgb(p,q,h + 1/3),g = hue2rgb(p,q,h),b = hue2rgb(p,q,h - 1/3);}
return [r*255,g*255,b*255];
}
function finishSVG(svg,uri,bl){var rects='',
svHead="<svg xmlns='http://www.w3.org/2000/svg' width='"+w+units+"' height='"+h+units+"'>\n",
svDefs="<defs>\n"+svg+"</defs>\n"; // AM: Safari 5.1 is dumb, requiring the otherwise unneeded <defs> element for the preview
while(bl--){rects+="<rect width='100%' height='100%' fill='url(#g"+(bl+1)+")'/>\n";}
var svEnd="</svg>";
svg=svHead+svDefs+rects+svEnd;
// AM: Show SVG source and preview only when Batch Mode is not active
if(!b.checked){out.value=svg;
if(hasInlSvg()){sizePreview(svg);}}
if(u.checked||!!bgSize){uri=svHead+uri+rects+svEnd; svgToUri(uri);}
}
function svgToUri(uri){uri=uri.replace(/\n|<\/?defs>/g,'').replace(/svg' width='.*?' height='.*?'/,"svg'"); // AM: remove some stuff to save bytes. For CSS usage, SVG width and height are rarely needed
// AM: encode output for use in CSS "data:" string. Opening/closing brackets, % signs, and # must be encoded. Spaces don't, so, convert them back from %20 to save bytes and slightly improve readability.
uOut='url("data:image/svg+xml,'+encodeURI(uri).replace(/%20/g,' ').replace(/#/g,'%23')+'")';
uCode.value=uOut;uTxt.style.display='block';
if(!!bgSize){bgsUriOut+=uOut+',\n';}
if(b.checked&&!bgSize){bUriOut+=sel+'background:'+uOut+'}\n\n';}
}
function updatePreview(){
sizePreview(out.value);
if(u.checked){svgToUri(out.value);}
}
function sizePreview(svg){ // AM: See if SVG dimensions exceed the #updatetext div available width, and if so, downsize the dimensions
var editW,editH,editWpx,editHpx,wm=/' width='(\d+(px|%))/,hm=/height='(\d+(px|%))'>/,
downWarn="<p><em>The preview has been resized to fit on the page. Your output and the original aspect ratio are unchanged, however.</em></p>",
defCss="margin:0 auto;box-shadow:0 0 8px #777;background:#fff;background-image:"+svg+";"+bgSizeStr;
downWarnDiv.innerHTML=prev.style.cssText='';
if(svg.match(wm)){editW=svg.match(wm)[1];}
else if(!svg.match(/' width='.*?'>/)){editW=w+units;}
if(svg.match(hm)){editH=svg.match(hm)[1];}
else if(!svg.match(/height='.*?'>/)){editH=h+units;}
if(!editW||!editH){alert('Please make sure your width and height are only in integer px or % values, then try updating again.');return !1;}
if(editW.match(/%/)){editWpx=parseFloat(editW)/c*prevW;} // AM: Convert %s to px
if(editH.match(/%/)){editHpx=parseFloat(editH)/c*prevW;}
var editWf = !editWpx ? parseFloat(editW) : editWpx,
editHf = !editHpx ? parseFloat(editH) : editHpx;
if(editWf>prevW){
// AM: If background-size is set, add SVG output as a background to the preview div instead of adding the inline SVG and append the default styling defined above (including the background-size)
var editWnew=Math.round(editWf/(editWf/prevW)), editHnew=Math.round(editHf/(editWf/prevW));
var newout=svg.replace(editW,editWnew+'px').replace(editH,editHnew+'px');
if(!bgSize){prev.innerHTML=downWarn+newout;}
else{prev.innerHTML='';downWarnDiv.innerHTML=downWarn;prev.style.cssText="width:"+editWnew+"px;height:"+editHnew+"px;"+defCss;}
}
else{
if(!bgSize){prev.innerHTML=svg;}
else{prev.innerHTML='';prev.style.cssText="width:"+editW+";height:"+editH+";"+defCss;}
}
}
}());
</script>
</body>
</html>