SVG filter disappear on iOS-Safari - javascript

In iOS Safari, the second rect disappears, why?
I expect it to display properly in iOS.
<svg style="width:800px; height:500px; display: inline;" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="myfilter" width="180%" height="160%" y="-30%" x="-40%">
<feGaussianBlur stdDeviation="1.5"></feGaussianBlur>
<feComponentTransfer result="blur">
<feFuncA type="table" tableValues="0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1"></feFuncA>
</feComponentTransfer>
<feFlood flood-color="#221D4E" flood-opacity="0.9" result="color"></feFlood>
<feComposite in="color" in2="blur" operator="in" result="glow"></feComposite>
<feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur>
<feOffset dx="0" dy="0"></feOffset>
<feComponentTransfer result="shadow">
<feFuncR type="table" tableValues="1 1"></feFuncR>
<feFuncG type="table" tableValues="0.67 0.67"></feFuncG>
<feFuncB type="table" tableValues="0.21 0.21"></feFuncB>
<feFuncA type="table" tableValues="0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1"></feFuncA>
</feComponentTransfer>
<feComposite in="glow" in2="shadow" operator="over" result="highlight" />
<feComposite in="SourceGraphic" in2="highlight" operator="over" />
</filter>
</defs>
<g transform="translate(0,25)">
<rect width="100" height="100" fill="red" x="100" style="filter:url(#myfilter)"></rect>
<rect width="100" height="20000" fill="red" x="250" style="filter:url(#myfilter)"></rect>
</g>
</svg>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
</head>
<body>
<svg style="width:800px; height:500px; display: inline;" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="myfilter" width="180%" height="160%" y="-30%" x="-40%">
<feGaussianBlur stdDeviation="1.5"></feGaussianBlur>
<feComponentTransfer result="blur">
<feFuncA type="table" tableValues="0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1"></feFuncA>
</feComponentTransfer>
<feFlood flood-color="#221D4E" flood-opacity="0.9" result="color"></feFlood>
<feComposite in="color" in2="blur" operator="in" result="glow"></feComposite>
<feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur>
<feOffset dx="0" dy="0"></feOffset>
<feComponentTransfer result="shadow">
<feFuncR type="table" tableValues="1 1"></feFuncR>
<feFuncG type="table" tableValues="0.67 0.67"></feFuncG>
<feFuncB type="table" tableValues="0.21 0.21"></feFuncB>
<feFuncA type="table" tableValues="0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1"></feFuncA>
</feComponentTransfer>
<feComposite in="glow" in2="shadow" operator="over" result="highlight" />
<feComposite in="SourceGraphic" in2="highlight" operator="over" />
</filter>
</defs>
<g transform="translate(0,25)">
<rect width="100" height="100" fill="red" x="100" style="filter:url(#myfilter)"></rect>
<rect width="100" height="20000" fill="red" x="250" style="filter:url(#myfilter)"></rect>
</g>
</svg>
</body>
</html>
chrome
enter image description here
iOS Safari
enter image description here
I expect it to display properly in iOS


iOS has a lot of memory optimizations. Your second rect is very large and mostly outside the initial viewBox, so iOS does not render the filter because it's taking up too much memory for off-screen rendering.
When you change the height of the rect (I'm on iPhone 12 Pro (128GB), iOS 16.1.1), the second rect disappears exactly at height = "6473" - so the largest rect height that this filter will support is 6472 on my phone.
Does this make any sense - probably not, but welcome to Apple's web team.

Related

How to update image styles with JavaScript while making image editor?

While making an image editor I made 9 input ranges for all the 9 filter styles in CSS. In JavaScript I was able to give all those input ranges an event listener so that whenever a range was changed then a function gets executed. Now all that works fine and when you do a
console.log(inputRanges);
The value gets updated successfully but the problem is that I am not able to update the image styles with JavaScript. I have tried:
image.style.filter = settings
image.style.filter = // concatination of settings
none of them are working and I really don't know why.
You can have a look at my code here:
const inputRanges = document.querySelectorAll('input[type="range"]');
inputRanges.forEach((inputRange) => {
inputRange.addEventListener("change", () => {
console.log(inputRanges);
let blur = document.getElementById("blur").value;
let brightness = document.getElementById("brightness").value;
let contrast = document.getElementById("contrast").value;
let saturation = document.getElementById("saturation").value;
let grayscale = document.getElementById("grayscale").value;
let hue = document.getElementById("hue").value;
let opacity = document.getElementById("opacity").value;
let invert = document.getElementById("invert").value;
let sepia = document.getElementById("sepia").value;
let settings;
const image = document.getElementById('previewImage');
settings = "blur(" + blur + "px) brightness(" + brightness + "%) contrast(" + contrast + "%) saturation(" + saturation + "%) grayscale(" + grayscale + "%) hue(" + hue + "deg) opacity(" + opacity + "%) invert(" + invert + "%) sepia(" + sepia / 100 + "%)";
image.style.filter = settings;
});
});
body{
display: flex;
justify-content: center;
margin: 0;
padding: 20px;
box-sizing: border-box;
font-family: poppins;
}
img {
display: block;
width: 400px;
height: 266.5px;
border: 10px solid black;
}
#image{
overflow: hidden;
}
#container {
display: flex;
flex-direction: column;
background: #383838;
align-items: center;
width: fit-content;
border-radius: 20px;
padding: 30px;
}
input[type="range"]{
display: block;
width: 300px
}
#setting{
height: 50px;
width: 400px;
border-radius: 25px;
background-color: white;
margin: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Editor</title>
</head>
<body>
<div id='container'>
<div id="image">
<img id="previewImage" src="toy car.jpg" alt="Toy Car">
</div>
<div id="settings">
<div id="setting">
Blur:
<input type="range" id="blur" min='0' max='20' value="0">
</div>
<div id="setting">
Brightness:
<input type="range" id="brightness" min='0' max='200' value="100">
</div>
<div id="setting">
Contrast:
<input type="range" id="contrast" min='0' max='500' value='100'>
</div>
<div id="setting">
Saturation:
<input type="range" id="saturation" min='0' max='500' value='100'>
</div>
<div id="setting">
Grayscale:
<input type="range" id="grayscale" min='0' max='100' value='0'>
</div>
<div id="setting">
Hue:
<input type="range" id="hue" min='0' max='360' value='0'>
</div>
<div id="setting">
Invert:
<input type="range" id="invert" min='0' max='100'>
</div>
<div id="setting">
Opacity:
<input type="range" id="opacity" min='0' max='100' value="100">
</div>
<div id="setting">
Sepia:
<input type="range" id="sepia" min='0' max='100' value="0">
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
I don't think you will be able to see the image like this the image link is here:
https://images.pexels.com/photos/386010/pexels-photo-386010.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500

You have two filters named wrong, change hue to hue-rotate and saturation to saturate. Source: https://www.w3schools.com/cssref/css3_pr_filter.asp

Replace settings with
settings = `blur(${blur}px) brightness(${brightness}%) contrast(${contrast}%) saturate(${saturation}%) grayscale(${grayscale}%) hue-rotate(${hue}deg) opacity(${opacity}%) invert(${invert}%) sepia(${sepia}%)`;

