SVG that renders differently on different OS - svg

I'm having an issue with a svg file that renders differently on different OS. It even looks different in different editors. (Never mind the size difference below)
MacOS Safari:
Windows FileExplorer:
Linux Chrome:
I didn't create it myself. It was created on a Windows computer, in Inkscape it seems.
I wonder why it looks different? Is it possible to make it look the same, or does it need be recreated?
Here is the svg:
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="600px"
height="600px"
viewBox="0 0 600 600"
version="1.1"
id="SVGRoot"
sodipodi:docname="Busskartan_Logo_2.svg"
inkscape:version="1.1.2 (b8e25be833, 2022-02-05)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview2676"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:document-units="px"
showgrid="false"
inkscape:zoom="1.2810466"
inkscape:cx="129.58155"
inkscape:cy="310.68347"
inkscape:window-width="1920"
inkscape:window-height="1137"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs2671">
<meshgradient
inkscape:collect="always"
id="meshgradient26793"
gradientUnits="userSpaceOnUse"
x="31.430662"
y="56.305637">
<meshrow
id="meshrow26795">
<meshpatch
id="meshpatch26797">
<stop
path="c 157.476,0 314.952,0 472.428,0"
style="stop-color:#ffffff;stop-opacity:1"
id="stop26799" />
<stop
path="c 0,189.555 0,379.109 0,568.664"
style="stop-color:#1565c0;stop-opacity:1"
id="stop26801" />
<stop
path="c -157.476,0 -314.952,0 -472.428,0"
style="stop-color:#ffffff;stop-opacity:1"
id="stop26803" />
<stop
path="c 0,-189.555 0,-379.109 0,-568.664"
style="stop-color:#1565c0;stop-opacity:1"
id="stop26805" />
</meshpatch>
</meshrow>
</meshgradient>
</defs>
<g
inkscape:label="Lager 1"
inkscape:groupmode="layer"
id="layer1">
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:42.66666667px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none"
x="112.40809"
y="128.02032"
id="text4972"><tspan
sodipodi:role="line"
id="tspan4970"
x="112.40809"
y="128.02032" /></text>
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:218.971px;line-height:1.25;font-family:'Wide Latin';-inkscape-font-specification:'Wide Latin, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;white-space:pre;inline-size:318.312;fill:#1565c0;fill-opacity:1;stroke:none;stroke-width:1.14047"
x="221.05212"
y="274.11481"
id="text18198"
transform="matrix(1.8748445,0,0,3.1101258,-403.22818,-339.41619)"><tspan
x="221.05212"
y="274.11481"
id="tspan27335">B</tspan></text>
</g>
<script
id="mesh_polyfill"
type="text/javascript">
!function(){const t="http://www.w3.org/2000/svg",e="http://www.w3.org/1999/xlink",s="http://www.w3.org/1999/xhtml",r=2;if(document.createElementNS(t,"meshgradient").x)return;const n=(t,e,s,r)=>{let n=new x(.5*(e.x+s.x),.5*(e.y+s.y)),o=new x(.5*(t.x+e.x),.5*(t.y+e.y)),i=new x(.5*(s.x+r.x),.5*(s.y+r.y)),a=new x(.5*(n.x+o.x),.5*(n.y+o.y)),h=new x(.5*(n.x+i.x),.5*(n.y+i.y)),l=new x(.5*(a.x+h.x),.5*(a.y+h.y));return[[t,o,a,l],[l,h,i,r]]},o=t=>{let e=t[0].distSquared(t[1]),s=t[2].distSquared(t[3]),r=.25*t[0].distSquared(t[2]),n=.25*t[1].distSquared(t[3]),o=e>s?e:s,i=r>n?r:n;return 18*(o>i?o:i)},i=(t,e)=>Math.sqrt(t.distSquared(e)),a=(t,e)=>t.scale(2/3).add(e.scale(1/3)),h=t=>{let e,s,r,n,o,i,a,h=new g;return t.match(/(\w+\(\s*[^)]+\))+/g).forEach(t=>{let l=t.match(/[\w.-]+/g),d=l.shift();switch(d){case"translate":2===l.length?e=new g(1,0,0,1,l[0],l[1]):(console.error("mesh.js: translate does not have 2 arguments!"),e=new g(1,0,0,1,0,0)),h=h.append(e);break;case"scale":1===l.length?s=new g(l[0],0,0,l[0],0,0):2===l.length?s=new g(l[0],0,0,l[1],0,0):(console.error("mesh.js: scale does not have 1 or 2 arguments!"),s=new g(1,0,0,1,0,0)),h=h.append(s);break;case"rotate":if(3===l.length&&(e=new g(1,0,0,1,l[1],l[2]),h=h.append(e)),l[0]){r=l[0]*Math.PI/180;let t=Math.cos(r),e=Math.sin(r);Math.abs(t)<1e-16&&(t=0),Math.abs(e)<1e-16&&(e=0),a=new g(t,e,-e,t,0,0),h=h.append(a)}else console.error("math.js: No argument to rotate transform!");3===l.length&&(e=new g(1,0,0,1,-l[1],-l[2]),h=h.append(e));break;case"skewX":l[0]?(r=l[0]*Math.PI/180,n=Math.tan(r),o=new g(1,0,n,1,0,0),h=h.append(o)):console.error("math.js: No argument to skewX transform!");break;case"skewY":l[0]?(r=l[0]*Math.PI/180,n=Math.tan(r),i=new g(1,n,0,1,0,0),h=h.append(i)):console.error("math.js: No argument to skewY transform!");break;case"matrix":6===l.length?h=h.append(new g(...l)):console.error("math.js: Incorrect number of arguments for matrix!");break;default:console.error("mesh.js: Unhandled transform type: "+d)}}),h},l=t=>{let e=[],s=t.split(/[ ,]+/);for(let t=0,r=s.length-1;t<r;t+=2)e.push(new x(parseFloat(s[t]),parseFloat(s[t+1])));return e},d=(t,e)=>{for(let s in e)t.setAttribute(s,e[s])},c=(t,e,s,r,n)=>{let o,i,a=[0,0,0,0];for(let h=0;h<3;++h)e[h]<t[h]&&e[h]<s[h]||t[h]<e[h]&&s[h]<e[h]?a[h]=0:(a[h]=.5*((e[h]-t[h])/r+(s[h]-e[h])/n),o=Math.abs(3*(e[h]-t[h])/r),i=Math.abs(3*(s[h]-e[h])/n),a[h]>o?a[h]=o:a[h]>i&&(a[h]=i));return a},u=[[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0],[-3,3,0,0,-2,-1,0,0,0,0,0,0,0,0,0,0],[2,-2,0,0,1,1,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0],[0,0,0,0,0,0,0,0,-3,3,0,0,-2,-1,0,0],[0,0,0,0,0,0,0,0,2,-2,0,0,1,1,0,0],[-3,0,3,0,0,0,0,0,-2,0,-1,0,0,0,0,0],[0,0,0,0,-3,0,3,0,0,0,0,0,-2,0,-1,0],[9,-9,-9,9,6,3,-6,-3,6,-6,3,-3,4,2,2,1],[-6,6,6,-6,-3,-3,3,3,-4,4,-2,2,-2,-2,-1,-1],[2,0,-2,0,0,0,0,0,1,0,1,0,0,0,0,0],[0,0,0,0,2,0,-2,0,0,0,0,0,1,0,1,0],[-6,6,6,-6,-4,-2,4,2,-3,3,-3,3,-2,-1,-2,-1],[4,-4,-4,4,2,2,-2,-2,2,-2,2,-2,1,1,1,1]],f=t=>{let e=[];for(let s=0;s<16;++s){e[s]=0;for(let r=0;r<16;++r)e[s]+=u[s][r]*t[r]}return e},p=(t,e,s)=>{const r=e*e,n=s*s,o=e*e*e,i=s*s*s;return t[0]+t[1]*e+t[2]*r+t[3]*o+t[4]*s+t[5]*s*e+t[6]*s*r+t[7]*s*o+t[8]*n+t[9]*n*e+t[10]*n*r+t[11]*n*o+t[12]*i+t[13]*i*e+t[14]*i*r+t[15]*i*o},y=t=>{let e=[],s=[],r=[];for(let s=0;s<4;++s)e[s]=[],e[s][0]=n(t[0][s],t[1][s],t[2][s],t[3][s]),e[s][1]=[],e[s][1].push(...n(...e[s][0][0])),e[s][1].push(...n(...e[s][0][1])),e[s][2]=[],e[s][2].push(...n(...e[s][1][0])),e[s][2].push(...n(...e[s][1][1])),e[s][2].push(...n(...e[s][1][2])),e[s][2].push(...n(...e[s][1][3]));for(let t=0;t<8;++t){s[t]=[];for(let r=0;r<4;++r)s[t][r]=[],s[t][r][0]=n(e[0][2][t][r],e[1][2][t][r],e[2][2][t][r],e[3][2][t][r]),s[t][r][1]=[],s[t][r][1].push(...n(...s[t][r][0][0])),s[t][r][1].push(...n(...s[t][r][0][1])),s[t][r][2]=[],s[t][r][2].push(...n(...s[t][r][1][0])),s[t][r][2].push(...n(...s[t][r][1][1])),s[t][r][2].push(...n(...s[t][r][1][2])),s[t][r][2].push(...n(...s[t][r][1][3]))}for(let t=0;t<8;++t){r[t]=[];for(let e=0;e<8;++e)r[t][e]=[],r[t][e][0]=s[t][0][2][e],r[t][e][1]=s[t][1][2][e],r[t][e][2]=s[t][2][2][e],r[t][e][3]=s[t][3][2][e]}return r};class x{constructor(t,e){this.x=t||0,this.y=e||0}toString(){return`(x=${this.x}, y=${this.y})`}clone(){return new x(this.x,this.y)}add(t){return new x(this.x+t.x,this.y+t.y)}scale(t){return void 0===t.x?new x(this.x*t,this.y*t):new x(this.x*t.x,this.y*t.y)}distSquared(t){let e=this.x-t.x,s=this.y-t.y;return e*e+s*s}transform(t){let e=this.x*t.a+this.y*t.c+t.e,s=this.x*t.b+this.y*t.d+t.f;return new x(e,s)}}class g{constructor(t,e,s,r,n,o){void 0===t?(this.a=1,this.b=0,this.c=0,this.d=1,this.e=0,this.f=0):(this.a=t,this.b=e,this.c=s,this.d=r,this.e=n,this.f=o)}toString(){return`affine: ${this.a} ${this.c} ${this.e} \n ${this.b} ${this.d} ${this.f}`}append(t){t instanceof g||console.error("mesh.js: argument to Affine.append is not affine!");let e=this.a*t.a+this.c*t.b,s=this.b*t.a+this.d*t.b,r=this.a*t.c+this.c*t.d,n=this.b*t.c+this.d*t.d,o=this.a*t.e+this.c*t.f+this.e,i=this.b*t.e+this.d*t.f+this.f;return new g(e,s,r,n,o,i)}}class w{constructor(t,e){this.nodes=t,this.colors=e}paintCurve(t,e){if(o(this.nodes)>r){const s=n(...this.nodes);let r=[[],[]],o=[[],[]];for(let t=0;t<4;++t)r[0][t]=this.colors[0][t],r[1][t]=(this.colors[0][t]+this.colors[1][t])/2,o[0][t]=r[1][t],o[1][t]=this.colors[1][t];let i=new w(s[0],r),a=new w(s[1],o);i.paintCurve(t,e),a.paintCurve(t,e)}else{let s=Math.round(this.nodes[0].x);if(s>=0&&s<e){let r=4*(~~this.nodes[0].y*e+s);t[r]=Math.round(this.colors[0][0]),t[r+1]=Math.round(this.colors[0][1]),t[r+2]=Math.round(this.colors[0][2]),t[r+3]=Math.round(this.colors[0][3])}}}}class m{constructor(t,e){this.nodes=t,this.colors=e}split(){let t=[[],[],[],[]],e=[[],[],[],[]],s=[[[],[]],[[],[]]],r=[[[],[]],[[],[]]];for(let s=0;s<4;++s){const r=n(this.nodes[0][s],this.nodes[1][s],this.nodes[2][s],this.nodes[3][s]);t[0][s]=r[0][0],t[1][s]=r[0][1],t[2][s]=r[0][2],t[3][s]=r[0][3],e[0][s]=r[1][0],e[1][s]=r[1][1],e[2][s]=r[1][2],e[3][s]=r[1][3]}for(let t=0;t<4;++t)s[0][0][t]=this.colors[0][0][t],s[0][1][t]=this.colors[0][1][t],s[1][0][t]=(this.colors[0][0][t]+this.colors[1][0][t])/2,s[1][1][t]=(this.colors[0][1][t]+this.colors[1][1][t])/2,r[0][0][t]=s[1][0][t],r[0][1][t]=s[1][1][t],r[1][0][t]=this.colors[1][0][t],r[1][1][t]=this.colors[1][1][t];return[new m(t,s),new m(e,r)]}paint(t,e){let s,n=!1;for(let t=0;t<4;++t)if((s=o([this.nodes[0][t],this.nodes[1][t],this.nodes[2][t],this.nodes[3][t]]))>r){n=!0;break}if(n){let s=this.split();s[0].paint(t,e),s[1].paint(t,e)}else{new w([...this.nodes[0]],[...this.colors[0]]).paintCurve(t,e)}}}class b{constructor(t){this.readMesh(t),this.type=t.getAttribute("type")||"bilinear"}readMesh(t){let e=[[]],s=[[]],r=Number(t.getAttribute("x")),n=Number(t.getAttribute("y"));e[0][0]=new x(r,n);let o=t.children;for(let t=0,r=o.length;t<r;++t){e[3*t+1]=[],e[3*t+2]=[],e[3*t+3]=[],s[t+1]=[];let r=o[t].children;for(let n=0,o=r.length;n<o;++n){let o=r[n].children;for(let r=0,i=o.length;r<i;++r){let i=r;0!==t&&++i;let h,d=o[r].getAttribute("path"),c="l";null!=d&&(c=(h=d.match(/\s*([lLcC])\s*(.*)/))[1]);let u=l(h[2]);switch(c){case"l":0===i?(e[3*t][3*n+3]=u[0].add(e[3*t][3*n]),e[3*t][3*n+1]=a(e[3*t][3*n],e[3*t][3*n+3]),e[3*t][3*n+2]=a(e[3*t][3*n+3],e[3*t][3*n])):1===i?(e[3*t+3][3*n+3]=u[0].add(e[3*t][3*n+3]),e[3*t+1][3*n+3]=a(e[3*t][3*n+3],e[3*t+3][3*n+3]),e[3*t+2][3*n+3]=a(e[3*t+3][3*n+3],e[3*t][3*n+3])):2===i?(0===n&&(e[3*t+3][3*n+0]=u[0].add(e[3*t+3][3*n+3])),e[3*t+3][3*n+1]=a(e[3*t+3][3*n],e[3*t+3][3*n+3]),e[3*t+3][3*n+2]=a(e[3*t+3][3*n+3],e[3*t+3][3*n])):(e[3*t+1][3*n]=a(e[3*t][3*n],e[3*t+3][3*n]),e[3*t+2][3*n]=a(e[3*t+3][3*n],e[3*t][3*n]));break;case"L":0===i?(e[3*t][3*n+3]=u[0],e[3*t][3*n+1]=a(e[3*t][3*n],e[3*t][3*n+3]),e[3*t][3*n+2]=a(e[3*t][3*n+3],e[3*t][3*n])):1===i?(e[3*t+3][3*n+3]=u[0],e[3*t+1][3*n+3]=a(e[3*t][3*n+3],e[3*t+3][3*n+3]),e[3*t+2][3*n+3]=a(e[3*t+3][3*n+3],e[3*t][3*n+3])):2===i?(0===n&&(e[3*t+3][3*n+0]=u[0]),e[3*t+3][3*n+1]=a(e[3*t+3][3*n],e[3*t+3][3*n+3]),e[3*t+3][3*n+2]=a(e[3*t+3][3*n+3],e[3*t+3][3*n])):(e[3*t+1][3*n]=a(e[3*t][3*n],e[3*t+3][3*n]),e[3*t+2][3*n]=a(e[3*t+3][3*n],e[3*t][3*n]));break;case"c":0===i?(e[3*t][3*n+1]=u[0].add(e[3*t][3*n]),e[3*t][3*n+2]=u[1].add(e[3*t][3*n]),e[3*t][3*n+3]=u[2].add(e[3*t][3*n])):1===i?(e[3*t+1][3*n+3]=u[0].add(e[3*t][3*n+3]),e[3*t+2][3*n+3]=u[1].add(e[3*t][3*n+3]),e[3*t+3][3*n+3]=u[2].add(e[3*t][3*n+3])):2===i?(e[3*t+3][3*n+2]=u[0].add(e[3*t+3][3*n+3]),e[3*t+3][3*n+1]=u[1].add(e[3*t+3][3*n+3]),0===n&&(e[3*t+3][3*n+0]=u[2].add(e[3*t+3][3*n+3]))):(e[3*t+2][3*n]=u[0].add(e[3*t+3][3*n]),e[3*t+1][3*n]=u[1].add(e[3*t+3][3*n]));break;case"C":0===i?(e[3*t][3*n+1]=u[0],e[3*t][3*n+2]=u[1],e[3*t][3*n+3]=u[2]):1===i?(e[3*t+1][3*n+3]=u[0],e[3*t+2][3*n+3]=u[1],e[3*t+3][3*n+3]=u[2]):2===i?(e[3*t+3][3*n+2]=u[0],e[3*t+3][3*n+1]=u[1],0===n&&(e[3*t+3][3*n+0]=u[2])):(e[3*t+2][3*n]=u[0],e[3*t+1][3*n]=u[1]);break;default:console.error("mesh.js: "+c+" invalid path type.")}if(0===t&&0===n||r>0){let e=window.getComputedStyle(o[r]).stopColor.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i),a=window.getComputedStyle(o[r]).stopOpacity,h=255;a&&(h=Math.floor(255*a)),e&&(0===i?(s[t][n]=[],s[t][n][0]=Math.floor(e[1]),s[t][n][1]=Math.floor(e[2]),s[t][n][2]=Math.floor(e[3]),s[t][n][3]=h):1===i?(s[t][n+1]=[],s[t][n+1][0]=Math.floor(e[1]),s[t][n+1][1]=Math.floor(e[2]),s[t][n+1][2]=Math.floor(e[3]),s[t][n+1][3]=h):2===i?(s[t+1][n+1]=[],s[t+1][n+1][0]=Math.floor(e[1]),s[t+1][n+1][1]=Math.floor(e[2]),s[t+1][n+1][2]=Math.floor(e[3]),s[t+1][n+1][3]=h):3===i&&(s[t+1][n]=[],s[t+1][n][0]=Math.floor(e[1]),s[t+1][n][1]=Math.floor(e[2]),s[t+1][n][2]=Math.floor(e[3]),s[t+1][n][3]=h))}}e[3*t+1][3*n+1]=new x,e[3*t+1][3*n+2]=new x,e[3*t+2][3*n+1]=new x,e[3*t+2][3*n+2]=new x,e[3*t+1][3*n+1].x=(-4*e[3*t][3*n].x+6*(e[3*t][3*n+1].x+e[3*t+1][3*n].x)+-2*(e[3*t][3*n+3].x+e[3*t+3][3*n].x)+3*(e[3*t+3][3*n+1].x+e[3*t+1][3*n+3].x)+-1*e[3*t+3][3*n+3].x)/9,e[3*t+1][3*n+2].x=(-4*e[3*t][3*n+3].x+6*(e[3*t][3*n+2].x+e[3*t+1][3*n+3].x)+-2*(e[3*t][3*n].x+e[3*t+3][3*n+3].x)+3*(e[3*t+3][3*n+2].x+e[3*t+1][3*n].x)+-1*e[3*t+3][3*n].x)/9,e[3*t+2][3*n+1].x=(-4*e[3*t+3][3*n].x+6*(e[3*t+3][3*n+1].x+e[3*t+2][3*n].x)+-2*(e[3*t+3][3*n+3].x+e[3*t][3*n].x)+3*(e[3*t][3*n+1].x+e[3*t+2][3*n+3].x)+-1*e[3*t][3*n+3].x)/9,e[3*t+2][3*n+2].x=(-4*e[3*t+3][3*n+3].x+6*(e[3*t+3][3*n+2].x+e[3*t+2][3*n+3].x)+-2*(e[3*t+3][3*n].x+e[3*t][3*n+3].x)+3*(e[3*t][3*n+2].x+e[3*t+2][3*n].x)+-1*e[3*t][3*n].x)/9,e[3*t+1][3*n+1].y=(-4*e[3*t][3*n].y+6*(e[3*t][3*n+1].y+e[3*t+1][3*n].y)+-2*(e[3*t][3*n+3].y+e[3*t+3][3*n].y)+3*(e[3*t+3][3*n+1].y+e[3*t+1][3*n+3].y)+-1*e[3*t+3][3*n+3].y)/9,e[3*t+1][3*n+2].y=(-4*e[3*t][3*n+3].y+6*(e[3*t][3*n+2].y+e[3*t+1][3*n+3].y)+-2*(e[3*t][3*n].y+e[3*t+3][3*n+3].y)+3*(e[3*t+3][3*n+2].y+e[3*t+1][3*n].y)+-1*e[3*t+3][3*n].y)/9,e[3*t+2][3*n+1].y=(-4*e[3*t+3][3*n].y+6*(e[3*t+3][3*n+1].y+e[3*t+2][3*n].y)+-2*(e[3*t+3][3*n+3].y+e[3*t][3*n].y)+3*(e[3*t][3*n+1].y+e[3*t+2][3*n+3].y)+-1*e[3*t][3*n+3].y)/9,e[3*t+2][3*n+2].y=(-4*e[3*t+3][3*n+3].y+6*(e[3*t+3][3*n+2].y+e[3*t+2][3*n+3].y)+-2*(e[3*t+3][3*n].y+e[3*t][3*n+3].y)+3*(e[3*t][3*n+2].y+e[3*t+2][3*n].y)+-1*e[3*t][3*n].y)/9}}this.nodes=e,this.colors=s}paintMesh(t,e){let s=(this.nodes.length-1)/3,r=(this.nodes[0].length-1)/3;if("bilinear"===this.type||s<2||r<2){let n;for(let o=0;o<s;++o)for(let s=0;s<r;++s){let r=[];for(let t=3*o,e=3*o+4;t<e;++t)r.push(this.nodes[t].slice(3*s,3*s+4));let i=[];i.push(this.colors[o].slice(s,s+2)),i.push(this.colors[o+1].slice(s,s+2)),(n=new m(r,i)).paint(t,e)}}else{let n,o,a,h,l,d,u;const x=s,g=r;s++,r++;let w=new Array(s);for(let t=0;t<s;++t){w[t]=new Array(r);for(let e=0;e<r;++e)w[t][e]=[],w[t][e][0]=this.nodes[3*t][3*e],w[t][e][1]=this.colors[t][e]}for(let t=0;t<s;++t)for(let e=0;e<r;++e)0!==t&&t!==x&&(n=i(w[t-1][e][0],w[t][e][0]),o=i(w[t+1][e][0],w[t][e][0]),w[t][e][2]=c(w[t-1][e][1],w[t][e][1],w[t+1][e][1],n,o)),0!==e&&e!==g&&(n=i(w[t][e-1][0],w[t][e][0]),o=i(w[t][e+1][0],w[t][e][0]),w[t][e][3]=c(w[t][e-1][1],w[t][e][1],w[t][e+1][1],n,o));for(let t=0;t<r;++t){w[0][t][2]=[],w[x][t][2]=[];for(let e=0;e<4;++e)n=i(w[1][t][0],w[0][t][0]),o=i(w[x][t][0],w[x-1][t][0]),w[0][t][2][e]=n>0?2*(w[1][t][1][e]-w[0][t][1][e])/n-w[1][t][2][e]:0,w[x][t][2][e]=o>0?2*(w[x][t][1][e]-w[x-1][t][1][e])/o-w[x-1][t][2][e]:0}for(let t=0;t<s;++t){w[t][0][3]=[],w[t][g][3]=[];for(let e=0;e<4;++e)n=i(w[t][1][0],w[t][0][0]),o=i(w[t][g][0],w[t][g-1][0]),w[t][0][3][e]=n>0?2*(w[t][1][1][e]-w[t][0][1][e])/n-w[t][1][3][e]:0,w[t][g][3][e]=o>0?2*(w[t][g][1][e]-w[t][g-1][1][e])/o-w[t][g-1][3][e]:0}for(let s=0;s<x;++s)for(let r=0;r<g;++r){let n=i(w[s][r][0],w[s+1][r][0]),o=i(w[s][r+1][0],w[s+1][r+1][0]),c=i(w[s][r][0],w[s][r+1][0]),x=i(w[s+1][r][0],w[s+1][r+1][0]),g=[[],[],[],[]];for(let t=0;t<4;++t){(d=[])[0]=w[s][r][1][t],d[1]=w[s+1][r][1][t],d[2]=w[s][r+1][1][t],d[3]=w[s+1][r+1][1][t],d[4]=w[s][r][2][t]*n,d[5]=w[s+1][r][2][t]*n,d[6]=w[s][r+1][2][t]*o,d[7]=w[s+1][r+1][2][t]*o,d[8]=w[s][r][3][t]*c,d[9]=w[s+1][r][3][t]*x,d[10]=w[s][r+1][3][t]*c,d[11]=w[s+1][r+1][3][t]*x,d[12]=0,d[13]=0,d[14]=0,d[15]=0,u=f(d);for(let e=0;e<9;++e){g[t][e]=[];for(let s=0;s<9;++s)g[t][e][s]=p(u,e/8,s/8),g[t][e][s]>255?g[t][e][s]=255:g[t][e][s]<0&&(g[t][e][s]=0)}}h=[];for(let t=3*s,e=3*s+4;t<e;++t)h.push(this.nodes[t].slice(3*r,3*r+4));l=y(h);for(let s=0;s<8;++s)for(let r=0;r<8;++r)(a=new m(l[s][r],[[[g[0][s][r],g[1][s][r],g[2][s][r],g[3][s][r]],[g[0][s][r+1],g[1][s][r+1],g[2][s][r+1],g[3][s][r+1]]],[[g[0][s+1][r],g[1][s+1][r],g[2][s+1][r],g[3][s+1][r]],[g[0][s+1][r+1],g[1][s+1][r+1],g[2][s+1][r+1],g[3][s+1][r+1]]]])).paint(t,e)}}}transform(t){if(t instanceof x)for(let e=0,s=this.nodes.length;e<s;++e)for(let s=0,r=this.nodes[0].length;s<r;++s)this.nodes[e][s]=this.nodes[e][s].add(t);else if(t instanceof g)for(let e=0,s=this.nodes.length;e<s;++e)for(let s=0,r=this.nodes[0].length;s<r;++s)this.nodes[e][s]=this.nodes[e][s].transform(t)}scale(t){for(let e=0,s=this.nodes.length;e<s;++e)for(let s=0,r=this.nodes[0].length;s<r;++s)this.nodes[e][s]=this.nodes[e][s].scale(t)}}document.querySelectorAll("rect,circle,ellipse,path,text").forEach((r,n)=>{let o=r.getAttribute("id");o||(o="patchjs_shape"+n,r.setAttribute("id",o));const i=r.style.fill.match(/^url\(\s*"?\s*#([^\s"]+)"?\s*\)/),a=r.style.stroke.match(/^url\(\s*"?\s*#([^\s"]+)"?\s*\)/);if(i&&i[1]){const a=document.getElementById(i[1]);if(a&&"meshgradient"===a.nodeName){const i=r.getBBox();let l=document.createElementNS(s,"canvas");d(l,{width:i.width,height:i.height});const c=l.getContext("2d");let u=c.createImageData(i.width,i.height);const f=new b(a);"objectBoundingBox"===a.getAttribute("gradientUnits")&&f.scale(new x(i.width,i.height));const p=a.getAttribute("gradientTransform");null!=p&&f.transform(h(p)),"userSpaceOnUse"===a.getAttribute("gradientUnits")&&f.transform(new x(-i.x,-i.y)),f.paintMesh(u.data,l.width),c.putImageData(u,0,0);const y=document.createElementNS(t,"image");d(y,{width:i.width,height:i.height,x:i.x,y:i.y});let g=l.toDataURL();y.setAttributeNS(e,"xlink:href",g),r.parentNode.insertBefore(y,r),r.style.fill="none";const w=document.createElementNS(t,"use");w.setAttributeNS(e,"xlink:href","#"+o);const m="patchjs_clip"+n,M=document.createElementNS(t,"clipPath");M.setAttribute("id",m),M.appendChild(w),r.parentElement.insertBefore(M,r),y.setAttribute("clip-path","url(#"+m+")"),u=null,l=null,g=null}}if(a&&a[1]){const o=document.getElementById(a[1]);if(o&&"meshgradient"===o.nodeName){const i=parseFloat(r.style.strokeWidth.slice(0,-2))*(parseFloat(r.style.strokeMiterlimit)||parseFloat(r.getAttribute("stroke-miterlimit"))||1),a=r.getBBox(),l=Math.trunc(a.width+i),c=Math.trunc(a.height+i),u=Math.trunc(a.x-i/2),f=Math.trunc(a.y-i/2);let p=document.createElementNS(s,"canvas");d(p,{width:l,height:c});const y=p.getContext("2d");let g=y.createImageData(l,c);const w=new b(o);"objectBoundingBox"===o.getAttribute("gradientUnits")&&w.scale(new x(l,c));const m=o.getAttribute("gradientTransform");null!=m&&w.transform(h(m)),"userSpaceOnUse"===o.getAttribute("gradientUnits")&&w.transform(new x(-u,-f)),w.paintMesh(g.data,p.width),y.putImageData(g,0,0);const M=document.createElementNS(t,"image");d(M,{width:l,height:c,x:0,y:0});let S=p.toDataURL();M.setAttributeNS(e,"xlink:href",S);const k="pattern_clip"+n,A=document.createElementNS(t,"pattern");d(A,{id:k,patternUnits:"userSpaceOnUse",width:l,height:c,x:u,y:f}),A.appendChild(M),o.parentNode.appendChild(A),r.style.stroke="url(#"+k+")",g=null,p=null,S=null}}})}();
</script>
</svg>

Your screenshots indicate, that your font (Wide Latin) is installed locally on your windows desktop but not available on other systems.
You might embed the font in your svg file using a converting tool like transfonter:
<svg
width="600px"
height="600px"
viewBox="0 0 600 600"
version="1.1"
id="SVGRoot"
sodipodi:docname="Busskartan_Logo_2.svg"
inkscape:version="1.1.2 (b8e25be833, 2022-02-05)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview2676"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:document-units="px"
showgrid="false"
inkscape:zoom="1.2810466"
inkscape:cx="129.58155"
inkscape:cy="310.68347"
inkscape:window-width="1920"
inkscape:window-height="1137"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<style>
#font-face {
font-family: 'Wide Latin';
src: url('data:font/woff;charset=utf-8;base64,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') format('woff');
font-weight: normal;
font-style: normal;
}
text {
font-style: normal;
font-variant: normal;
font-weight: normal;
font-stretch: normal;
font-size: 218.971px;
line-height: 1.25;
font-family: "Wide Latin";
-inkscape-font-specification: "Wide Latin, Normal";
font-variant-ligatures: normal;
font-variant-caps: normal;
font-variant-numeric: normal;
font-variant-east-asian: normal;
white-space: pre;
inline-size: 318.312;
fill: #1565c0;
fill-opacity: 1;
stroke: none;
stroke-width: 1.14047;
}
</style>
<defs
id="defs2671">
<meshgradient
inkscape:collect="always"
id="meshgradient26793"
gradientUnits="userSpaceOnUse"
x="31.430662"
y="56.305637">
<meshrow
id="meshrow26795">
<meshpatch
id="meshpatch26797">
<stop
path="c 157.476,0 314.952,0 472.428,0"
style="stop-color:#ffffff;stop-opacity:1"
id="stop26799" />
<stop
path="c 0,189.555 0,379.109 0,568.664"
style="stop-color:#1565c0;stop-opacity:1"
id="stop26801" />
<stop
path="c -157.476,0 -314.952,0 -472.428,0"
style="stop-color:#ffffff;stop-opacity:1"
id="stop26803" />
<stop
path="c 0,-189.555 0,-379.109 0,-568.664"
style="stop-color:#1565c0;stop-opacity:1"
id="stop26805" />
</meshpatch>
</meshrow>
</meshgradient>
</defs>
<g
inkscape:label="Lager 1"
inkscape:groupmode="layer"
id="layer1">
<text
xml:space="preserve"
x="221.05212"
y="274.11481"
id="text18198"
transform="matrix(1.8748445,0,0,3.1101258,-403.22818,-339.41619)"><tspan
x="221.05212"
y="274.11481"
id="tspan27335">B</tspan></text>
</g>
</svg>
In the above example I only embedded the character B (reducing the filesize).
Embedded fonts and previews
Most image preview tools and graphic applications just can't parse webfonts like woff, woff2.
... Quite likely, they can't parse any embedded font format at all.
You might try .ttf truetype since it should be the format providing best legacy compatibility.
If you need the most robust/consistent rendering in any application you might convert your svg text to <path> elements.
install the font locally
open the svg in an editor (like Ai, inkscape etc)
convert the text element to a path (inscape howTo)
I strongly recommend this approach especially for logo svgs.

Related

Cannot load font 'Press Start 2P' in SVG

I have the following svg I need to render in as a standalone svg file:
<svg width="89" height="55" viewBox="0 0 89 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<style>
#font-face {
font-family: 'Press Start 2P';
src: url('https://fonts.googleapis.com/css?family=Press+Start+2P');
}
</style>
<rect width="89" height="55" fill="black" />
<rect x="5.5" y="5.5" width="78" height="44" fill="#0000FF" />
<text text-anchor="middle" x="44.5" y="31" fill=" white" font-family="Press Start 2P" font-size="12" letter-spacing="0em">1234</text>
<rect x="78" y="45" width="9" height="8" fill="#FF4F0A" />
<rect x="5.5" y="5.5" width="78" height="44" stroke="#FF4F0A" stroke-width="3" />
<path d="M81.4286 51V50.4286H81V49.8571H81.8571V50.4286H83.1429V49.2857H81.4286V48.7143H81V47.5714H81.4286V47H83.5714V47.5714H84V48.1429H83.1429V47.5714H81.8571V48.7143H83.5714V49.2857H84V50.4286H83.5714V51H81.4286Z" fill="#0000FF" />
</svg>
I am trying to use a given font (Press Start 2P) but it does not render, neither locally when I open the svg file nor with the following data uri
data:image/svg+xml,%3Csvg%20width%3D%2289%22%20height%3D%2255%22%20viewBox%3D%220%200%2089%2055%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%20%20%20%20%3Cstyle%3E%20%20%20%20%40font-face%20%7B%20%20%20%20%20%20%20%20font-family%3A%20%27Press%20Start%202P%27%3B%20%20%20%20%20%20%20%20src%3A%20url%28%27https%3A//fonts.googleapis.com/css%3Ffamily%3DPress%2BStart%2B2P%27%29%3B%20%20%20%20%7D%20%20%20%20%3C/style%3E%20%20%20%20%3Crect%20width%3D%2289%22%20height%3D%2255%22%20fill%3D%22black%22%20/%3E%20%20%20%20%3Crect%20x%3D%225.5%22%20y%3D%225.5%22%20width%3D%2278%22%20height%3D%2244%22%20fill%3D%22%230000FF%22%20/%3E%20%20%20%20%3Ctext%20text-anchor%3D%22middle%22%20x%3D%2244.5%22%20y%3D%2231%22%20fill%3D%22%20white%22%20font-family%3D%22Press%20Start%202P%22%20font-size%3D%2212%22%20letter-spacing%3D%220em%22%3E1234%3C/text%3E%20%20%20%20%3Crect%20x%3D%2278%22%20y%3D%2245%22%20width%3D%229%22%20height%3D%228%22%20fill%3D%22%23FF4F0A%22%20/%3E%20%20%20%20%3Crect%20x%3D%225.5%22%20y%3D%225.5%22%20width%3D%2278%22%20height%3D%2244%22%20stroke%3D%22%23FF4F0A%22%20stroke-width%3D%223%22%20/%3E%20%20%20%20%3Cpath%20d%3D%22M81.4286%2051V50.4286H81V49.8571H81.8571V50.4286H83.1429V49.2857H81.4286V48.7143H81V47.5714H81.4286V47H83.5714V47.5714H84V48.1429H83.1429V47.5714H81.8571V48.7143H83.5714V49.2857H84V50.4286H83.5714V51H81.4286Z%22%20fill%3D%22%230000FF%22%20/%3E%3C/svg%3E
EDIT
After comment, I tried to embed the whole font but still does not work
<svg width="89" height="55" viewBox="0 0 89 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<style>
#font-face {
font-family: "Press Start 2P";
src: url(data:application/font-woff;charset=utf-8;base64,..) format("woff");
font-weight:normal;font-style:normal;
}
</style>
</defs>
<rect width="89" height="55" fill="#E5E5E5" />
<rect width="89" height="55" fill="#29296E" />
<rect x="5.5" y="5.5" width="78" height="44" fill="#0000FF" />
<text text-anchor="middle" x="44.5" y="31" fill=" white" font-family="Press Start 2P" font-size="12">
{}azer
</text>
<rect x="5.5" y="5.5" width="78" height="44" stroke="#FF4F0A" stroke-width="3" />
<rect x="47" y="45" width="41" height="8" fill="#FF4F0A" />
<text text-anchor="end" x="86" y="52" fill=" white" font-family="Press Start 2P" font-size="8" letter-spacing="0em">
{}
</text>
</svg>
the base64 comes from the base64 encoding of the .ttf file
Your first example doesn't work since you're using a css URL as a font file URL.
Open your google font URL and copy the actual #font-face rule
The returned css depends on your current browser – yeah, user agent sniffing!
#font-face {
font-family: 'Press Start 2P';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/pressstart2p/v14/e3t4euO8T-267oIAQAu6jDQyK3nVivM.woff2) format('woff2');
}
Otherwise use a service like google web fonts helper to get the actual font file URLs.
False friends: css properties vs. svg attributes
Svg's font related attributes like font-family apparently don't work well with css style definitions.
Better apply font-family within the <style> element like so:
<svg viewBox="0 0 89 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<style>
#font-face {
font-family: 'Press Start 2P';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/pressstart2p/v14/e3t4euO8T-267oIAQAu6jDQyK3nVivM.woff2) format('woff2');
}
text {
font-family: 'Press Start 2P';
font-size: 12;
}
</style>
</defs>
<rect width="89" height="55" fill="black" />
<rect x="5.5" y="5.5" width="78" height="44" fill="#0000FF" />
<text text-anchor="middle" x="44.5" y="31" fill=" white">1234</text>
<rect x="78" y="45" width="9" height="8" fill="#FF4F0A" />
<rect x="5.5" y="5.5" width="78" height="44" stroke="#FF4F0A" stroke-width="3" />
</svg>
Embedded fonts
Some services provide a way to generate/convert font files to base64 data URLs like transfonter
Embedded font example
<svg viewBox="0 0 89 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<style>
#font-face {
font-family: 'Press Start 2P';
font-style: normal;
font-weight: 400;
src: url('data:font/woff2;charset=utf-8;base64,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') format('woff2');
font-weight: normal;
font-style: normal;
}
text {
font-family: 'Press Start 2P';
font-size: 12;
}
</style>
</defs>
<rect width="89" height="55" fill="black" />
<rect x="5.5" y="5.5" width="78" height="44" fill="#0000FF" />
<text text-anchor="middle" x="44.5" y="31" fill=" white">1234</text>
<rect x="78" y="45" width="9" height="8" fill="#FF4F0A" />
<rect x="5.5" y="5.5" width="78" height="44" stroke="#FF4F0A" stroke-width="3" />
</svg>
If your svg only uses google webfonts, you can also try vecta's nano optimiser – it can retrieve these fonts and include them as font subsets ( including only needed characters/glyphs).

