indementia
New Member
I'm trying to use inline SVG (inline is very important for this project as it needs to be easily portable in a single css file) and I've decided to use LESS. I found this page http://blog.philipbrown.id.au/2012/09/base64-encoded-svg-gradient-backgrounds-in-less/ which talks about a way to do this. However I can't seem to get this to work. I'm using PHPStorm with a LESS Compiler plugin and it throws a Syntax error...\[code\]3:13:14 PM LESS CSS Compiler Error: filters.less: Syntax Error: JavaScript evaluation error: `(function(a,b,c){function e(a){a=a.replace(/\r\n/g,'\n');var b='';for(var c=0;c127&&d>6|192);b+=String.fromCharCode(d&63|128)}else{b+=String.fromCharCode(d>>12|224);b+=String.fromCharCode(d>>6&63|128);b+=String.fromCharCode(d&63|128)}}return b}function f(a){var b='';var c,f,g,h,i,j,l;var m=0;a=e(a);while(m>2;i=(c&3)>4;j=(f&15)>6;l=g&63;if(isNaN(f)){j=l=64}else if(isNaN(g)){l=64}b=b+d.charAt(h)+d.charAt(i)+d.charAt(j)+d.charAt(l)}return b}var d='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';return a+f(b)+c})('url(data:image/svg+xml;base64,','#grayscale',')')` (line 30, column 2) near.blurToClear { .blur();} (show balloon)\[/code\]Here's my CSS:\[code\].blur (@level: 3px) { @svg: ~"<svg xmlns='http://www.w3.org/2000/svg'><filter id='blur'><feGaussianBlur stdDeviation='@level' /></filter></svg>#grayscale"; /* To change level of blur, adjust all "3" to a different number */ filter: blur(@level); -webkit-filter: blur(@level); -moz-filter: blur(@level); -o-filter: blur(@level); -ms-filter: blur(@level); .base64DataUriBackground(@svg);}.bwToColor,.colorToBw,.clearToBlur,.blurToClear { /* To change duration of effects, adjust all "0.3" to a different number */ .transition('0.3s');}.clearToBlur:hover,.blurToClear { .blur();}//encode SVG xml as base 64//http://blog.philipbrown.id.au/2012/09/base64-encoded-svg-gradient-backgrounds-in-less/.base64DataUriBackground (@encode, @property: ~"filter", @type: ~"image/svg+xml") { @dataUriPrefix: ~"url(data
{type};base64,"; @dataUriSuffix: ~")"; // with btoa() //@b64DataUri: ~`(function(a,b,c){return a+btoa(b)+c})('@{dataUriPrefix}','@{encode}','@{dataUriSuffix}')`; // without @b64DataUri: ~`(function(a,b,c){function e(a){a=a.replace(/\r\n/g,'\n');var b='';for(var c=0;c<a.length;c++){var d=a.charCodeAt(c);if(d<128){b+=String.fromCharCode(d)}else if(d>127&&d<2048){b+=String.fromCharCode(d>>6|192);b+=String.fromCharCode(d&63|128)}else{b+=String.fromCharCode(d>>12|224);b+=String.fromCharCode(d>>6&63|128);b+=String.fromCharCode(d&63|128)}}return b}function f(a){var b='';var c,f,g,h,i,j,l;var m=0;a=e(a);while(m<a.length){c=a.charCodeAt(m++);f=a.charCodeAt(m++);g=a.charCodeAt(m++);h=c>>2;i=(c&3)<<4|f>>4;j=(f&15)<<2|g>>6;l=g&63;if(isNaN(f)){j=l=64}else if(isNaN(g)){l=64}b=b+d.charAt(h)+d.charAt(i)+d.charAt(j)+d.charAt(l)}return b}var d='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';return a+f(b)+c})('@{dataUriPrefix}','@{encode}','@{dataUriSuffix}')`; @property: @b64DataUri;}\[/code\]Any advice on how to integrate SVG with LESS? Is it possible? I've tried the \[code\]with btoa()\[/code\] method as well and it threw the same error.
{type};base64,"; @dataUriSuffix: ~")"; // with btoa() //@b64DataUri: ~`(function(a,b,c){return a+btoa(b)+c})('@{dataUriPrefix}','@{encode}','@{dataUriSuffix}')`; // without @b64DataUri: ~`(function(a,b,c){function e(a){a=a.replace(/\r\n/g,'\n');var b='';for(var c=0;c<a.length;c++){var d=a.charCodeAt(c);if(d<128){b+=String.fromCharCode(d)}else if(d>127&&d<2048){b+=String.fromCharCode(d>>6|192);b+=String.fromCharCode(d&63|128)}else{b+=String.fromCharCode(d>>12|224);b+=String.fromCharCode(d>>6&63|128);b+=String.fromCharCode(d&63|128)}}return b}function f(a){var b='';var c,f,g,h,i,j,l;var m=0;a=e(a);while(m<a.length){c=a.charCodeAt(m++);f=a.charCodeAt(m++);g=a.charCodeAt(m++);h=c>>2;i=(c&3)<<4|f>>4;j=(f&15)<<2|g>>6;l=g&63;if(isNaN(f)){j=l=64}else if(isNaN(g)){l=64}b=b+d.charAt(h)+d.charAt(i)+d.charAt(j)+d.charAt(l)}return b}var d='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';return a+f(b)+c})('@{dataUriPrefix}','@{encode}','@{dataUriSuffix}')`; @property: @b64DataUri;}\[/code\]Any advice on how to integrate SVG with LESS? Is it possible? I've tried the \[code\]with btoa()\[/code\] method as well and it threw the same error.