This Codepen is similar; worth a look.
/* The main module for this is external. */
const elements = document.querySelectorAll('[data-js="filter"]');
if (elements.length) {
import('https://elements.stoumann.dk/assets/js/css-filter.mjs')
.then(module => {
const jsClass = module.default;
elements.forEach(element => {
new jsClass(element, element.dataset, presets);
});
})
}
/* Default presets for localhost demo / or when REST API fails */
const presets = [
{
"name": "watercolor",
"description": "",
"value": "url('#squiggly-1') brightness(1.3) invert(0.17) saturate(2.6) sepia(0.25)",
"values": [
{
"brightness": 1.3,
"invert": 0.17,
"saturate": 2.6,
"sepia": 0.25,
"url": "url('#squiggly-1')"
}
]
},
{
"name": "faded-photo",
"description": "",
"value": "blur(0.2px) brightness(1.1) hue-rotate(5deg) opacity(0.9) saturate(1.3) sepia(0.4)",
"values": [
{
"blur": 0.2,
"brightness": 1.1,
"hue-rotate": 5,
"opacity": 0.9,
"saturate": 1.3,
"sepia": 0.40
}
]
},
{
"name": "old-horror",
"description": "",
"value": "url('#grain') grayscale(1) sepia(0.5) brightness(1.3) invert(0.8)",
"values": [
{
"url": "url('#grain')",
"grayscale": 1,
"sepia": 0.5,
"brightness": 1.3,
"invert": 0.8
}
]
},
{
"name": "old-grainy",
"description": "",
"value": "url('#grain') grayscale(0.6) sepia(0.5) brightness(1.5)",
"values": [
{
"url": "url('#grain')",
"grayscale": 0.6,
"sepia": 0.5,
"brightness": 1.5
}
]
},
{
"name": "fade-out",
"description": "",
"value": "brightness(0.8) hue-rotate(350deg) saturate(3) blur(8px) contrast(0.6)",
"values": [
{
"brightness": 0.8,
"hue-rotate": 350,
"saturate": 3,
"blur": 8,
"contrast": 0.6
}
]
},
{
"name": "mist",
"description": "",
"value": "url('#fluffy') brightness(0.8) saturate(0.8)",
"values": [
{
"url": "url('#fluffy')",
"brightness": 0.8,
"saturate": 0.8
}
]
}
];
<div data-js="filter"
data-filter-file="#svgfilters"
data-lbl-app-header="CSS <code>filter</code> Editor"
data-preview-image="https://elements.stoumann.dk/assets/img/filter01.jpg,https://elements.stoumann.dk/assets/img/filter02.jpg,https://elements.stoumann.dk/assets/img/filter03.jpg,https://elements.stoumann.dk/assets/img/filter04.jpg,https://elements.stoumann.dk/assets/img/filter05.jpg">
</div>
<svg id="svgfilters" aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="teal-white" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values=".33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0
0 0 0 1 0" in="SourceGraphic" result="colormatrix"/>
<feComponentTransfer in="colormatrix" result="componentTransfer">
<feFuncR type="table" tableValues="0.03 1"/>
<feFuncG type="table" tableValues="0.57 1"/>
<feFuncB type="table" tableValues="0.49 1"/>
<feFuncA type="table" tableValues="0 1"/>
</feComponentTransfer>
<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
</filter>
<filter id="teal-lightgreen" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values=".33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0
0 0 0 1 0" in="SourceGraphic" result="colormatrix"/>
<feComponentTransfer in="colormatrix" result="componentTransfer">
<feFuncR type="table" tableValues="0.03 0.8"/>
<feFuncG type="table" tableValues="0.57 1"/>
<feFuncB type="table" tableValues="0.49 0.53"/>
<feFuncA type="table" tableValues="0 1"/>
</feComponentTransfer>
<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
</filter>
<filter id="sepia" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values=".33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0
0 0 0 1 0" in="SourceGraphic" result="colormatrix"/>
<feComponentTransfer in="colormatrix" result="componentTransfer">
<feFuncR type="table" tableValues="0.26 0.95"/>
<feFuncG type="table" tableValues="0.19 0.78"/>
<feFuncB type="table" tableValues="0.11 0.59"/>
<feFuncA type="table" tableValues="0 1"/>
</feComponentTransfer>
<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
</filter>
<filter id="purple-sepia" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values=".33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0
0 0 0 1 0" in="SourceGraphic" result="colormatrix"/>
<feComponentTransfer in="colormatrix" result="componentTransfer">
<feFuncR type="table" tableValues="0.43 0.97"/>
<feFuncG type="table" tableValues="0.06 0.88"/>
<feFuncB type="table" tableValues="0.37 0.79"/>
<feFuncA type="table" tableValues="0 1"/>
</feComponentTransfer>
<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
</filter>
<filter id="cherry-icecream" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values=".33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0
0 0 0 1 0" in="SourceGraphic" result="colormatrix"/>
<feComponentTransfer in="colormatrix" result="componentTransfer">
<feFuncR type="table" tableValues="0.84 1"/>
<feFuncG type="table" tableValues="0.05 0.94"/>
<feFuncB type="table" tableValues="0.37 0.61"/>
<feFuncA type="table" tableValues="0 1"/>
</feComponentTransfer>
<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
</filter>
<filter id="blackCurrant-and-mint" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values=".33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0
0 0 0 1 0" in="SourceGraphic" result="colormatrix"/>
<feComponentTransfer in="colormatrix" result="componentTransfer">
<feFuncR type="table" tableValues="0.75 0.53"/>
<feFuncG type="table" tableValues="0.25 0.97"/>
<feFuncB type="table" tableValues="0.64 0.77"/>
<feFuncA type="table" tableValues="0 1"/>
</feComponentTransfer>
<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
</filter>
<filter id="sea" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values=".33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0
0 0 0 1 0" in="SourceGraphic" result="colormatrix"/>
<feComponentTransfer in="colormatrix" result="componentTransfer">
<feFuncR type="table" tableValues="0.02 0.13 0.8"/>
<feFuncG type="table" tableValues="0.02 0.47 0.97"/>
<feFuncB type="table" tableValues="0.26 0.52 0.48"/>
<feFuncA type="table" tableValues="0 1"/>
</feComponentTransfer>
<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
</filter>
<filter id="warm-sea" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values=".33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0
0 0 0 1 0" in="SourceGraphic" result="colormatrix"/>
<feComponentTransfer in="colormatrix" result="componentTransfer">
<feFuncR type="table" tableValues="0.29 0.01 0.97"/>
<feFuncG type="table" tableValues="0.12 0.52 0.94"/>
<feFuncB type="table" tableValues="0.37 0.59 0.47"/>
<feFuncA type="table" tableValues="0 1"/>
</feComponentTransfer>
<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
</filter>
<filter id="spring-grass" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values=".33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0
0 0 0 1 0" in="SourceGraphic" result="colormatrix"/>
<feComponentTransfer in="colormatrix" result="componentTransfer">
<feFuncR type="table" tableValues="0 0.38 0.92"/>
<feFuncG type="table" tableValues="0.5 0.8 1"/>
<feFuncB type="table" tableValues="0.5 0.56 0.74"/>
<feFuncA type="table" tableValues="0 1"/>
</feComponentTransfer>
<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
</filter>
<filter id="red-sunset-with-purple" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values=".33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0
0 0 0 1 0" in="SourceGraphic" result="colormatrix"/>
<feComponentTransfer in="colormatrix" result="componentTransfer">
<feFuncR type="table" tableValues="0.52 0.86 0.97"/>
<feFuncG type="table" tableValues="0 0.08 0.81"/>
<feFuncB type="table" tableValues="0.51 0.24 0.05"/>
<feFuncA type="table" tableValues="0 1"/>
</feComponentTransfer>
<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
</filter>
<filter id="red-sunset" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values=".33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0
0 0 0 1 0" in="SourceGraphic" result="colormatrix"/>
<feComponentTransfer in="colormatrix" result="componentTransfer">
<feFuncR type="table" tableValues="0.27 0.86 0.97"/>
<feFuncG type="table" tableValues="0.01 0.08 0.81"/>
<feFuncB type="table" tableValues="0.02 0.24 0.05"/>
<feFuncA type="table" tableValues="0 1"/>
</feComponentTransfer>
<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
</filter>
<filter id="gold-sunset" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values=".33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0
0 0 0 1 0" in="SourceGraphic" result="colormatrix"/>
<feComponentTransfer in="colormatrix" result="componentTransfer">
<feFuncR type="table" tableValues="0.27 0.86 1"/>
<feFuncG type="table" tableValues="0.01 0.31 0.95"/>
<feFuncB type="table" tableValues="0.02 0.02 0.02"/>
<feFuncA type="table" tableValues="0 1"/>
</feComponentTransfer>
<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
</filter>
<filter id="dark-crimson-sepia" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values=".33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0
0 0 0 1 0" in="SourceGraphic" result="colormatrix"/>
<feComponentTransfer in="colormatrix" result="componentTransfer">
<feFuncR type="table" tableValues="0.01 0.52 0.97"/>
<feFuncG type="table" tableValues="0 0.05 0.81"/>
<feFuncB type="table" tableValues="0.02 0.29 0.61"/>
<feFuncA type="table" tableValues="0 1"/>
</feComponentTransfer>
<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
</filter>
<filter id="dark-blue-sepia" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values=".33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0
0 0 0 1 0" in="SourceGraphic" result="colormatrix"/>
<feComponentTransfer in="colormatrix" result="componentTransfer">
<feFuncR type="table" tableValues="0.29 0.15 0.97"/>
<feFuncG type="table" tableValues="0.04 0.39 0.93"/>
<feFuncB type="table" tableValues="0.32 0.52 0.73"/>
<feFuncA type="table" tableValues="0 1"/>
</feComponentTransfer>
<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
</filter>
<filter id="dark-green-sepia" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values=".33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0
0 0 0 1 0" in="SourceGraphic" result="colormatrix"/>
<feComponentTransfer in="colormatrix" result="componentTransfer">
<feFuncR type="table" tableValues="0.25 0.39 0.96"/>
<feFuncG type="table" tableValues="0.16 0.52 0.97"/>
<feFuncB type="table" tableValues="0.06 0.39 0.78"/>
<feFuncA type="table" tableValues="0 1"/>
</feComponentTransfer>
<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
</filter>
<filter id="x-rays" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values=".33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0
0 0 0 1 0" in="SourceGraphic" result="colormatrix"/>
<feComponentTransfer in="colormatrix" result="componentTransfer">
<feFuncR type="table" tableValues="0.98 0.3 0.25"/>
<feFuncG type="table" tableValues="1 0.44 0.24"/>
<feFuncB type="table" tableValues="0.91 0.62 0.39"/>
<feFuncA type="table" tableValues="0 1"/>
</feComponentTransfer>
<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
</filter>
<filter id="warm-x-rays" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values=".33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0
0 0 0 1 0" in="SourceGraphic" result="colormatrix"/>
<feComponentTransfer in="colormatrix" result="componentTransfer">
<feFuncR type="table" tableValues="0.98 0.75 0.51"/>
<feFuncG type="table" tableValues="1 0.45 0.11"/>
<feFuncB type="table" tableValues="0.91 0.39 0.29"/>
<feFuncA type="table" tableValues="0 1"/>
</feComponentTransfer>
<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
</filter>
<filter id="golden-x-rays" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values=".33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0
0 0 0 1 0" in="SourceGraphic" result="colormatrix"/>
<feComponentTransfer in="colormatrix" result="componentTransfer">
<feFuncR type="table" tableValues="0.98 1 0.94"/>
<feFuncG type="table" tableValues="1 0.98 0.44"/>
<feFuncB type="table" tableValues="0.91 0.43 0.02"/>
<feFuncA type="table" tableValues="0 1"/>
</feComponentTransfer>
<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
</filter>
<filter id="purple-warm" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values=".33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0
0 0 0 1 0" in="SourceGraphic" result="colormatrix"/>
<feComponentTransfer in="colormatrix" result="componentTransfer">
<feFuncR type="table" tableValues="0.52 0.97 1"/>
<feFuncG type="table" tableValues="0 0.62 1"/>
<feFuncB type="table" tableValues="0.51 0.39 0.89"/>
<feFuncA type="table" tableValues="0 1"/>
</feComponentTransfer>
<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
</filter>
<filter id="green-pink-acid" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values=".33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0
0 0 0 1 0" in="SourceGraphic" result="colormatrix"/>
<feComponentTransfer in="colormatrix" result="componentTransfer">
<feFuncR type="table" tableValues="1 0.98 0.1"/>
<feFuncG type="table" tableValues="0.17 1 0.82"/>
<feFuncB type="table" tableValues="0.7 0.84 0.67"/>
<feFuncA type="table" tableValues="0 1"/>
</feComponentTransfer>
<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
</filter>
<filter id="yellow-blue-acid" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values=".33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0
0 0 0 1 0" in="SourceGraphic" result="colormatrix"/>
<feComponentTransfer in="colormatrix" result="componentTransfer">
<feFuncR type="table" tableValues="0.01 0.97 0.89"/>
<feFuncG type="table" tableValues="0.38 1 1"/>
<feFuncB type="table" tableValues="1 0.89 0.01"/>
<feFuncA type="table" tableValues="0 1"/>
</feComponentTransfer>
<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
</filter>
<filter id="noise" x="0%" y="0%" width="100%" height="100%">
<feTurbulence baseFrequency="0.01 0.4" result="NOISE" numOctaves="2" />
<feDisplacementMap in="SourceGraphic" in2="NOISE" scale="20" xChannelSelector="R" yChannelSelector="R"></feDisplacementMap>
</filter>
<filter id="squiggly-0">
<feTurbulence id="turbulence1" baseFrequency="0.02" numOctaves="3" result="noise" seed="0" />
<feDisplacementMap id="displacement" in="SourceGraphic" in2="noise" scale="6" />
</filter>
<filter id="squiggly-1">
<feTurbulence id="turbulence2" baseFrequency="0.02" numOctaves="3" result="noise" seed="1" />
<feDisplacementMap in="SourceGraphic" in2="noise" scale="8" />
</filter>
<filter id="squiggly-2">
<feTurbulence id="turbulence3" baseFrequency="0.02" numOctaves="3" result="noise" seed="2" />
<feDisplacementMap in="SourceGraphic" in2="noise" scale="6" />
</filter>
<filter id="squiggly-3">
<feTurbulence id="turbulence4" baseFrequency="0.02" numOctaves="3" result="noise" seed="3" />
<feDisplacementMap in="SourceGraphic" in2="noise" scale="8" />
</filter>
<filter id="squiggly-4">
<feTurbulence id="turbulence5" baseFrequency="0.02" numOctaves="3" result="noise" seed="4" />
<feDisplacementMap in="SourceGraphic" in2="noise" scale="6" />
</filter>
<filter id="posterize">
<feComponentTransfer>
<feFuncR type="discrete" tableValues="0 .5 1" />
</feComponentTransfer>
</filter>
<filter id="dancing" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">
<feMorphology operator="dilate" radius="4 4" in="SourceAlpha" result="morphology"/>
<feFlood flood-color="#30597E" flood-opacity="1" result="flood"/>
<feComposite in="flood" in2="morphology" operator="in" result="composite"/>
<feComposite in="composite" in2="SourceAlpha" operator="out" result="composite1"/>
<feTurbulence type="fractalNoise" baseFrequency="0.01 0.02" numOctaves="1" seed="0" stitchTiles="stitch" result="turbulence"/>
<feDisplacementMap in="composite1" in2="turbulence" scale="17" xChannelSelector="A" yChannelSelector="A" result="displacementMap"/>
<feMerge result="merge">
<feMergeNode in="SourceGraphic"/>
<feMergeNode in="displacementMap"/>
</feMerge>
</filter>
<filter id="drops" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feTurbulence type="turbulence" baseFrequency="0.05 0.05" numOctaves="1" seed="3" stitchTiles="stitch" result="turbulence"/>
<feComposite in="turbulence" in2="SourceGraphic" operator="in" result="composite"/>
<feColorMatrix type="matrix" values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 25 -2" in="composite" result="colormatrix"/>
<feComposite in="SourceGraphic" in2="colormatrix" operator="in" result="composite1"/>
<feGaussianBlur stdDeviation="3 3" in="composite1" result="blur"/>
<feSpecularLighting surfaceScale="2" specularConstant="1" specularExponent="20" lighting-color="#fffffd" in="blur" result="specularLighting">
<feDistantLight azimuth="-90" elevation="150"/>
</feSpecularLighting>
<feSpecularLighting surfaceScale="2" specularConstant="1" specularExponent="20" lighting-color="#cae1fe" in="blur" result="specularLighting1">
<feDistantLight azimuth="90" elevation="150"/>
</feSpecularLighting>
<feSpecularLighting surfaceScale="7" specularConstant="1" specularExponent="35" lighting-color="#fcfeff" in="blur" result="specularLighting2">
<fePointLight x="150" y="50" z="300"/>
</feSpecularLighting>
<feComposite in="specularLighting" in2="composite1" operator="in" result="composite2"/>
<feComposite in="specularLighting2" in2="composite1" operator="in" result="composite3"/>
<feComposite in="specularLighting1" in2="composite1" operator="in" result="composite4"/>
<feBlend mode="multiply" in="composite4" in2="SourceGraphic" result="blend"/>
<feBlend in="composite2" in2="blend" result="blend1"/>
<feBlend in="composite3" in2="blend1" result="blend2"/>
</filter>
<filter id="grain">
<feTurbulence baseFrequency="0.60,0.90" result="colorNoise" />
<feColorMatrix in="colorNoise" type="matrix" values=".33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 1 0"/>
<feComposite operator="in" in2="SourceGraphic" result="monoNoise"/>
<feBlend in="SourceGraphic" in2="monoNoise" mode="multiply" />
</filter>
<filter id="fluffy" x="0%" y="0%" width="100%" height="100%">
<feTurbulence type="fractalNoise" baseFrequency="0.04" result="fluffyNoise" numOctaves="5" />
<feColorMatrix in="fluffyNoise" type="matrix" values=".33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 1 0"/>
<feComposite operator="in" in2="SourceGraphic" result="monoFluffyNoise"/>
<feBlend in="SourceGraphic" in2="monoFluffyNoise" mode="screen" />
</filter>
</defs>
</svg>