Create a horizontal linear gradient across an SVG group and not on the individual parts of the group

Is it possible to create a horizontal gradient that applies to the entire group instead of each individual piece? I am trying to build a progress bar composed of multiple rectangles with space in between (see snippet) but it doesn't seem possible unless I create logic for each individual which is not ideal
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3/org/1999/xlink" viewBox="0 0 225 38" preserveAspectRatio="none" width="100%" height="100%">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100sv%" y2="0%">
<stop offset="50%" stop-color="green" />
<stop offset="50%" stop-color="black" />
</linearGradient>
</defs>
<defs>
<linearGradient id="grad2" x1="0" x2="0" y1="0" y2="1">
<stop offset="50%" stop-color="green"/>
<stop offset="50%" stop-color="black" />
</linearGradient>
</defs>
<g fill="url(#grad1)">
<rect x="10" y="1" width="6" height="15" />
<rect x="20" y="1" width="6" height="15" />
<rect x="30" y="1" width="6" height="15" />
<rect x="40" y="1" width="6" height="15" />
<rect x="50" y="1" width="6" height="15" />
</g>
</svg>
<p>desired look</p>
<div style="display: flex; flex-direction: row">
<div style="width: 6px; height: 15px; margin-right: 5px; background-color: green"></div>
<div style="width: 6px; height: 15px; margin-right: 5px; background-color: green"></div>
<div style="width: 6px; height: 15px; margin-right: 5px; background-color: green"></div>
<div style="width: 6px; height: 15px; margin-right: 5px; background-color: black"></div>
<div style="width: 6px; height: 15px; margin-right: 5px; background-color: black"></div>
</div>
Set attribute gradientUnits="userSpaceOnUse" and use the coordinate of the leftmost side of your grafics for x1 (x1="10") resp. the rightmost for x2 (x2="56").
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3/org/1999/xlink" viewBox="0 0 225 38" preserveAspectRatio="none" width="100%" height="100%">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" id="grad1"
x1="10" y1="0" x2="56" y2="0">
<stop offset="50%" stop-color="green" />
<stop offset="50%" stop-color="black" />
</linearGradient>
</defs>
<g fill="url(#grad1)">
<rect x="10" y="1" width="6" height="15" />
<rect x="20" y="1" width="6" height="15" />
<rect x="30" y="1" width="6" height="15" />
<rect x="40" y="1" width="6" height="15" />
<rect x="50" y="1" width="6" height="15" />
</g>
</svg>

Inline SVG inside flex div container (which may have percentage size)

I have three flex columns, each one with relative size to the page itself (width 7%, height 60%). Each column contains three flex items (116px x 140px) with justify-content: space-between; align-items: center;, so they are centered.
Inside each flex item is a SVG containing an image (116px x 140px) because I want to apply some filters to those images (among other things).
I want to have the whole page responsive - not just the flex columns but SVGs as well. I've tried to set those SVGs with width and height 100% respectively and (obviously) didn't work.
I know I should use viewBox. min-x and min-y will be 0 (no pan/offset) but what values width and height should have?
I have another column - same size as the others (width 7%, height 60%). It contains a single SVG which has inside a path used to flow a gradient on it. How to make this SVG (path) responsive too?
viewBox should be the solution but again: What values width and height should have? I know their values can't be percentages but pixels - again, the column container has percentage sizes.
I don't want to use CSS for that (from what I've read it's cumbersome to use in this situation and I wan't my code to have a simple and clean flow). So all SVG animations are managed using Tweenmax.
This was my original code (using width and height 100% for SVGs, which is wrong)
:root {
--flexColumnPosTop: 10%;
}
.flex-container {
display: flex;
flex-flow: column;
justify-content: space-between;
align-items: center;
}
.flex-container-column {
position: absolute;
/* background-color: cyan; */
top: calc(var(--flexColumnPosTop) * 2);
width: 7%;
height: 60%;
}
.flex-container-column-posleft{
left: var(--flexColumnPos);
}
.divImagePNG {
width: 116px;
height: 110px;
}
<svg>
<defs>
<linearGradient id="linearGradient" x1="0" y1="0" x2="100%" y2="0" spreadMethod="pad" gradientUnits="userSpaceOnUse">
<stop id="offset_start" offset="0" stop-color="rgb(249, 59, 120)" stop-opacity="1" />
<stop id="offset_mid" offset="0" stop-color="rgb(250, 250, 250)" stop-opacity="1" />
<stop id="offset_end" offset="0" stop-color="rgb(116, 161, 230)" stop-opacity="1"/>
</linearGradient>
<path id="gradientPath" d="M20 70 h18 v85 h19" fill="none" stroke="rgb(116, 161, 230)" stroke-width="5" stroke-dasharray="122" stroke-dashoffset="0" />
<pattern id="patternImagePNG" patternUnits="userSpaceOnUse" width="116px" height="110px">
<image id="imagePNG" preserveAspectRatio="none" href="image.png" width="116px" height="110px"></image>
</pattern>
<rect id="rectImagePNG" x="0" y="0" width="116px" height="110px" fill="url(#patternImagePNG)" stroke-width="5" stroke="rgb(201, 28, 240)"
stroke-dasharray="452" stroke-dashoffset="0" fill-opacity="1" />
</defs>
</svg>
<div class="flex-container flex-container-column flex-container-column-posleft">
<div class="divImagePNG">
<svg width="100%" height="100%">
<use href="#rectImagePNG"></use>
</svg>
</div>
<div class="divImagePNG">
<svg width="100%" height="100%">
<use href="#rectImagePNG"></use>
</svg>
</div>
<div class="divImagePNG">
<svg width="100%" height="100%">
<use href="#rectImagePNG"></use>
</svg>
</div>
</div>
<div class="flex-container flex-container-column flex-container-column-pospathleft">
<svg width="100%" height="100%">
<use href="#gradientPath"></use>
</svg>
</div>