backgroung fill pattern image not export

I am working with the D3 library.
I want to export svg as a png image , check below code what is shown in this jsfiddle, when we are exporting svg as a png, pattern background image not exporting in png image. kindely check and revert.
I read that something like this can be accomplished using svg's patterns. So here is some of the D3 code I am using to append an image into a pattern:
d3.select("#downloadsvg").on("click", function(){
var html = d3.select("#svg > .pattern > svg")
.attr("version", 1.1)
.attr("xmlns", "http://www.w3.org/2000/svg")
.node().parentNode.innerHTML;
//console.log(html);
var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html);
var img = '<img src="'+imgsrc+'">';
d3.select("#svgdataurl").html(img);
var canvas = document.querySelector("canvas"),
context = canvas.getContext("2d");
var image = new Image;
image.src = imgsrc;
image.onload = function() {
context.drawImage(image, 0, 0);
var canvasdata = canvas.toDataURL("image/png");
var pngimg = '<img src="'+canvasdata+'">';
d3.select("#pngdataurl").html(pngimg);
var a = document.createElement("a");
a.download = "sample.png";
a.href = canvasdata;
a.click();
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="svg">
<div class="pattern" style="margin: 25px;"><svg id="selectedsvg" width="250" height="250" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="contrast">
<feGaussianBlur stdDeviation="1.5"></feGaussianBlur>
<feComponentTransfer>
<feFuncR type="discrete" tableValues="0 .5 1 1"></feFuncR>
<feFuncG type="discrete" tableValues="0 .5 1"></feFuncG>
<feFuncB type="discrete" tableValues="0"></feFuncB>
</feComponentTransfer>
</filter>
<filter id="brightness">
<feComponentTransfer>
<feFuncR type="linear" slope="5"></feFuncR>
<feFuncG type="linear" slope="5"></feFuncG>
<feFuncB type="linear" slope="5"></feFuncB>
</feComponentTransfer>
</filter>
<filter id="grayscale">
<feColorMatrix values="0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0 0 0 1 0"></feColorMatrix>
</filter>
<filter id="saturate">
<feComponentTransfer>
<feFuncR tableValues="1 .33 .33" type="table"></feFuncR>
<feFuncG tableValues=".33 1 .33" type="table"></feFuncG>
<feFuncB tableValues=".33 .33 1" type="table"></feFuncB>
</feComponentTransfer>
</filter>
<filter id="hue-rotate">
<feComponentTransfer>
<feFuncR type="table" tableValues="1 0"></feFuncR>
<feFuncG type="table" tableValues="1 0"></feFuncG>
<feFuncB type="table" tableValues="1 0"></feFuncB>
</feComponentTransfer>
</filter>
<filter id="sepia">
<feComponentTransfer>
<feFuncR tableValues="0.15 .25" type="table"></feFuncR>
<feFuncG tableValues=".01 .25" type="table"></feFuncG>
<feFuncB tableValues="0 .09" type="table"></feFuncB>
</feComponentTransfer>
</filter>
<filter id="invert">
<feComponentTransfer>
<feFuncR type="table" tableValues="1 0"></feFuncR>
<feFuncG type="table" tableValues="1 0"></feFuncG>
<feFuncB type="table" tableValues="1 0"></feFuncB>
</feComponentTransfer>
</filter>
<filter id="blur">
<feGaussianBlur stdDeviation="10" result="outBlur"></feGaussianBlur>
</filter>
<pattern id="pattern1" height="100%" width="100%" patternContentUnits="objectBoundingBox"> <image height="1px" width="1px" preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://halyca.kiwis-and-brownies.de/demo3/img/Embroidery1.png"></image></pattern>
<pattern id="pattern2" height="100%" width="100%" patternContentUnits="objectBoundingBox"> <image height="1px" width="1px" preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://halyca.kiwis-and-brownies.de/demo3/img/Embroidery2.png"></image></pattern>
<pattern id="pattern3" height="100%" width="100%" patternContentUnits="objectBoundingBox"> <image height="1px" width="1px" preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://halyca.kiwis-and-brownies.de/demo3/img/Embroidery3.png"></image></pattern>
<pattern id="pattern4" height="100%" width="100%" patternContentUnits="objectBoundingBox"> <image height="1px" width="1px" preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://halyca.kiwis-and-brownies.de/demo3/img/Embroidery4.png"></image></pattern>
</defs>
<rect x="0%" y="0%" width="100%" height="100%" fill="#FC7A04" id="1" filter="url(#blur)"></rect>
<circle xmlns="http://www.w3.org/2000/svg" cx="50%" cy="50%" r="50%" stroke="black" stroke-width="0.5" id="c1" fill="url(#pattern-77)"></circle>
<circle xmlns="http://www.w3.org/2000/svg" cx="50%" cy="50%" r="40%" stroke="black" stroke-width="0.5" fill="#eee333" id="c2" filter="url(#blur)"></circle>
<circle xmlns="http://www.w3.org/2000/svg" cx="50%" cy="50%" r="30%" stroke="black" stroke-width="0.5" id="c3" fill="url(#pattern-94)"></circle>
<circle xmlns="http://www.w3.org/2000/svg" cx="50%" cy="50%" r="20%" stroke="black" stroke-width="0.5" id="c4"></circle>
<defs><pattern id="pattern-94" height="30%" width="30%" x="-0.05" y="-0.030000000000000006" patternContentUnits="objectBoundingBox"><image width="0.30000000000000004px" height="0.30000000000000004px" preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://halyca.kiwis-and-brownies.de/media/configurator/embroidery/Embroidery4.png"></image></pattern></defs><defs><pattern id="pattern-77" height="20%" width="20%" x="-0.02" y="0.01" patternContentUnits="objectBoundingBox"><image width="0.20000000000000004px" height="0.20000000000000004px" preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://halyca.kiwis-and-brownies.de/media/configurator/embroidery/Embroidery1.png"></image></pattern></defs><text x="8" y="238" id="text-21" font-size="27" font-family="Times New Roman" style="fill: rgb(184, 19, 59);" font-weight="bold" font-style="italic">sadja</text><path d="M9.5,15L118.5,97" stroke="black" stroke-width="1px"></path><path d="M119.5,98L216.5,9" stroke="black" stroke-width="1px"></path><path d="M217.5,10L217.5,10" stroke="black" stroke-width="1px"></path><path d="M217.5,10L9.5,15" stroke="black" stroke-width="1px"></path><path d="M10.5,16L10.5,16" stroke="black" stroke-width="1px"></path><path d="M11.5,35L11.5,35" stroke="black" stroke-width="1px"></path><path d="M11.5,35L11.5,35" stroke="black" stroke-width="1px"></path><path d="M206.5,143L206.5,143" stroke="black" stroke-width="1px"></path><path d="M206.5,143L206.5,143" stroke="black" stroke-width="1px"></path><path d="M163.5,32L163.5,32" stroke="black" stroke-width="1px"></path></svg> </div>
</div>
<canvas id="canvas1" width='380' height='378' hidden></canvas>
<button id="downloadsvg"> Save Svg</button>

First you have to embed your image into base64 using dataurl. after you can able to download the png with background

My SVG Filter is running extremely slowly

I have the following SVG filter:
<svg style="visibility: hidden; height: 0; width: 0;">
<filter id="rgbShift">
<feOffset in="SourceGraphic" dx="1" dy="-1" result="text1" />
<feFlood flood-color="#FF0000" result="redColor" />
<feComposite in="redColor" in2="text1" operator="arithmetic" k1="1" result="red" />
<feOffset in="SourceGraphic" dx="-1" dy="2" result="text2" />
<feFlood flood-color="#00FF00" result="greenColor" />
<feComposite in="greenColor" in2="text2" operator="arithmetic" k1="1" result="green" />
<feOffset in="SourceGraphic" dx="-2" dy="1" result="text3" />
<feFlood flood-color="#0000FF" result="blueColor" />
<feComposite in="blueColor" in2="text3" operator="arithmetic" k1="1" result="blue" />
<feComposite in="red" in2="green" operator="lighter" result="rb" />
<feComposite in="rb" in2="blue" operator="lighter" />
</filter>
</svg>
This filter is applied to my menu screen in a game I am working on. I want to apply the same filter to the game itself, but it runs very slowly, probably because elements are almost constantly moving on the page. Is there a way to make my filter run faster?

While I have no formal results, testing it on a single jpg picture in Inkscape gives me the impression that the following filter is perceptably faster, while being mathematically identical AFAIK:
<filter id="rgbShift">
<feOffset in="SourceGraphic" dx="1" dy="-1" />
<feComponentTransfer result="red">
<feFuncG type="discrete" tableValues="0" />
<feFuncB type="discrete" tableValues="0" />
</feComponentTransfer>
<feOffset in="SourceGraphic" dx="-1" dy="2" />
<feComponentTransfer result="green">
<feFuncR type="discrete" tableValues="0" />
<feFuncB type="discrete" tableValues="0" />
</feComponentTransfer>
<feOffset in="SourceGraphic" dx="-2" dy="1" />
<feComponentTransfer result="blue">
<feFuncR type="discrete" tableValues="0" />
<feFuncG type="discrete" tableValues="0" />
</feComponentTransfer>
<feComposite in="red" in2="green" operator="arithmetic" k2="1" k3="1" result="rb" />
<feComposite in="rb" in2="blue" operator="arithmetic" k2="1" k3="1" />
</filter>
Whether that is enough, I don't know. The following measures might help avoiding time-critical operations (i. e. recomputing the filter for every frame):
Do not apply the filter to animated elements.
Do not apply the filter to elements so that their filter effects region (the bounding box of the filtered element plus, as default, 10% in every direction) overlaps the bounding box of animated elements. Whether they are above or below does not matter.

I do not know if it's the cause of your performance problems, but feComposite is a slow operation and you have many mistakes in your syntax.
In SVG 1.1 feComposite has no "lighter" operator. That was added in the Filters 1.0 spec and is not supported cross-browser yet. You may want to go with feComposite operator="arithmetic" k2="1" k3="1" which I believe is equivalent.
It's usually a better idea to use feBlend/multiply than feComposite/arithmetic, it seems to be much faster.
A corrected implementation of what I think you wanted with your original filter would be as follows:
<filter id="rgbShift">
<feOffset in="SourceGraphic" dx="1" dy="-1" result="text1" />
<feFlood flood-color="#FF0000" result="redColor" />
<feBlend in="text1" in2="redColor" mode="multiply" result="red"/>
<feOffset in="SourceGraphic" dx="-1" dy="2" result="text2" />
<feFlood flood-color="#00FF00" result="greenColor" />
<feBlend in="text2" in2="greenColor" mode="multiply" result="green"/>
<feOffset in="SourceGraphic" dx="-2" dy="1" result="text3" />
<feFlood flood-color="#0000FF" result="blueColor" />
<feBlend in="text3" in2="blueColor" mode="multiply" result="blue"/>
<feComposite in="red" in2="green" operator="arithmetic" k2="1" k3="1" result="rb" />
<feComposite in="rb" in2="blue" operator="arithmetic" k2="1" k3="1"/>
</filter>

How to prepare SVG code from Inkscape for Angular JS / Angular Material app directive template

I forked a CodePen app by the Angular Material Team and am trying to replace their user avatar icon with an icon I made in Inkscape.
This is their code, in an app directive template field:
<svg class="user-avatar" viewBox="0 0 128 128" height="64" width="64" pointer-events="none" display="block" > <path fill="#FF8A80" d="M0 0h128v128H0z"/> <path fill="#FFE0B2" d="M36.3 94.8c6.4 7.3 16.2 12.1 27.3 12.4 10.7-.3 20.3-4.7 26.7-11.6l.2.1c-17-13.3-12.9-23.4-8.5-28.6 1.3-1.2 2.8-2.5 4.4-3.9l13.1-11c1.5-1.2 2.6-3 2.9-5.1.6-4.4-2.5-8.4-6.9-9.1-1.5-.2-3 0-4.3.6-.3-1.3-.4-2.7-1.6-3.5-1.4-.9-2.8-1.7-4.2-2.5-7.1-3.9-14.9-6.6-23-7.9-5.4-.9-11-1.2-16.1.7-3.3 1.2-6.1 3.2-8.7 5.6-1.3 1.2-2.5 2.4-3.7 3.7l-1.8 1.9c-.3.3-.5.6-.8.8-.1.1-.2 0-.4.2.1.2.1.5.1.6-1-.3-2.1-.4-3.2-.2-4.4.6-7.5 4.7-6.9 9.1.3 2.1 1.3 3.8 2.8 5.1l11 9.3c1.8 1.5 3.3 3.8 4.6 5.7 1.5 2.3 2.8 4.9 3.5 7.6 1.7 6.8-.8 13.4-5.4 18.4-.5.6-1.1 1-1.4 1.7-.2.6-.4 1.3-.6 2-.4 1.5-.5 3.1-.3 4.6.4 3.1 1.8 6.1 4.1 8.2 3.3 3 8 4 12.4 4.5 5.2.6 10.5.7 15.7.2 4.5-.4 9.1-1.2 13-3.4 5.6-3.1 9.6-8.9 10.5-15.2M76.4 46c.9 0 1.6.7 1.6 1.6 0 .9-.7 1.6-1.6 1.6-.9 0-1.6-.7-1.6-1.6-.1-.9.7-1.6 1.6-1.6zm-25.7 0c.9 0 1.6.7 1.6 1.6 0 .9-.7 1.6-1.6 1.6-.9 0-1.6-.7-1.6-1.6-.1-.9.7-1.6 1.6-1.6z"/> <path fill="#E0F7FA" d="M105.3 106.1c-.9-1.3-1.3-1.9-1.3-1.9l-.2-.3c-.6-.9-1.2-1.7-1.9-2.4-3.2-3.5-7.3-5.4-11.4-5.7 0 0 .1 0 .1.1l-.2-.1c-6.4 6.9-16 11.3-26.7 11.6-11.2-.3-21.1-5.1-27.5-12.6-.1.2-.2.4-.2.5-3.1.9-6 2.7-8.4 5.4l-.2.2s-.5.6-1.5 1.7c-.9 1.1-2.2 2.6-3.7 4.5-3.1 3.9-7.2 9.5-11.7 16.6-.9 1.4-1.7 2.8-2.6 4.3h109.6c-3.4-7.1-6.5-12.8-8.9-16.9-1.5-2.2-2.6-3.8-3.3-5z"/> <circle fill="#444" cx="76.3" cy="47.5" r="2"/> <circle fill="#444" cx="50.7" cy="47.6" r="2"/> <path fill="#444" d="M48.1 27.4c4.5 5.9 15.5 12.1 42.4 8.4-2.2-6.9-6.8-12.6-12.6-16.4C95.1 20.9 92 10 92 10c-1.4 5.5-11.1 4.4-11.1 4.4H62.1c-1.7-.1-3.4 0-5.2.3-12.8 1.8-22.6 11.1-25.7 22.9 10.6-1.9 15.3-7.6 16.9-10.2z"/> </svg>
The code I see in Inkscape's XML editor or when opening the SVG file with Notepad++ is quite a bit different:
<svg
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="210mm"
height="297mm"
viewBox="0 0 744.09448819 1052.3622047"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="rb icon.svg">
<defs
id="defs4">
<linearGradient
id="linearGradient4179"
osb:paint="solid">
<stop
style="stop-color:#000000;stop-opacity:1;"
offset="0"
id="stop4181" />
</linearGradient>
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.6394886"
inkscape:cx="-607.16873"
inkscape:cy="903.12934"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
showborder="false"
showguides="false"
inkscape:window-width="1536"
inkscape:window-height="801"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<circle
style="fill:#009cf0;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
id="path3336"
cx="-602.85712"
cy="69.505058"
r="151.42857" />
<rect
style="fill:#ffffff;fill-opacity:1"
id="rect4158"
width="193.80003"
height="144.85301"
x="-699.19604"
y="24.652056" />
<rect
style="fill:#ffffff;fill-opacity:1"
id="rect4162"
width="155.71428"
height="155.71428"
x="373.2374"
y="322.82352"
transform="matrix(-0.70710678,0.70710678,-0.70710678,-0.70710678,0,0)" />
<rect
style="fill:#ffffff;fill-opacity:1"
id="rect4173"
width="19.512196"
height="71.951218"
x="-682.92682"
y="-47.637794"
ry="9.7560978" />
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#009cf0;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
x="-635.36584"
y="20.654888"
id="text4195"
sodipodi:linespacing="127%"><tspan
sodipodi:role="line"
id="tspan4197"
x="-635.36584"
y="20.654888"
style="line-height:127%;-inkscape-font-specification:'sans-serif, Normal';font-family:sans-serif;font-weight:normal;font-style:normal;font-stretch:normal;font-variant:normal;font-size:60px;text-anchor:start;text-align:start;writing-mode:lr;fill:#009cf0;fill-opacity:1">R</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#009cf0;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
x="-597.46344"
y="54.801228"
id="text4199"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan4201"
x="-597.46344"
y="54.801228"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:60px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#009cf0;fill-opacity:1">B</tspan></text>
<path
style="fill:#009cf0;fill-opacity:1;stroke:none;stroke-width:0.67507702;stroke-opacity:1"
d="m -505.412,36.002405 20.333,0 0,38.1298 -20.333,0 z"
id="rect4207"
inkscape:connector-curvature="0" />
<path
style="fill:#009cf0;fill-opacity:1;stroke:none;stroke-width:0.67507702;stroke-opacity:1"
d="m -719.52832,35.102183 20.337,0 0,38.1298 -20.337,0 z"
id="rect4207-6"
inkscape:connector-curvature="0" />
<rect
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-opacity:1;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none"
id="rect4307"
width="47.575813"
height="54.895168"
x="-626.08392"
y="115.31452" />
</g>
</svg>
and when I try replacing the default user avatar SVG with mine it breaks the website. The web console says
Uncaught SyntaxError: Invalid or unexpected token.
Here's the directive with the original SVG:
app.directive('userAvatar', function() {
return {
replace: true,
template: '<svg class="user-avatar" viewBox="0 0 128 128" height="64" width="64" pointer-events="none" display="block" > <path fill="#FF8A80" d="M0 0h128v128H0z"/> <path fill="#FFE0B2" d="M36.3 94.8c6.4 7.3 16.2 12.1 27.3 12.4 10.7-.3 20.3-4.7 26.7-11.6l.2.1c-17-13.3-12.9-23.4-8.5-28.6 1.3-1.2 2.8-2.5 4.4-3.9l13.1-11c1.5-1.2 2.6-3 2.9-5.1.6-4.4-2.5-8.4-6.9-9.1-1.5-.2-3 0-4.3.6-.3-1.3-.4-2.7-1.6-3.5-1.4-.9-2.8-1.7-4.2-2.5-7.1-3.9-14.9-6.6-23-7.9-5.4-.9-11-1.2-16.1.7-3.3 1.2-6.1 3.2-8.7 5.6-1.3 1.2-2.5 2.4-3.7 3.7l-1.8 1.9c-.3.3-.5.6-.8.8-.1.1-.2 0-.4.2.1.2.1.5.1.6-1-.3-2.1-.4-3.2-.2-4.4.6-7.5 4.7-6.9 9.1.3 2.1 1.3 3.8 2.8 5.1l11 9.3c1.8 1.5 3.3 3.8 4.6 5.7 1.5 2.3 2.8 4.9 3.5 7.6 1.7 6.8-.8 13.4-5.4 18.4-.5.6-1.1 1-1.4 1.7-.2.6-.4 1.3-.6 2-.4 1.5-.5 3.1-.3 4.6.4 3.1 1.8 6.1 4.1 8.2 3.3 3 8 4 12.4 4.5 5.2.6 10.5.7 15.7.2 4.5-.4 9.1-1.2 13-3.4 5.6-3.1 9.6-8.9 10.5-15.2M76.4 46c.9 0 1.6.7 1.6 1.6 0 .9-.7 1.6-1.6 1.6-.9 0-1.6-.7-1.6-1.6-.1-.9.7-1.6 1.6-1.6zm-25.7 0c.9 0 1.6.7 1.6 1.6 0 .9-.7 1.6-1.6 1.6-.9 0-1.6-.7-1.6-1.6-.1-.9.7-1.6 1.6-1.6z"/> <path fill="#E0F7FA" d="M105.3 106.1c-.9-1.3-1.3-1.9-1.3-1.9l-.2-.3c-.6-.9-1.2-1.7-1.9-2.4-3.2-3.5-7.3-5.4-11.4-5.7 0 0 .1 0 .1.1l-.2-.1c-6.4 6.9-16 11.3-26.7 11.6-11.2-.3-21.1-5.1-27.5-12.6-.1.2-.2.4-.2.5-3.1.9-6 2.7-8.4 5.4l-.2.2s-.5.6-1.5 1.7c-.9 1.1-2.2 2.6-3.7 4.5-3.1 3.9-7.2 9.5-11.7 16.6-.9 1.4-1.7 2.8-2.6 4.3h109.6c-3.4-7.1-6.5-12.8-8.9-16.9-1.5-2.2-2.6-3.8-3.3-5z"/> <circle fill="#444" cx="76.3" cy="47.5" r="2"/> <circle fill="#444" cx="50.7" cy="47.6" r="2"/> <path fill="#444" d="M48.1 27.4c4.5 5.9 15.5 12.1 42.4 8.4-2.2-6.9-6.8-12.6-12.6-16.4C95.1 20.9 92 10 92 10c-1.4 5.5-11.1 4.4-11.1 4.4H62.1c-1.7-.1-3.4 0-5.2.3-12.8 1.8-22.6 11.1-25.7 22.9 10.6-1.9 15.3-7.6 16.9-10.2z"/> </svg>'
};
});
I've tried a dozen variations on this, but using a 1-line style where I insert only class="user-avatar" into the new XML here is what the updated directive looks like:
app.directive('userAvatar', function() {
return {
replace: true,
//template: '<svg class="user-avatar" viewBox="0 0 128 128" height="64" width="64" pointer-events="none" display="block" > <path fill="#FF8A80" d="M0 0h128v128H0z"/> <path fill="#FFE0B2" d="M36.3 94.8c6.4 7.3 16.2 12.1 27.3 12.4 10.7-.3 20.3-4.7 26.7-11.6l.2.1c-17-13.3-12.9-23.4-8.5-28.6 1.3-1.2 2.8-2.5 4.4-3.9l13.1-11c1.5-1.2 2.6-3 2.9-5.1.6-4.4-2.5-8.4-6.9-9.1-1.5-.2-3 0-4.3.6-.3-1.3-.4-2.7-1.6-3.5-1.4-.9-2.8-1.7-4.2-2.5-7.1-3.9-14.9-6.6-23-7.9-5.4-.9-11-1.2-16.1.7-3.3 1.2-6.1 3.2-8.7 5.6-1.3 1.2-2.5 2.4-3.7 3.7l-1.8 1.9c-.3.3-.5.6-.8.8-.1.1-.2 0-.4.2.1.2.1.5.1.6-1-.3-2.1-.4-3.2-.2-4.4.6-7.5 4.7-6.9 9.1.3 2.1 1.3 3.8 2.8 5.1l11 9.3c1.8 1.5 3.3 3.8 4.6 5.7 1.5 2.3 2.8 4.9 3.5 7.6 1.7 6.8-.8 13.4-5.4 18.4-.5.6-1.1 1-1.4 1.7-.2.6-.4 1.3-.6 2-.4 1.5-.5 3.1-.3 4.6.4 3.1 1.8 6.1 4.1 8.2 3.3 3 8 4 12.4 4.5 5.2.6 10.5.7 15.7.2 4.5-.4 9.1-1.2 13-3.4 5.6-3.1 9.6-8.9 10.5-15.2M76.4 46c.9 0 1.6.7 1.6 1.6 0 .9-.7 1.6-1.6 1.6-.9 0-1.6-.7-1.6-1.6-.1-.9.7-1.6 1.6-1.6zm-25.7 0c.9 0 1.6.7 1.6 1.6 0 .9-.7 1.6-1.6 1.6-.9 0-1.6-.7-1.6-1.6-.1-.9.7-1.6 1.6-1.6z"/> <path fill="#E0F7FA" d="M105.3 106.1c-.9-1.3-1.3-1.9-1.3-1.9l-.2-.3c-.6-.9-1.2-1.7-1.9-2.4-3.2-3.5-7.3-5.4-11.4-5.7 0 0 .1 0 .1.1l-.2-.1c-6.4 6.9-16 11.3-26.7 11.6-11.2-.3-21.1-5.1-27.5-12.6-.1.2-.2.4-.2.5-3.1.9-6 2.7-8.4 5.4l-.2.2s-.5.6-1.5 1.7c-.9 1.1-2.2 2.6-3.7 4.5-3.1 3.9-7.2 9.5-11.7 16.6-.9 1.4-1.7 2.8-2.6 4.3h109.6c-3.4-7.1-6.5-12.8-8.9-16.9-1.5-2.2-2.6-3.8-3.3-5z"/> <circle fill="#444" cx="76.3" cy="47.5" r="2"/> <circle fill="#444" cx="50.7" cy="47.6" r="2"/> <path fill="#444" d="M48.1 27.4c4.5 5.9 15.5 12.1 42.4 8.4-2.2-6.9-6.8-12.6-12.6-16.4C95.1 20.9 92 10 92 10c-1.4 5.5-11.1 4.4-11.1 4.4H62.1c-1.7-.1-3.4 0-5.2.3-12.8 1.8-22.6 11.1-25.7 22.9 10.6-1.9 15.3-7.6 16.9-10.2z"/> </svg>'
template: '<svg class="user-avatar" xmlns:osb="http://www.openswatchbook.org/uri/2009/osb" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="210mm" height="297mm" viewBox="0 0 744.09448819 1052.3622047" id="svg2" version="1.1" inkscape:version="0.91 r13725" sodipodi:docname="rb icon.svg"> <defs id="defs4"> <linearGradient id="linearGradient4179" osb:paint="solid"> <stop style="stop-color:#000000;stop-opacity:1;" offset="0" id="stop4181" /> </linearGradient> </defs> <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="1.6394886" inkscape:cx="-607.16873" inkscape:cy="903.12934" inkscape:document-units="px" inkscape:current-layer="layer1" showgrid="false" showborder="false" showguides="false" inkscape:window-width="1536" inkscape:window-height="801" inkscape:window-x="-8" inkscape:window-y="-8" inkscape:window-maximized="1" /> <metadata id="metadata7"> <rdf:RDF> <cc:Work rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> <dc:title></dc:title> </cc:Work> </rdf:RDF> </metadata> <g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1"> <circle style="fill:#009cf0;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1" id="path3336" cx="-602.85712" cy="69.505058" r="151.42857" /> <rect style="fill:#ffffff;fill-opacity:1" id="rect4158" width="193.80003" height="144.85301" x="-699.19604" y="24.652056" /> <rect style="fill:#ffffff;fill-opacity:1" id="rect4162" width="155.71428" height="155.71428" x="373.2374" y="322.82352" transform="matrix(-0.70710678,0.70710678,-0.70710678,-0.70710678,0,0)" /> <rect style="fill:#ffffff;fill-opacity:1" id="rect4173" width="19.512196" height="71.951218" x="-682.92682" y="-47.637794" ry="9.7560978" /> <text xml:space="preserve" style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#009cf0;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;" x="-635.36584" y="20.654888" id="text4195" sodipodi:linespacing="127%"><tspan sodipodi:role="line" id="tspan4197" x="-635.36584" y="20.654888" style="line-height:127%;-inkscape-font-specification:'sans-serif, Normal';font-family:sans-serif;font-weight:normal;font-style:normal;font-stretch:normal;font-variant:normal;font-size:60px;text-anchor:start;text-align:start;writing-mode:lr;fill:#009cf0;fill-opacity:1">R</tspan></text> <text xml:space="preserve" style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#009cf0;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" x="-597.46344" y="54.801228" id="text4199" sodipodi:linespacing="125%"><tspan sodipodi:role="line" id="tspan4201" x="-597.46344" y="54.801228" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:60px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#009cf0;fill-opacity:1">B</tspan></text> <path style="fill:#009cf0;fill-opacity:1;stroke:none;stroke-width:0.67507702;stroke-opacity:1" d="m -505.412,36.002405 20.333,0 0,38.1298 -20.333,0 z" id="rect4207" inkscape:connector-curvature="0" /> <path style="fill:#009cf0;fill-opacity:1;stroke:none;stroke-width:0.67507702;stroke-opacity:1" d="m -719.52832,35.102183 20.337,0 0,38.1298 -20.337,0 z" id="rect4207-6" inkscape:connector-curvature="0" /> <rect style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-opacity:1;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none" id="rect4307" width="47.575813" height="54.895168" x="-626.08392" y="115.31452" /> </g> </svg>'
};
});
You can reproduce the error by replacing the original directive with the one above in the CodePen app.
Original: https://codepen.io/team/AngularMaterial/pen/mVxgbg
Broken: https://codepen.io/hack-r/pen/LRdVPN

It is tipical " ,' problem You have ' inside Your string representing svg, change all ' to " and it will work. First of them in svg is 'sans-serif, Normal'.
Your code breaks because string starts on ' and ends on first ' which is inside svg string so next part of code has error syntax.

Webkit Backdrop Filter with JavaScript cross-browser

I have seen this amazing demo of the new
-webkit-backdrop-filter: blur(Xpx);
and I would like to ask how to reproduce this with JavaScript that at least works in Chrome but possibly in Firefox too?
The Demo:
https://webkit.org/demos/backdrop-filter/

You could try svg filters:
http://codepen.io/MakiBM/pen/YGEgQK?editors=1000
<svg x="0px" y="0px" width="500px" height="500px" viewbox="0 0 500 500">
<defs>
<filter id="blur" x="0%" y="0%" height="100%" width="100%" primitiveUnits="userSpaceOnUse">
<feGaussianBlur x="50" y="50" width="400" height="400" stdDeviation="10" in="SourceGraphic" result="blurImg"/>
<feComponentTransfer in="blurImg" result="opaqueBlur">
<feFuncA type="linear" intercept="1"/>
</feComponentTransfer>
<feBlend mode="normal" in="opaqueBlur" in2="SourceGraphic"/>
</filter>
</defs>
<image filter="url(#blur)" x="10" y="10" id="svg-image" width="100%" height="100%" xlink:href="https://www.nycgovparks.org/photo_gallery/full_size/14413.jpg" />
<rect x="50" y="50" height="400" width="400" fill="rgb(255,255,255)" fill-opacity="0.2" />
</svg>
I haven't go round with crossbrowser check but support is very wide:
http://caniuse.com/svg-filters

Categories

Resources