svg fill url not working in any Chrome Extension pages but working on any websites and local files

I'm working on my Chrome Extension:zzllrr Imager Geek and find svg fill url not working in any Chrome Extension pages (URLs start with chrome-extension://).
But on normal webpages(http:,https:, file://.) it works like a charm. Below is the code:
<svg id="LRectSq30821072" xmlns="http://www.w3.org/2000/svg" style="position: absolute; left: 66px; top: 155px; width: 76px; height: 76px; z-index: 2001; filter: none; transform: none;">
<defs>
<linearGradient id="LRectSq30821072linearfill" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#3f377d;stop-opacity:1"></stop>
<stop offset="34%" style="stop-color:#da310a;stop-opacity:1"></stop>
<stop offset="68%" style="stop-color:#cd2c78;stop-opacity:1"></stop>
<stop offset="100%" style="stop-color:#82a462;stop-opacity:1"></stop>
</linearGradient>
</defs>
<rect x="1" y="1" width="74" height="74" stroke-width="2" stroke="#585c1a" stroke-opacity="1" fill="url(#LRectSq30821072linearfill)" fill-opacity="1" stroke-dasharray="" stroke-dashoffset="1" stroke-linecap="butt" stroke-linejoin="miter"></rect>
</svg>

SVG gaussian blur filter causing an unexpected greenish glow

Yello!
I have a strange occurence when using a gaussian blur filter on an SVG text element in Firefoxy. I tried searching the web for solutions but I haven't even been able to find anything mentioning this issue. Here's a reproducible example (and the JSFiddle):
<svg id="svg1" width="100%" height="1000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<defs>
<filter id="filterBlur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blurOut" />
<feBlend in="SourceGraphic" in2="blurOut" />
</filter>
</defs>
<text class="link" x="100" y="100">Hello World</text>
</svg>
And the CSS
body {background-color:black;}
text {
font-family: "Arial";
fill: white;
}
.link {
font-size: 20px;
opacity: 0.90;
letter-spacing: 3px;
font-weight: bold;
filter: url(#filterBlur);
}
I have tried several fonts but they all exhibit the same greenish glow. In Chrome the blur works just fine. Any ideas?
D
A fix for this is coming in Firefox 29. You can download the beta now if you want to try it.

Resources