Convert path svg animation to pure css animation

Convert path svg animation to pure css animation - animation

Is it possible to convert this path animation to a pure css animation ?
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewPort="0 0 595.28 841.89">
<g>
<path id="thread" transform="translate(242, 130)" fill="none" stroke="#fff" d="M 302 540 l 1 -150">
<animate attributeType="XML" attributeName="d" values="M-108 -30 c0 10 -10 90 0 106;
M-108 -30 c0 10 3 90 0 106;
M-108 -30 c0 10 10 90 0 106;
M-108 -30 c0 10 -3 90 0 106;
M-108 -30 c0 10 -10 90 0 106" keyTimes="0; 0.25; 0.5; 0.75; 1" dur="5s" repeatCount="indefinite" />
</path>
</g>
</svg>

Related

SVG animation on Safari runs with low fps

This SVG runs smoothly on Chrome/Edge and FireFox but not on Safari (Mac).
As you can see, the SVG contains animateMotion tags with path composed of big numbers.
The SVG is composed of 58 circles due to snippet limitation. The original code containes 200 objects. Here's the original: https://jsfiddle.net/__fadi/c3jd71ae/
How bad is Safari in calculating big numbers (with big fractional part)? What can I do to improve performance on Safari?
<!DOCTYPE html>
<html>
<body>
<svg height="1500" width="4000">
<g transform="translate(100.000100010001,100.000100010001) scale(0.001000000100010001 0.001000000100010001)">
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 0000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 100000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 1000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 110000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 2000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 120000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 3000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 130000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 4000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 140000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 5000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 150000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 6000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 160000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 7000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 170000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 8000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 180000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 9000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 190000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 10000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1100000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 11000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1110000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 12000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1120000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 13000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1130000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 14000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1140000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 15000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1150000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 16000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1160000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 17000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1170000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 18000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1180000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 19000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1190000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 20000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1200000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 21000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1210000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 22000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1220000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 23000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1230000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 24000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1240000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 25000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1250000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 26000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1260000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 27000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1270000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 28000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1280000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 29000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1290000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 30000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1300000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 31000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1310000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 32000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1320000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 33000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1330000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 34000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1340000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 35000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1350000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 36000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1360000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 37000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1370000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 38000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1380000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 39000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1390000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 40000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1400000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 41000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1410000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 42000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1420000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 43000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1430000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 44000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1440000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 45000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1450000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 46000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1460000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 47000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1470000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 48000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1480000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 49000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1490000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 50000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1500000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 51000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1510000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 52000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1520000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 53000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1530000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 54000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1540000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 55000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1550000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 56000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1560000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 57000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1570000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 58000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1580000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
</g>
</svg>
</body>
</html>
Update (in case someone else run into the same issue):
I managed to spot the culprit; it wasn't using large numbers with decimal point, it was the scale transform="scale(x,y)" in the group element.
Apparently when x and/or y are small (could be the case for big numbers as well, I didn't check) numbers far from 1, Safari (v15.3 in my case) struggles in calculations.

How bad is Safari in calculating big numbers (with big fractional
part)? What can I do to improve performance on Safari?
Avoid unnecessarily large numbers and reduce floating point precision if possible.
Large numbers can significantly increase the amount of time to parse all svg data before rendering
... since they increase the total filesize (when saved as static files or appended as inlined markup to your HTML body)
Animations usually benefit from integer coordinates
Invalid Commands:
Avoid incomplete commands like the Q command in your motion path's
M 1000 0 Q 100000 100000 110000 200000 Q 200000 300000
should rather be (Q expects four coordinates)
M 1000 0 Q 100000 100000 110000 200000
Shared/repeating styles can also be minified by <g> group attributes (like fill="#00a2e8").
Fixed example: scaled down and rounded to integers
(Inspect your console to get the optimised code)
let circleCount = 200;
let svgMarkup =
`<svg viewBox="0 0 1500 400" xmlns="http://www.w3.org/2000/svg">
<g opacity="1" transform="translate(100,100)" fill="#00a2e8" data-z-index="1">`;
for (let i = 0; i < circleCount; i++) {
svgMarkup +=
`<circle id="c${i}" r="9.9"/><animateMotion href="#c${i}" path="M${i} 0Q100 100 ${100 +i*10} 200" dur="1s" repeatCount="indefinite"/>`;
}
svgMarkup += `</g></svg>`;
document.body.insertAdjacentHTML('beforeend', svgMarkup);
console.log(svgMarkup);
Static example – generated by js (~24 KB)
<svg viewBox="0 0 1500 400" xmlns="http://www.w3.org/2000/svg">
<g opacity="1" transform="translate(100,100)" fill="#00a2e8" data-z-index="1"><circle id="c0" r="9.9"/><animateMotion href="#c0" path="M0 0Q100 100 100 200" dur="1s" repeatCount="indefinite"/><circle id="c1" r="9.9"/><animateMotion href="#c1" path="M1 0Q100 100 110 200" dur="1s" repeatCount="indefinite"/><circle id="c2" r="9.9"/><animateMotion href="#c2" path="M2 0Q100 100 120 200" dur="1s" repeatCount="indefinite"/><circle id="c3" r="9.9"/><animateMotion href="#c3" path="M3 0Q100 100 130 200" dur="1s" repeatCount="indefinite"/><circle id="c4" r="9.9"/><animateMotion href="#c4" path="M4 0Q100 100 140 200" dur="1s" repeatCount="indefinite"/><circle id="c5" r="9.9"/><animateMotion href="#c5" path="M5 0Q100 100 150 200" dur="1s" repeatCount="indefinite"/><circle id="c6" r="9.9"/><animateMotion href="#c6" path="M6 0Q100 100 160 200" dur="1s" repeatCount="indefinite"/><circle id="c7" r="9.9"/><animateMotion href="#c7" path="M7 0Q100 100 170 200" dur="1s" repeatCount="indefinite"/><circle id="c8" r="9.9"/><animateMotion href="#c8" path="M8 0Q100 100 180 200" dur="1s" repeatCount="indefinite"/><circle id="c9" r="9.9"/><animateMotion href="#c9" path="M9 0Q100 100 190 200" dur="1s" repeatCount="indefinite"/><circle id="c10" r="9.9"/><animateMotion href="#c10" path="M10 0Q100 100 200 200" dur="1s" repeatCount="indefinite"/><circle id="c11" r="9.9"/><animateMotion href="#c11" path="M11 0Q100 100 210 200" dur="1s" repeatCount="indefinite"/><circle id="c12" r="9.9"/><animateMotion href="#c12" path="M12 0Q100 100 220 200" dur="1s" repeatCount="indefinite"/><circle id="c13" r="9.9"/><animateMotion href="#c13" path="M13 0Q100 100 230 200" dur="1s" repeatCount="indefinite"/><circle id="c14" r="9.9"/><animateMotion href="#c14" path="M14 0Q100 100 240 200" dur="1s" repeatCount="indefinite"/><circle id="c15" r="9.9"/><animateMotion href="#c15" path="M15 0Q100 100 250 200" dur="1s" repeatCount="indefinite"/><circle id="c16" r="9.9"/><animateMotion href="#c16" path="M16 0Q100 100 260 200" dur="1s" repeatCount="indefinite"/><circle id="c17" r="9.9"/><animateMotion href="#c17" path="M17 0Q100 100 270 200" dur="1s" repeatCount="indefinite"/><circle id="c18" r="9.9"/><animateMotion href="#c18" path="M18 0Q100 100 280 200" dur="1s" repeatCount="indefinite"/><circle id="c19" r="9.9"/><animateMotion href="#c19" path="M19 0Q100 100 290 200" dur="1s" repeatCount="indefinite"/><circle id="c20" r="9.9"/><animateMotion href="#c20" path="M20 0Q100 100 300 200" dur="1s" repeatCount="indefinite"/><circle id="c21" r="9.9"/><animateMotion href="#c21" path="M21 0Q100 100 310 200" dur="1s" repeatCount="indefinite"/><circle id="c22" r="9.9"/><animateMotion href="#c22" path="M22 0Q100 100 320 200" dur="1s" repeatCount="indefinite"/><circle id="c23" r="9.9"/><animateMotion href="#c23" path="M23 0Q100 100 330 200" dur="1s" repeatCount="indefinite"/><circle id="c24" r="9.9"/><animateMotion href="#c24" path="M24 0Q100 100 340 200" dur="1s" repeatCount="indefinite"/><circle id="c25" r="9.9"/><animateMotion href="#c25" path="M25 0Q100 100 350 200" dur="1s" repeatCount="indefinite"/><circle id="c26" r="9.9"/><animateMotion href="#c26" path="M26 0Q100 100 360 200" dur="1s" repeatCount="indefinite"/><circle id="c27" r="9.9"/><animateMotion href="#c27" path="M27 0Q100 100 370 200" dur="1s" repeatCount="indefinite"/><circle id="c28" r="9.9"/><animateMotion href="#c28" path="M28 0Q100 100 380 200" dur="1s" repeatCount="indefinite"/><circle id="c29" r="9.9"/><animateMotion href="#c29" path="M29 0Q100 100 390 200" dur="1s" repeatCount="indefinite"/><circle id="c30" r="9.9"/><animateMotion href="#c30" path="M30 0Q100 100 400 200" dur="1s" repeatCount="indefinite"/><circle id="c31" r="9.9"/><animateMotion href="#c31" path="M31 0Q100 100 410 200" dur="1s" repeatCount="indefinite"/><circle id="c32" r="9.9"/><animateMotion href="#c32" path="M32 0Q100 100 420 200" dur="1s" repeatCount="indefinite"/><circle id="c33" r="9.9"/><animateMotion href="#c33" path="M33 0Q100 100 430 200" dur="1s" repeatCount="indefinite"/><circle id="c34" r="9.9"/><animateMotion href="#c34" path="M34 0Q100 100 440 200" dur="1s" repeatCount="indefinite"/><circle id="c35" r="9.9"/><animateMotion href="#c35" path="M35 0Q100 100 450 200" dur="1s" repeatCount="indefinite"/><circle id="c36" r="9.9"/><animateMotion href="#c36" path="M36 0Q100 100 460 200" dur="1s" repeatCount="indefinite"/><circle id="c37" r="9.9"/><animateMotion href="#c37" path="M37 0Q100 100 470 200" dur="1s" repeatCount="indefinite"/><circle id="c38" r="9.9"/><animateMotion href="#c38" path="M38 0Q100 100 480 200" dur="1s" repeatCount="indefinite"/><circle id="c39" r="9.9"/><animateMotion href="#c39" path="M39 0Q100 100 490 200" dur="1s" repeatCount="indefinite"/><circle id="c40" r="9.9"/><animateMotion href="#c40" path="M40 0Q100 100 500 200" dur="1s" repeatCount="indefinite"/><circle id="c41" r="9.9"/><animateMotion href="#c41" path="M41 0Q100 100 510 200" dur="1s" repeatCount="indefinite"/><circle id="c42" r="9.9"/><animateMotion href="#c42" path="M42 0Q100 100 520 200" dur="1s" repeatCount="indefinite"/><circle id="c43" r="9.9"/><animateMotion href="#c43" path="M43 0Q100 100 530 200" dur="1s" repeatCount="indefinite"/><circle id="c44" r="9.9"/><animateMotion href="#c44" path="M44 0Q100 100 540 200" dur="1s" repeatCount="indefinite"/><circle id="c45" r="9.9"/><animateMotion href="#c45" path="M45 0Q100 100 550 200" dur="1s" repeatCount="indefinite"/><circle id="c46" r="9.9"/><animateMotion href="#c46" path="M46 0Q100 100 560 200" dur="1s" repeatCount="indefinite"/><circle id="c47" r="9.9"/><animateMotion href="#c47" path="M47 0Q100 100 570 200" dur="1s" repeatCount="indefinite"/><circle id="c48" r="9.9"/><animateMotion href="#c48" path="M48 0Q100 100 580 200" dur="1s" repeatCount="indefinite"/><circle id="c49" r="9.9"/><animateMotion href="#c49" path="M49 0Q100 100 590 200" dur="1s" repeatCount="indefinite"/><circle id="c50" r="9.9"/><animateMotion href="#c50" path="M50 0Q100 100 600 200" dur="1s" repeatCount="indefinite"/><circle id="c51" r="9.9"/><animateMotion href="#c51" path="M51 0Q100 100 610 200" dur="1s" repeatCount="indefinite"/><circle id="c52" r="9.9"/><animateMotion href="#c52" path="M52 0Q100 100 620 200" dur="1s" repeatCount="indefinite"/><circle id="c53" r="9.9"/><animateMotion href="#c53" path="M53 0Q100 100 630 200" dur="1s" repeatCount="indefinite"/><circle id="c54" r="9.9"/><animateMotion href="#c54" path="M54 0Q100 100 640 200" dur="1s" repeatCount="indefinite"/><circle id="c55" r="9.9"/><animateMotion href="#c55" path="M55 0Q100 100 650 200" dur="1s" repeatCount="indefinite"/><circle id="c56" r="9.9"/><animateMotion href="#c56" path="M56 0Q100 100 660 200" dur="1s" repeatCount="indefinite"/><circle id="c57" r="9.9"/><animateMotion href="#c57" path="M57 0Q100 100 670 200" dur="1s" repeatCount="indefinite"/><circle id="c58" r="9.9"/><animateMotion href="#c58" path="M58 0Q100 100 680 200" dur="1s" repeatCount="indefinite"/><circle id="c59" r="9.9"/><animateMotion href="#c59" path="M59 0Q100 100 690 200" dur="1s" repeatCount="indefinite"/><circle id="c60" r="9.9"/><animateMotion href="#c60" path="M60 0Q100 100 700 200" dur="1s" repeatCount="indefinite"/><circle id="c61" r="9.9"/><animateMotion href="#c61" path="M61 0Q100 100 710 200" dur="1s" repeatCount="indefinite"/><circle id="c62" r="9.9"/><animateMotion href="#c62" path="M62 0Q100 100 720 200" dur="1s" repeatCount="indefinite"/><circle id="c63" r="9.9"/><animateMotion href="#c63" path="M63 0Q100 100 730 200" dur="1s" repeatCount="indefinite"/><circle id="c64" r="9.9"/><animateMotion href="#c64" path="M64 0Q100 100 740 200" dur="1s" repeatCount="indefinite"/><circle id="c65" r="9.9"/><animateMotion href="#c65" path="M65 0Q100 100 750 200" dur="1s" repeatCount="indefinite"/><circle id="c66" r="9.9"/><animateMotion href="#c66" path="M66 0Q100 100 760 200" dur="1s" repeatCount="indefinite"/><circle id="c67" r="9.9"/><animateMotion href="#c67" path="M67 0Q100 100 770 200" dur="1s" repeatCount="indefinite"/><circle id="c68" r="9.9"/><animateMotion href="#c68" path="M68 0Q100 100 780 200" dur="1s" repeatCount="indefinite"/><circle id="c69" r="9.9"/><animateMotion href="#c69" path="M69 0Q100 100 790 200" dur="1s" repeatCount="indefinite"/><circle id="c70" r="9.9"/><animateMotion href="#c70" path="M70 0Q100 100 800 200" dur="1s" repeatCount="indefinite"/><circle id="c71" r="9.9"/><animateMotion href="#c71" path="M71 0Q100 100 810 200" dur="1s" repeatCount="indefinite"/><circle id="c72" r="9.9"/><animateMotion href="#c72" path="M72 0Q100 100 820 200" dur="1s" repeatCount="indefinite"/><circle id="c73" r="9.9"/><animateMotion href="#c73" path="M73 0Q100 100 830 200" dur="1s" repeatCount="indefinite"/><circle id="c74" r="9.9"/><animateMotion href="#c74" path="M74 0Q100 100 840 200" dur="1s" repeatCount="indefinite"/><circle id="c75" r="9.9"/><animateMotion href="#c75" path="M75 0Q100 100 850 200" dur="1s" repeatCount="indefinite"/><circle id="c76" r="9.9"/><animateMotion href="#c76" path="M76 0Q100 100 860 200" dur="1s" repeatCount="indefinite"/><circle id="c77" r="9.9"/><animateMotion href="#c77" path="M77 0Q100 100 870 200" dur="1s" repeatCount="indefinite"/><circle id="c78" r="9.9"/><animateMotion href="#c78" path="M78 0Q100 100 880 200" dur="1s" repeatCount="indefinite"/><circle id="c79" r="9.9"/><animateMotion href="#c79" path="M79 0Q100 100 890 200" dur="1s" repeatCount="indefinite"/><circle id="c80" r="9.9"/><animateMotion href="#c80" path="M80 0Q100 100 900 200" dur="1s" repeatCount="indefinite"/><circle id="c81" r="9.9"/><animateMotion href="#c81" path="M81 0Q100 100 910 200" dur="1s" repeatCount="indefinite"/><circle id="c82" r="9.9"/><animateMotion href="#c82" path="M82 0Q100 100 920 200" dur="1s" repeatCount="indefinite"/><circle id="c83" r="9.9"/><animateMotion href="#c83" path="M83 0Q100 100 930 200" dur="1s" repeatCount="indefinite"/><circle id="c84" r="9.9"/><animateMotion href="#c84" path="M84 0Q100 100 940 200" dur="1s" repeatCount="indefinite"/><circle id="c85" r="9.9"/><animateMotion href="#c85" path="M85 0Q100 100 950 200" dur="1s" repeatCount="indefinite"/><circle id="c86" r="9.9"/><animateMotion href="#c86" path="M86 0Q100 100 960 200" dur="1s" repeatCount="indefinite"/><circle id="c87" r="9.9"/><animateMotion href="#c87" path="M87 0Q100 100 970 200" dur="1s" repeatCount="indefinite"/><circle id="c88" r="9.9"/><animateMotion href="#c88" path="M88 0Q100 100 980 200" dur="1s" repeatCount="indefinite"/><circle id="c89" r="9.9"/><animateMotion href="#c89" path="M89 0Q100 100 990 200" dur="1s" repeatCount="indefinite"/><circle id="c90" r="9.9"/><animateMotion href="#c90" path="M90 0Q100 100 1000 200" dur="1s" repeatCount="indefinite"/><circle id="c91" r="9.9"/><animateMotion href="#c91" path="M91 0Q100 100 1010 200" dur="1s" repeatCount="indefinite"/><circle id="c92" r="9.9"/><animateMotion href="#c92" path="M92 0Q100 100 1020 200" dur="1s" repeatCount="indefinite"/><circle id="c93" r="9.9"/><animateMotion href="#c93" path="M93 0Q100 100 1030 200" dur="1s" repeatCount="indefinite"/><circle id="c94" r="9.9"/><animateMotion href="#c94" path="M94 0Q100 100 1040 200" dur="1s" repeatCount="indefinite"/><circle id="c95" r="9.9"/><animateMotion href="#c95" path="M95 0Q100 100 1050 200" dur="1s" repeatCount="indefinite"/><circle id="c96" r="9.9"/><animateMotion href="#c96" path="M96 0Q100 100 1060 200" dur="1s" repeatCount="indefinite"/><circle id="c97" r="9.9"/><animateMotion href="#c97" path="M97 0Q100 100 1070 200" dur="1s" repeatCount="indefinite"/><circle id="c98" r="9.9"/><animateMotion href="#c98" path="M98 0Q100 100 1080 200" dur="1s" repeatCount="indefinite"/><circle id="c99" r="9.9"/><animateMotion href="#c99" path="M99 0Q100 100 1090 200" dur="1s" repeatCount="indefinite"/><circle id="c100" r="9.9"/><animateMotion href="#c100" path="M100 0Q100 100 1100 200" dur="1s" repeatCount="indefinite"/><circle id="c101" r="9.9"/><animateMotion href="#c101" path="M101 0Q100 100 1110 200" dur="1s" repeatCount="indefinite"/><circle id="c102" r="9.9"/><animateMotion href="#c102" path="M102 0Q100 100 1120 200" dur="1s" repeatCount="indefinite"/><circle id="c103" r="9.9"/><animateMotion href="#c103" path="M103 0Q100 100 1130 200" dur="1s" repeatCount="indefinite"/><circle id="c104" r="9.9"/><animateMotion href="#c104" path="M104 0Q100 100 1140 200" dur="1s" repeatCount="indefinite"/><circle id="c105" r="9.9"/><animateMotion href="#c105" path="M105 0Q100 100 1150 200" dur="1s" repeatCount="indefinite"/><circle id="c106" r="9.9"/><animateMotion href="#c106" path="M106 0Q100 100 1160 200" dur="1s" repeatCount="indefinite"/><circle id="c107" r="9.9"/><animateMotion href="#c107" path="M107 0Q100 100 1170 200" dur="1s" repeatCount="indefinite"/><circle id="c108" r="9.9"/><animateMotion href="#c108" path="M108 0Q100 100 1180 200" dur="1s" repeatCount="indefinite"/><circle id="c109" r="9.9"/><animateMotion href="#c109" path="M109 0Q100 100 1190 200" dur="1s" repeatCount="indefinite"/><circle id="c110" r="9.9"/><animateMotion href="#c110" path="M110 0Q100 100 1200 200" dur="1s" repeatCount="indefinite"/><circle id="c111" r="9.9"/><animateMotion href="#c111" path="M111 0Q100 100 1210 200" dur="1s" repeatCount="indefinite"/><circle id="c112" r="9.9"/><animateMotion href="#c112" path="M112 0Q100 100 1220 200" dur="1s" repeatCount="indefinite"/><circle id="c113" r="9.9"/><animateMotion href="#c113" path="M113 0Q100 100 1230 200" dur="1s" repeatCount="indefinite"/><circle id="c114" r="9.9"/><animateMotion href="#c114" path="M114 0Q100 100 1240 200" dur="1s" repeatCount="indefinite"/><circle id="c115" r="9.9"/><animateMotion href="#c115" path="M115 0Q100 100 1250 200" dur="1s" repeatCount="indefinite"/><circle id="c116" r="9.9"/><animateMotion href="#c116" path="M116 0Q100 100 1260 200" dur="1s" repeatCount="indefinite"/><circle id="c117" r="9.9"/><animateMotion href="#c117" path="M117 0Q100 100 1270 200" dur="1s" repeatCount="indefinite"/><circle id="c118" r="9.9"/><animateMotion href="#c118" path="M118 0Q100 100 1280 200" dur="1s" repeatCount="indefinite"/><circle id="c119" r="9.9"/><animateMotion href="#c119" path="M119 0Q100 100 1290 200" dur="1s" repeatCount="indefinite"/><circle id="c120" r="9.9"/><animateMotion href="#c120" path="M120 0Q100 100 1300 200" dur="1s" repeatCount="indefinite"/><circle id="c121" r="9.9"/><animateMotion href="#c121" path="M121 0Q100 100 1310 200" dur="1s" repeatCount="indefinite"/><circle id="c122" r="9.9"/><animateMotion href="#c122" path="M122 0Q100 100 1320 200" dur="1s" repeatCount="indefinite"/><circle id="c123" r="9.9"/><animateMotion href="#c123" path="M123 0Q100 100 1330 200" dur="1s" repeatCount="indefinite"/><circle id="c124" r="9.9"/><animateMotion href="#c124" path="M124 0Q100 100 1340 200" dur="1s" repeatCount="indefinite"/><circle id="c125" r="9.9"/><animateMotion href="#c125" path="M125 0Q100 100 1350 200" dur="1s" repeatCount="indefinite"/><circle id="c126" r="9.9"/><animateMotion href="#c126" path="M126 0Q100 100 1360 200" dur="1s" repeatCount="indefinite"/><circle id="c127" r="9.9"/><animateMotion href="#c127" path="M127 0Q100 100 1370 200" dur="1s" repeatCount="indefinite"/><circle id="c128" r="9.9"/><animateMotion href="#c128" path="M128 0Q100 100 1380 200" dur="1s" repeatCount="indefinite"/><circle id="c129" r="9.9"/><animateMotion href="#c129" path="M129 0Q100 100 1390 200" dur="1s" repeatCount="indefinite"/><circle id="c130" r="9.9"/><animateMotion href="#c130" path="M130 0Q100 100 1400 200" dur="1s" repeatCount="indefinite"/><circle id="c131" r="9.9"/><animateMotion href="#c131" path="M131 0Q100 100 1410 200" dur="1s" repeatCount="indefinite"/><circle id="c132" r="9.9"/><animateMotion href="#c132" path="M132 0Q100 100 1420 200" dur="1s" repeatCount="indefinite"/><circle id="c133" r="9.9"/><animateMotion href="#c133" path="M133 0Q100 100 1430 200" dur="1s" repeatCount="indefinite"/><circle id="c134" r="9.9"/><animateMotion href="#c134" path="M134 0Q100 100 1440 200" dur="1s" repeatCount="indefinite"/><circle id="c135" r="9.9"/><animateMotion href="#c135" path="M135 0Q100 100 1450 200" dur="1s" repeatCount="indefinite"/><circle id="c136" r="9.9"/><animateMotion href="#c136" path="M136 0Q100 100 1460 200" dur="1s" repeatCount="indefinite"/><circle id="c137" r="9.9"/><animateMotion href="#c137" path="M137 0Q100 100 1470 200" dur="1s" repeatCount="indefinite"/><circle id="c138" r="9.9"/><animateMotion href="#c138" path="M138 0Q100 100 1480 200" dur="1s" repeatCount="indefinite"/><circle id="c139" r="9.9"/><animateMotion href="#c139" path="M139 0Q100 100 1490 200" dur="1s" repeatCount="indefinite"/><circle id="c140" r="9.9"/><animateMotion href="#c140" path="M140 0Q100 100 1500 200" dur="1s" repeatCount="indefinite"/><circle id="c141" r="9.9"/><animateMotion href="#c141" path="M141 0Q100 100 1510 200" dur="1s" repeatCount="indefinite"/><circle id="c142" r="9.9"/><animateMotion href="#c142" path="M142 0Q100 100 1520 200" dur="1s" repeatCount="indefinite"/><circle id="c143" r="9.9"/><animateMotion href="#c143" path="M143 0Q100 100 1530 200" dur="1s" repeatCount="indefinite"/><circle id="c144" r="9.9"/><animateMotion href="#c144" path="M144 0Q100 100 1540 200" dur="1s" repeatCount="indefinite"/><circle id="c145" r="9.9"/><animateMotion href="#c145" path="M145 0Q100 100 1550 200" dur="1s" repeatCount="indefinite"/><circle id="c146" r="9.9"/><animateMotion href="#c146" path="M146 0Q100 100 1560 200" dur="1s" repeatCount="indefinite"/><circle id="c147" r="9.9"/><animateMotion href="#c147" path="M147 0Q100 100 1570 200" dur="1s" repeatCount="indefinite"/><circle id="c148" r="9.9"/><animateMotion href="#c148" path="M148 0Q100 100 1580 200" dur="1s" repeatCount="indefinite"/><circle id="c149" r="9.9"/><animateMotion href="#c149" path="M149 0Q100 100 1590 200" dur="1s" repeatCount="indefinite"/><circle id="c150" r="9.9"/><animateMotion href="#c150" path="M150 0Q100 100 1600 200" dur="1s" repeatCount="indefinite"/><circle id="c151" r="9.9"/><animateMotion href="#c151" path="M151 0Q100 100 1610 200" dur="1s" repeatCount="indefinite"/><circle id="c152" r="9.9"/><animateMotion href="#c152" path="M152 0Q100 100 1620 200" dur="1s" repeatCount="indefinite"/><circle id="c153" r="9.9"/><animateMotion href="#c153" path="M153 0Q100 100 1630 200" dur="1s" repeatCount="indefinite"/><circle id="c154" r="9.9"/><animateMotion href="#c154" path="M154 0Q100 100 1640 200" dur="1s" repeatCount="indefinite"/><circle id="c155" r="9.9"/><animateMotion href="#c155" path="M155 0Q100 100 1650 200" dur="1s" repeatCount="indefinite"/><circle id="c156" r="9.9"/><animateMotion href="#c156" path="M156 0Q100 100 1660 200" dur="1s" repeatCount="indefinite"/><circle id="c157" r="9.9"/><animateMotion href="#c157" path="M157 0Q100 100 1670 200" dur="1s" repeatCount="indefinite"/><circle id="c158" r="9.9"/><animateMotion href="#c158" path="M158 0Q100 100 1680 200" dur="1s" repeatCount="indefinite"/><circle id="c159" r="9.9"/><animateMotion href="#c159" path="M159 0Q100 100 1690 200" dur="1s" repeatCount="indefinite"/><circle id="c160" r="9.9"/><animateMotion href="#c160" path="M160 0Q100 100 1700 200" dur="1s" repeatCount="indefinite"/><circle id="c161" r="9.9"/><animateMotion href="#c161" path="M161 0Q100 100 1710 200" dur="1s" repeatCount="indefinite"/><circle id="c162" r="9.9"/><animateMotion href="#c162" path="M162 0Q100 100 1720 200" dur="1s" repeatCount="indefinite"/><circle id="c163" r="9.9"/><animateMotion href="#c163" path="M163 0Q100 100 1730 200" dur="1s" repeatCount="indefinite"/><circle id="c164" r="9.9"/><animateMotion href="#c164" path="M164 0Q100 100 1740 200" dur="1s" repeatCount="indefinite"/><circle id="c165" r="9.9"/><animateMotion href="#c165" path="M165 0Q100 100 1750 200" dur="1s" repeatCount="indefinite"/><circle id="c166" r="9.9"/><animateMotion href="#c166" path="M166 0Q100 100 1760 200" dur="1s" repeatCount="indefinite"/><circle id="c167" r="9.9"/><animateMotion href="#c167" path="M167 0Q100 100 1770 200" dur="1s" repeatCount="indefinite"/><circle id="c168" r="9.9"/><animateMotion href="#c168" path="M168 0Q100 100 1780 200" dur="1s" repeatCount="indefinite"/><circle id="c169" r="9.9"/><animateMotion href="#c169" path="M169 0Q100 100 1790 200" dur="1s" repeatCount="indefinite"/><circle id="c170" r="9.9"/><animateMotion href="#c170" path="M170 0Q100 100 1800 200" dur="1s" repeatCount="indefinite"/><circle id="c171" r="9.9"/><animateMotion href="#c171" path="M171 0Q100 100 1810 200" dur="1s" repeatCount="indefinite"/><circle id="c172" r="9.9"/><animateMotion href="#c172" path="M172 0Q100 100 1820 200" dur="1s" repeatCount="indefinite"/><circle id="c173" r="9.9"/><animateMotion href="#c173" path="M173 0Q100 100 1830 200" dur="1s" repeatCount="indefinite"/><circle id="c174" r="9.9"/><animateMotion href="#c174" path="M174 0Q100 100 1840 200" dur="1s" repeatCount="indefinite"/><circle id="c175" r="9.9"/><animateMotion href="#c175" path="M175 0Q100 100 1850 200" dur="1s" repeatCount="indefinite"/><circle id="c176" r="9.9"/><animateMotion href="#c176" path="M176 0Q100 100 1860 200" dur="1s" repeatCount="indefinite"/><circle id="c177" r="9.9"/><animateMotion href="#c177" path="M177 0Q100 100 1870 200" dur="1s" repeatCount="indefinite"/><circle id="c178" r="9.9"/><animateMotion href="#c178" path="M178 0Q100 100 1880 200" dur="1s" repeatCount="indefinite"/><circle id="c179" r="9.9"/><animateMotion href="#c179" path="M179 0Q100 100 1890 200" dur="1s" repeatCount="indefinite"/><circle id="c180" r="9.9"/><animateMotion href="#c180" path="M180 0Q100 100 1900 200" dur="1s" repeatCount="indefinite"/><circle id="c181" r="9.9"/><animateMotion href="#c181" path="M181 0Q100 100 1910 200" dur="1s" repeatCount="indefinite"/><circle id="c182" r="9.9"/><animateMotion href="#c182" path="M182 0Q100 100 1920 200" dur="1s" repeatCount="indefinite"/><circle id="c183" r="9.9"/><animateMotion href="#c183" path="M183 0Q100 100 1930 200" dur="1s" repeatCount="indefinite"/><circle id="c184" r="9.9"/><animateMotion href="#c184" path="M184 0Q100 100 1940 200" dur="1s" repeatCount="indefinite"/><circle id="c185" r="9.9"/><animateMotion href="#c185" path="M185 0Q100 100 1950 200" dur="1s" repeatCount="indefinite"/><circle id="c186" r="9.9"/><animateMotion href="#c186" path="M186 0Q100 100 1960 200" dur="1s" repeatCount="indefinite"/><circle id="c187" r="9.9"/><animateMotion href="#c187" path="M187 0Q100 100 1970 200" dur="1s" repeatCount="indefinite"/><circle id="c188" r="9.9"/><animateMotion href="#c188" path="M188 0Q100 100 1980 200" dur="1s" repeatCount="indefinite"/><circle id="c189" r="9.9"/><animateMotion href="#c189" path="M189 0Q100 100 1990 200" dur="1s" repeatCount="indefinite"/><circle id="c190" r="9.9"/><animateMotion href="#c190" path="M190 0Q100 100 2000 200" dur="1s" repeatCount="indefinite"/><circle id="c191" r="9.9"/><animateMotion href="#c191" path="M191 0Q100 100 2010 200" dur="1s" repeatCount="indefinite"/><circle id="c192" r="9.9"/><animateMotion href="#c192" path="M192 0Q100 100 2020 200" dur="1s" repeatCount="indefinite"/><circle id="c193" r="9.9"/><animateMotion href="#c193" path="M193 0Q100 100 2030 200" dur="1s" repeatCount="indefinite"/><circle id="c194" r="9.9"/><animateMotion href="#c194" path="M194 0Q100 100 2040 200" dur="1s" repeatCount="indefinite"/><circle id="c195" r="9.9"/><animateMotion href="#c195" path="M195 0Q100 100 2050 200" dur="1s" repeatCount="indefinite"/><circle id="c196" r="9.9"/><animateMotion href="#c196" path="M196 0Q100 100 2060 200" dur="1s" repeatCount="indefinite"/><circle id="c197" r="9.9"/><animateMotion href="#c197" path="M197 0Q100 100 2070 200" dur="1s" repeatCount="indefinite"/><circle id="c198" r="9.9"/><animateMotion href="#c198" path="M198 0Q100 100 2080 200" dur="1s" repeatCount="indefinite"/><circle id="c199" r="9.9"/><animateMotion href="#c199" path="M199 0Q100 100 2090 200" dur="1s" repeatCount="indefinite"/></g></svg>
See also: Taylor Hunt's post on Css tricks: Improving SVG Runtime Performance
Some browsers might also have issues with very big numbers as described here:
The Limits of Numbers in SVG

As I wrote above in the update, it turned out that the issue was caused by scale(). Luckily, I had control over it (I don't over the path itself) so I managed to set the scaling values closer to 1 (0.2 in my case) and it worked like a charm!

Convert SVG with image not working in safari

i want to convert a SVG with an image inside into a png.
In Firefox and Chrome everything works perfect, but in Safari the conversion is ignoring the image inside the SVG.
The library i am using is html-to-image (html2canvas gave me the same result)
Here is a codepen (the face is the image)
https://codepen.io/RainPara/pen/MWvqZNz
var node = document.getElementById('item');
htmlToImage.toPng(node)
.then(function (dataUrl) {
var img = new Image();
img.src = dataUrl;
document.body.appendChild(img);
})
.catch(function (error) {
console.error('oops, something went wrong!', error);
});
Maybe someone can help me

Testing your example on iOS safari(v15), I've also encountered this issue.
Basically, the svg to image conversion process involves:
creating a Blob/Blob URL (see also What is a blob URL and why it is used?)
render it to a canvas
return a data url
For some reasons (at least some) safari versions, apparently need some delay to render the canvas properly.
This example employs both the initially used html2canvas (library/script based) and a stripped down js code.
function save() {
var node = document.getElementById("item");
htmlToImage
.toPng(node)
.then(function (dataUrl) {
var img = new Image();
//img.width = nodeW;
//img.height = nodeH;
img.src = dataUrl;
let imgWrp = document.createElement("div");
imgWrp.classList.add("img-wrp");
imgWrp.appendChild(img);
document.body.appendChild(imgWrp);
})
.catch(function (error) {
console.error("oops, something went wrong!", error);
});
}
function svg2Png(selector) {
const svgEl = document.querySelector(selector);
let svgBB = svgEl.getBBox();
let svgW = svgBB.width;
let svgH = svgBB.height;
let blob = new Blob([svgEl.outerHTML], {type: 'image/svg+xml'});
let URL = window.URL;
let blobURL = URL.createObjectURL(blob);
let tmpImg = new Image();
tmpImg.src = blobURL;
tmpImg.width = svgW;
tmpImg.height = svgH;
tmpImg.onload = () => {
let canvas = document.createElement("canvas");
canvas.width = svgW;
canvas.height = svgH;
let context = canvas.getContext("2d");
// draw blob img to canvas with some delay
setTimeout(function () {
context.drawImage(tmpImg, 0, 0, svgW, svgH);
let pngDataUrl = canvas.toDataURL();
let svgImg = document.createElement("img");
svgImg.width = svgW;
svgImg.height = svgH;
svgImg.class = "svgImg";
svgImg.src = pngDataUrl;
// just additional wrapping for example usage
let imgWrp = document.createElement("div");
imgWrp.setAttribute("class", "img-wrp img-wrp-vanilla");
imgWrp.appendChild(svgImg);
document.body.appendChild(imgWrp);
}, 300);
};
}
.btn-wrp{
display:flex;
}
button{
width:100%;
padding:0.5em;
}
.img-wrp{
display:inline-block;
font-size:25vw;
width:1em;
height: 1em;
border: 2px solid green
}
.img-wrp-svg{
border: 2px solid red
}
.img-wrp-vanilla{
border: 2px solid orange
}
.img-wrp>*{
width:100%;
height:auto;
}
img{
/*
display:inline-block;
font-size:10em;
width:1em;
height: 1em;
*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.9.0/html-to-image.js"></script>
<div class="btn-wrp">
<button type="button" onclick="save()">Convert svg (html-to-image.js)</button>
<button type="button" onclick="svg2Png('svg')">svg2Png</button>
</div>
<div class="img-wrp img-wrp-svg">
<svg id="item" width="500" height="500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500">
<defs>
<mask id="a" x="197" y="42" width="127.3" height="51.7" maskUnits="userSpaceOnUse">
<g data-name="c">
<path data-name="b" d="M301 92c-7-8-13-17-39-19-28-2-36 8-44 19s-24-28-19-33c10-10 35-18 59-16 42 3 71 24 66 36s-19 19-23 13Z" fill="#fff" />
</g>
</mask>
<mask id="b" x="184" y="42" width="140.7" height="60.2" maskUnits="userSpaceOnUse">
<g data-name="c">
<path data-name="b" d="M301 92c-7-8-13-17-39-19-28-2-36 8-44 19s-24-28-19-33c10-10 35-18 59-16 42 3 71 24 66 36s-19 19-23 13Z" fill="#fff" />
</g>
</mask>
<mask id="c" x="198" y="42" width="126.4" height="51.7" maskUnits="userSpaceOnUse">
<g data-name="c">
<path data-name="b" d="M301 92c-7-8-13-17-39-19-28-2-36 8-44 19s-24-28-19-33c10-10 35-18 59-16 42 3 71 24 66 36s-19 19-23 13Z" fill="#fff" />
</g>
</mask>
<mask id="d" x="195" y="42" width="136.4" height="63" maskUnits="userSpaceOnUse">
<g data-name="c">
<path data-name="b" d="M301 92c-7-8-13-17-39-19-28-2-36 8-44 19s-24-28-19-33c10-10 35-18 59-16 42 3 71 24 66 36s-19 19-23 13Z" fill="#fff" />
</g>
</mask>
</defs>
<path d="M0 0h500v500H0Z" fill="none"/>
<path d="M410 471c0 16-74 29-166 29S78 487 78 471s75-29 166-29 166 13 166 29" style="isolation:isolate" opacity=".2"/>
<path d="M170 439a7 7 0 0 1-2 0c-6 2-26-1-31-4h-1c-4-3-5-8-3-17 3-10 9-10 13-9v8s12 8 22 2l2-6c5 1 9 2 9 9 0 5-4 14-9 17" fill="#f0f0f0" />
<path d="M146 417v-8a12 12 0 0 0-5 0 11 11 0 0 0 5 8" fill="#ebdfd4" />
<path d="M133 420c1 7 7 4 12 4s10 4 15 2c3-1 2-3 0-5-7 1-14-4-14-4a11 11 0 0 1-5-8c-3 1-6 3-8 9v2" fill="#fff" />
<path d="m170 413-2 6-2 1a6 6 0 0 1 1 1c2 5-2 9-6 11a26 26 0 0 1-8 1l-10 2a17 17 0 0 1-8-1 8 8 0 0 0 1 1h1c5 2 25 6 31 4a6 6 0 0 0 2 0c5-3 9-12 9-17 1-7-4-8-9-9" fill="#d4d4d4" />
<path d="M314 437a10 10 0 0 1-5-8c-2-15 8-15 11-15a46 46 0 0 1 3 8s9 4 19-2a62 62 0 0 0 3-10c6 0 10 3 11 13 0 5-2 9-5 11s-8 4-14 5c-8 1-17 1-23-2" fill="#f0f0f0" />
<path d="M356 423c-1-10-5-13-11-13a62 62 0 0 1-3 10 22 22 0 0 1-2 1v1c3-1 7-5 10-4 4 1 3 5 2 8-2 4-8 6-14 6a13 13 0 0 1-5 4c-5 3-12 3-18 1 6 3 14 3 22 2 6-1 11-2 14-5s5-6 5-11" fill="#d4d4d4" />
<path d="M349 423a10 10 0 0 0 3-2 5 5 0 0 0-3-5 15 15 0 0 1-5 3l-2 1c-8 5-17 3-19 2a26 26 0 0 1-5-2c-2-1-5-2-5-5-3 2-5 6-4 14a10 10 0 0 0 5 8 18 18 0 0 0 7 2 16 16 0 0 0 1-5 9 9 0 0 1 0-2 3 3 0 0 1 1-2l8-1 9-3 9-3" fill="#fff" />
<path d="M320 414c-6-19-11-24-11-24-47 13-127-1-127-1-7 10-9 16-12 24l-2 6c-10 6-22-2-22-2v-8c0-28 5-57 6-59 21 5 189-2 189-2 5 16 5 53 4 62a62 62 0 0 1-3 10c-9 6-19 2-19 2a73 73 0 0 0-3-8" fill="#d61535" />
<path d="M151 380a38 38 0 0 0-4 0 268 268 0 0 0-1 29v8s7 5 15 4a213 213 0 0 0 3-24c1-9-3-16-13-17" fill="#f1183c" />
<path d="M341 348s-168 7-189 2l-3 17c30 14 62 22 94 27a27 27 0 0 0 8-14c3 8 11 13 20 15 13 0 26-2 37-5 10-4 21-5 26 7a73 73 0 0 1 3 25 20 20 0 0 0 5-2 62 62 0 0 0 3-10c1-9 1-46-4-62" fill="#bf132f" />
<path d="M353 464c7 8 12 17 11 19s-43-7-44-9l-6-37c6 3 15 3 23 2 6-1 11-2 14-5l2 30" fill="#f1183c" />
<path d="m353 464-2-29v-1c-3 3-8 4-14 5-8 1-17 1-23-2l1 4a43 43 0 0 0 15 5c0 9 2 17 7 24 8 6 17 10 27 12 0-3-5-11-11-18" fill="#d61535" />
<path d="M137 435c5 2 25 6 31 4a6 6 0 0 0 2 0c-1 6-3 32-7 33s-57 3-57 1 27-17 27-19l3-19h1" fill="#f1183c" />
<path d="M168 440c-6 1-24-2-30-4a65 65 0 0 0 10 6c4 1 10 2 11 6 2 3 0 9-1 12-1 5-2 9-6 11a51 51 0 0 1-10 3c11 0 19-1 21-2 3-1 6-27 7-33a6 6 0 0 1-2 1" fill="#d61535" />
<path d="M146 471a18 18 0 0 0 6-3 48 48 0 0 1-6 3" fill="#d61535" />
<path d="m135 439-2 14c6 2 10 3 14 8a74 74 0 0 0 5-16l-17-6m-5 18c-6 4-21 11-24 14 12 2 23 0 33-4a32 32 0 0 0-9-10" fill="#ff3153" />
<path d="M355 466a45 45 0 0 0-27 5c15-11 25-9 25-9l1 4" fill="#bf132f" />
<path d="M333 455c-1-4-2-7-5-9a4 4 0 0 0-6 1c-2 3-2 6-2 10 1 4 1 8 4 10 2 3 7 3 9-1v-11m14 20c-2-3-3-5-6-5s-4-1-6 1c-1 2 1 4 2 5a12 12 0 0 0 3 1 15 15 0 0 1 3 1 3 3 0 0 0 4-3" fill="#ff3153" />
<path d="M308 98c2 6 7 16 3 29-3 14-12 14-18 10s-12-8-17-7l-41-6c-6-2-12 2-17 5s-11 3-14-9 5-30 12-35v1s48-8 92 12" fill="#f6aa76" />
<path data-name="mehrdunkel" d="M83 202c6-5 41 45 37 48-6 2-42-44-37-48" fill="var(--main-objekte-mehrdunkel)" />
<path d="m178 287-1 2a78 78 0 0 0-6 40s-8 2-10-1v-6c0-9 2-26 6-34a12 12 0 0 1 1-2c3-3 10 1 10 2m156-5 6 36a38 38 0 0 1 0 7c-1 4-13 2-13 2v-6c-1-19-4-31-6-37a37 37 0 0 0-3-6s10-3 14 0a9 9 0 0 1 2 4" fill="#ff3153" />
<path d="M279 306a39 39 0 0 1 5 0c3 0 3 7 0 7a118 118 0 0 1-18 1c-4 0-4-6-1-7a38 38 0 0 1 6-1h8" fill="#ffbd4d" />
<path d="M210 328v-29a24 24 0 0 1 2-8c2-5 5-7 10-7a348 348 0 0 1 47 0c3 0 6 1 8 4 1 3 2 8 2 18h-8c0-4 1-14-9-14h-32c-7 1-9 2-10 11a111 111 0 0 0 0 23c0 5 4 6 11 6h32c5-1 9-4 8-18h8v20c0 7-6 7-9 7a571 571 0 0 0-42 0c-13 0-18-3-18-10v-3" fill="#f4b837" />
<path d="M279 314h-3v17c0 7-6 7-9 7a571 571 0 0 0-43 0c-6 0-10 0-13-2 2 4 7 5 17 5a700 700 0 0 1 42 0c3 0 9 0 9-7v-20m-58 14a8 8 0 0 1-1-2 111 111 0 0 1 0-23c1-9 3-10 10-11h32a10 10 0 0 1 4 0c-2-2-4-3-8-3h-32c-7 1-9 2-10 11a111 111 0 0 0 0 23c1 3 2 5 5 5m56-40a7 7 0 0 0-4-3c2 3 3 8 3 18h-5v3h8c0-10-1-15-2-18" fill="#c2732e" />
<path d="M279 314h-8v4a42 42 0 0 0 8 1v-5m-8-8h8v-2a83 83 0 0 0-8 0v2" fill="#f0953a" />
<path d="M163 40c1 9 2 11-2 20v1c-10 16-36 14-38-11s32-30 40-10" fill="#f0f0f0" />
<path d="M145 53c5-10 1-17-5-20a11 11 0 0 0-10 2 13 13 0 0 0-4 17c3 5 8 7 13 6a14 14 0 0 0 6-5" fill="#fff" />
<path d="M147 63a17 17 0 0 0 3-2 18 18 0 0 0 5-17c-3 5-2 10-4 15a17 17 0 0 1-4 4" fill="#d4d4d4" />
<path d="m163 40-1-1-4 2a18 18 0 0 1 1 4c2 16-11 25-24 25 9 3 20 0 26-9v-1c4-9 3-11 2-20Z" fill="#d4d4d4" />
<path d="M197 62c-10 1-26-2-37-6-8-3-13-6-13-8s6-7 14-12a270 270 0 0 1 31-16c21-10 56-28 77-16s40 49 46 63a108 108 0 0 0-58-20c-31-1-49 6-59 14l-1 1Z" fill="#f1183c" />
<path d="M220 22c11-1 24 0 34-7a14 14 0 0 0 6-14c-21-4-50 10-68 19a270 270 0 0 0-31 16c-8 4-13 9-14 12 7 1 25-10 29-12 14-8 28-13 44-14Zm19 17a161 161 0 0 1-13 10 137 137 0 0 1 31-2 107 107 0 0 1 17 2c3-7 3-14 0-20-8-15-27 3-35 10" fill="#ff3153" />
<path d="M249 20c-10-3-26 4-34 10a120 120 0 0 0-25 32 37 37 0 0 0 7-1h1a55 55 0 0 1 15-8l4-3c10-5 20-10 27-18 4-4 6-9 5-12m20-16a33 33 0 0 0-16-4c16 5 29 20 26 38a18 18 0 0 1-6 11 107 107 0 0 1 42 18c-6-14-25-51-46-63" fill="#d61535" />
<path data-name="mittel" d="M140 227a97 97 0 0 1-16 20 37 37 0 0 1-4 3c4-3-31-53-37-48s32-19 59-17a28 28 0 0 0 11 17l-3 8a146 146 0 0 1-10 17" fill="var(--main-objekte-mittel)" />
<path data-name="hell" d="M135 187a11 11 0 0 0-4-2c-24 3-48 17-48 17 3-2 9 5 17 14a288 288 0 0 0 38-26 10 10 0 0 0-3-3m5 7a294 294 0 0 1-38 25l8 10c7-6 15-12 21-19 4-4 9-11 8-16" fill="var(--main-objekte-hell)" />
<path data-name="mittel" d="M178 131c-9 9-10 28 7 39a13 13 0 0 0 0 11 23 23 0 0 0-7 5c-3-7-14-25-29-19a12 12 0 0 0-6 7c-21-40 18-80 41-86 19-8 34-8 34-11l-33 29c1 10 1 16-7 25Z" fill="var(--main-objekte-mittel)" />
<path data-name="hell" d="M137 158c8 2 19-3 20-9 0-16 2-35 12-49a71 71 0 0 1 9-10c-20 9-45 37-41 68" fill="var(--main-objekte-hell)" />
<path data-name="dunkel" d="M178 109c-1 5-4 9-8 14l-6 12a83 83 0 0 1 6-7c6-7 7-13 8-19" fill="var(--main-objekte-dunkel)" />
<path data-name="dunkel" d="M178 131c8-9 8-15 7-25a11 11 0 0 1 1-3c-2-2-2-5-2-10l-1 11c0 8-2 15-6 21-4 7-10 12-12 18a36 36 0 0 0 1 6c2 4 4 8 2 12-1 4-5 5-9 5h-1c10 2 17 14 20 20a23 23 0 0 1 7-5 13 13 0 0 1 0-11c-17-11-16-30-7-39m193 35c8 8 24 13 23 17s-11 7-15 14-12 28-38 49h-1c-3-13-7-19-7-21a25 25 0 0 0 2-4c9-21 0-49-11-50 9-9 6-19 5-31-1-5 2-12 2-18a28 28 0 0 0 0-10c19 17 32 45 40 54" fill="var(--main-objekte-dunkel)" />
<path data-name="mehrdunkel" d="M351 183a65 65 0 0 1 0 12c0 3-1 7 3 6l4-3a26 26 0 0 0-2-15c-6-18-16-32-14-52v-2c-1 9-3 18-1 27 3 9 8 17 10 27" fill="var(--main-objekte-mehrdunkel)" />
<path data-name="mehrdunkel" d="M394 183a65 65 0 0 1-18 4c-6 1-10 7-15 12l-2 2c-2 3-5 7-9 6-3-1-3-5-3-8 1-12-1-22-6-33-3-7-5-14-4-22 0-11 4-21-4-31l-2-1a28 28 0 0 1 0 10c0 6-3 12-2 17 1 13 4 23-5 32 11 0 20 29 11 50a24 24 0 0 1-2 4c0 1 4 8 7 21h1c26-21 35-42 38-49s15-9 15-14" fill="var(--main-objekte-mehrdunkel)" />
<path d="M324 171c-12 0-40 19-67 25-19 5-42 1-55-2 2-6-4-13-12-14a9 9 0 0 0-5 1 13 13 0 0 1 0-11c-17-11-16-30-7-39s8-15 7-25a11 11 0 0 1 0-3c2-10 15-21 31-18h10c-8 5-13 47-8 44s11-7 17-5l41 6c5-1 12 3 17 7s8 3 11-10-2-27-4-32c6-1 23 4 28 10a17 17 0 0 1 3 7 28 28 0 0 1 0 10c0 6-3 13-2 17 1 13 4 23-5 32Z" fill="#f0f0f0" />
<path d="m199 161-7-12-3-13c0-3-4-4-6-3-3 3-5 4-6 8a24 24 0 0 0 0 11c2 8 6 14 13 17a7 7 0 0 0 9-2v-6m16 15a11 11 0 0 0-3-3 14 14 0 0 1-3-2 3 3 0 0 0-3 0 3 3 0 0 0-1 3c1 3 3 7 7 8a4 4 0 0 0 4-2 4 4 0 0 0-1-4m10-13-12-8c-8-4-11-7-13-16a2 2 0 0 0-3 0c-2 9 2 19 9 25 4 4 10 6 13 12 3 4 3 10 8 12a4 4 0 0 0 5-1c5-7-2-19-7-24" fill="#fff" />
<path d="M242 171c0-4-2-6-5-9-1-1-4 0-3 2 1 3 1 6 3 8s6 2 5-1" fill="#f7eedf" />
<path d="M195 118c1 8 4 16 12 17s13-4 16-10l-5 4c-5 3-11 3-14-9s5-30 12-35a25 25 0 0 0-3 0c-11 5-18 21-18 33m56 71c7-3 12-9 18-14a36 36 0 0 1 19-7c10-1 32 3 32-12 1-6-3-13-3-20 0-6 4-11 6-16l-7 11c-2 10 4 20 2 28-2 4-8 8-12 6-26-6-40 16-60 26a18 18 0 0 1-10 0c5 1 10 1 15-2" fill="#d4d4d4" />
<path d="M331 112a17 17 0 0 0-3-7c3 9-1 16-4 23-6 12 2 20 0 31-1 8-10 11-17 12l-23 1c-8 2-13 7-19 12-7 6-14 12-22 12a21 21 0 0 1-13-3 81 81 0 0 1-15-2c-4-1-6-2-9-5-2-3-4-7-8-9-4-1-10 0-14 2a16 16 0 0 0 1 2 10 10 0 0 1 5-1c8 1 14 8 12 14 13 3 36 7 55 2 27-6 55-25 67-25 9-9 6-19 5-31-1-5 2-12 2-18a28 28 0 0 0 0-10" fill="#d4d4d4" />
<path d="m349 316 1 1-10 2-6-36 13-3 2 36" fill="#a15132" />
<path d="m349 316 1 1-10 2-6-36 13-3 2 36" fill="#7a3d26" />
<path d="M167 288c-4 8-6 25-6 34a113 113 0 0 1-13-3 161 161 0 0 1 1-33l18 2" fill="#a15132" />
<path d="M167 288h-2a132 132 0 0 0-8 33l4 1c0-9 2-26 6-34" fill="#7a3d26" />
<path d="M212 291a24 24 0 0 0-2 8v29a327 327 0 0 1-39-4c0-10 1-25 6-35l34 2h1" fill="#a15132" />
<path d="M179 289h-2c-5 10-6 25-6 35l9 1a62 62 0 0 1-1-36m31 2c-5 11-5 24-5 37h5v-29a24 24 0 0 1 2-8h-2" fill="#7a3d26" />
<path d="M266 314h5c1 14-4 17-8 18h-32c-7 0-11-1-11-6a111 111 0 0 1 0-23c1-9 3-10 10-11h32c10 0 9 10 9 14a38 38 0 0 0-6 1c-3 1-3 7 1 7" fill="#a15132" />
<path d="M227 327c-6-16 0-29 13-35h-10c-7 1-9 2-10 11a111 111 0 0 0 0 23c0 5 4 6 11 6h1a18 18 0 0 1-5-5m44-13h-6a30 30 0 0 0 6 8 41 41 0 0 0 0-8" fill="#7a3d26" />
<path d="M327 322h-1a420 420 0 0 1-47 6v-14l5-1c3 0 3-7 0-7a39 39 0 0 0-5 0c1-10 0-15-2-18l44-3c2 6 5 18 6 37" fill="#a15132" />
<path d="M288 306c-3-5-3-1-5-6l-3-12h-3c1 3 2 8 2 18a39 39 0 0 1 5 0c3 0 3 7 0 7l-5 1v14l10-1a60 60 0 0 0 2-9l-3-12m38 16c0-19-3-31-5-37h-1a146 146 0 0 1 4 38l2-1" fill="#7a3d26" />
<path d="M143 174a19 19 0 0 0-1 9c-13-4-8-18 1-9" fill="#ffbd4d" />
<path d="M143 175a2 2 0 0 1-2-2c1-21-9-54-19-56-2 0-4 1-5 3-4 8 0 29 19 50a2 2 0 0 1-2 2c-22-22-25-45-21-54 2-3 6-5 9-5 15 2 24 38 23 60a2 2 0 0 1-2 2" fill="#f4b837" />
<path d="M130 186c-21 0-36-4-43-11a14 14 0 0 1-5-10 9 9 0 0 1 5-9c10-5 30 2 49 15a2 2 0 0 1-2 4c-19-14-38-19-45-15a5 5 0 0 0-3 5 10 10 0 0 0 4 7c7 7 25 10 50 9a2 2 0 0 1 0 4l-10 1" fill="#f4b837" />
<path d="M32 225a2 2 0 0 1-1-3c40-45 107-43 107-43a2 2 0 0 1 2 2 2 2 0 0 1-2 2s-65-2-105 42a2 2 0 0 1-1 0" fill="#f4b837" />
<path d="M143 174a12 12 0 0 1 6-7c15-6 26 12 29 19a53 53 0 0 0-9 15 35 35 0 0 0-3 7 34 34 0 0 1-13-6 28 28 0 0 1-11-17 19 19 0 0 1 1-11" fill="#ff3153" />
<path d="M177 186c-3 1-8 5-9 7a34 34 0 0 0-8 9 36 36 0 0 0-2 3 35 35 0 0 0 8 3 35 35 0 0 1 3-7 53 53 0 0 1 9-15" fill="#f1183c" />
<path d="M160 181c-3-4-11-9-17-8v1a19 19 0 0 0-1 11 28 28 0 0 0 8 15 13 13 0 0 0 10-4c5-4 4-10 0-15" fill="#ff6169" />
<path d="M166 212c-4 3-13 3-16-2l3-8a33 33 0 0 0 13 6 26 26 0 0 0 0 4" fill="#bf132f" />
<path d="M166 218h-1l-5 14c-8 2-19-4-20-5a146 146 0 0 0 9-17c4 5 13 5 16 2a28 28 0 0 0 1 6" fill="#d4d4d4" />
<path d="m165 218 1-1a27 27 0 0 1 0-5c-4 3-13 3-16-2 1 6 8 11 15 8" fill="#f0f0f0" />
<path d="M190 180c8 1 14 8 12 14l-8-2c-16 16-11 30-11 30l1 2c-4 5-11 6-15 1-2-1-3-4-3-7a28 28 0 0 1 0-6 27 27 0 0 1 0-4 35 35 0 0 1 3-7 53 53 0 0 1 9-15 23 23 0 0 1 7-5 10 10 0 0 1 5-1" fill="#f0f0f0" />
<path d="M201 194a10 10 0 0 0-1-3c-1-2-4-3-7-3l-6 4-3 8c-2 5-7 11-5 17a8 8 0 0 0 4 5c-1-2-4-15 11-30l7 2" fill="#d4d4d4" />
<path d="M174 213c1-5 4-10 6-14l3-6-3 4c-5 6-9 15-6 23a9 9 0 0 0 7 6h1a13 13 0 0 1-7-13" fill="#d4d4d4" />
<path d="M140 227c1 1 12 7 21 5a276 276 0 0 0-11 43c-9 10-19 7-26-27a97 97 0 0 0 16-21" fill="#d61535" />
<path d="M140 227a97 97 0 0 1-16 20l6 22c7-8 13-16 16-26a51 51 0 0 0 12-2l3-9c-9 2-20-4-21-5" fill="#bf132f" />
<path d="M324 171c11 0 20 29 11 50a24 24 0 0 1-2 4c-12 18-48 27-74 30a69 69 0 0 1-15 0c-22-3-46-16-60-31l-1-2s-5-14 11-30l8 2c13 3 36 7 55 2 27-6 55-25 67-25" fill="#ff3153" />
<path d="M209 206c7 2 22 7 29 3 4-3 7-6 9-11-16 1-34-2-45-4l-8-2a47 47 0 0 0-5 6 121 121 0 0 0 20 8m94-2c9-6 24-19 23-32a7 7 0 0 0-2-1c-12 0-40 19-67 25l-6 1c5 22 35 18 52 7" fill="#ff6169" />
<path d="M333 179c3 28-31 56-65 64-27 7-58 0-78-16-5-5-1-27 3-34-15 15-10 29-10 29l1 2c14 15 37 28 60 31a69 69 0 0 0 15 0c26-3 62-12 74-30a24 24 0 0 0 2-4c6-14 4-32-2-42" fill="#f1183c" />
<path d="m269 284-25-1v-28a69 69 0 0 0 15 0c26-3 62-12 74-30 0 2 4 8 7 21a257 257 0 0 1 6 34l-12 3a9 9 0 0 0-2-4c-4-3-14 0-14 0a35 35 0 0 1 3 6l-44 3c-2-3-5-4-8-4" fill="#f1183c" />
<path d="M323 247a80 80 0 0 0 13-14 67 67 0 0 0-3-8c-12 18-48 27-74 30a69 69 0 0 1-15 0v13c29 3 68-12 79-21" fill="#d61535" />
<path d="M338 238a83 83 0 0 1-14 13c-13 10-30 15-46 20h-1a149 149 0 0 0 64-22l-1-3-2-8" fill="#d61535" />
<path d="M169 226c4 4 11 3 15-2 14 15 37 28 60 31v28l-22 1c-5 0-8 2-10 7h-1l-34-2 1-1c0-1-7-6-10-2a12 12 0 0 0-1 2l-18-2 1-11a276 276 0 0 1 11-43c2-9 4-14 5-14 0 3 1 6 3 8" fill="#f1183c"/>
<path d="M199 268a83 83 0 0 1 3-12 24 24 0 0 0-4-5l-2-2a121 121 0 0 0-6 41h8a176 176 0 0 1 1-22m-6-21c-10-6-25-8-36-4a267 267 0 0 0-7 32l-1 11 17 2h1a12 12 0 0 1 1-2c3-3 10 1 10 2l-1 1 9 1a126 126 0 0 1 7-43" fill="#ff3153" />
<path d="M242 265h-2 2m2-10c-23-3-46-16-60-31-4 5-11 6-15 2-2-2-3-5-3-8s-2 3-3 8c2 9 11 14 21 13 12 16 28 27 56 30v14h4v-28" fill="#d61535" />
<path d="M171 324a327 327 0 0 0 39 4v3c0 7 5 10 18 10h19l1 14c-1 3-5 25-14 25-35-1-67-8-87-12l-21-6c6-27 22-43 22-43a113 113 0 0 0 13 3v6c2 3 10 1 10 1v-5" fill="#f1183c"/>
<path d="m161 370 2-9c2-10 7-20 11-30l3-6-6-1v5s-8 2-10-1v-6a112 112 0 0 1-13-3s-16 16-22 43l21 6 14 3m20-45-5 11c-4 10-8 19-10 29l-1 5 16 3c1-16 5-33 13-47l-13-1" fill="#ff3153" />
<path d="M247 341h-19c-13 0-18-3-18-10v-3h-2c-7 19 20 18 35 19a39 39 0 0 1-12 32l2 1c10 0 14-22 15-25l-1-14" fill="#d61535" />
<path d="M350 317c11 19 19 50 9 53l-29 4c-28 4-65 7-70 6-8-3-12-26-12-26v1l-1-14h23c3 0 9 0 9-7v-6a420 420 0 0 0 47-6h1v6s12 2 12-2a38 38 0 0 0 0-7h1l9-2h1" fill="#f1183c" />
<path d="M286 345a29 29 0 0 0 5-18l-12 1v6c0 7-6 7-9 7h-23l1 8c13 2 30 7 38-4" fill="#d61535" />
<path d="M330 374a127 127 0 0 0-2-16c-2-10-4-24-9-35l-7 1a150 150 0 0 1 11 51l7-1m20-57-10 2a38 38 0 0 1 0 7c-1 4-13 2-13 2v-6h-1l-3 1c5 11 7 24 9 34a134 134 0 0 1 2 17l25-4c10-3 2-34-9-53" fill="#e61739" />
<path d="M215 287a8 8 0 0 0-2 1 5 5 0 0 0-1 4 3 3 0 0 0 2 3 3 3 0 0 0 4-2 5 5 0 0 0 1-3v-1c0-2-2-3-4-2m67 21c-1-2-3-1-5-1a39 39 0 0 0-6 0c-2 1-1 3 0 3a24 24 0 0 0 7 0c1 0 4 0 4-2m-11-16h-2v1a2 2 0 0 0 1 1 1 1 0 0 0 1 0 1 1 0 0 0 0-2m-54 41a11 11 0 0 0-1-1 5 5 0 0 1-2-1 1 1 0 0 0-1 1 3 3 0 0 0 3 4c1 0 2-2 1-3" fill="#fbf4a3" />
<path d="M237 308c-5 0-5 7 0 7s5-8 0-7m-47-2c-4 0-4 7 0 7s5-7 0-7m119-1a3 3 0 0 0-2-2 3 3 0 0 0-4 2 3 3 0 0 0 5 4 3 3 0 0 0 1-4" fill="#7a3d26" />
<image width="400" height="530" transform="matrix(0.23, 0.03, -0.03, 0.23, 220.68, 59.26)" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAEJCAMAAADmRZgJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAEhQTFRF2NjY2dnZ7e3t4eHh3t7e7Ozs3Nzc5OTk6+vr2tra5eXl29vb4ODg5+fn6enp4uLi39/f6urq3d3d7u7u6Ojo4+Pj5ubm7u7u++UpuAAAABh0Uk5T//////////////////////////////8AzRMu6gAABetJREFUeNrs3QeWqzAMBVDZYEzvoP3v9CeZzHxS6AYsH70NwD3uzMQCPCJShnnW667zBuk63Wd5KOUhjwTThDDTRRlEAkYioqAsdBZKeyFNmHVlMip48yRll4WNfRCVFfVCw0BTF5myCNJU2l+N+MP4umqsgFRdvVnx2zBddTVExf5OxW+7xOo6SNOmERhLlLbNJRDZ12A4dS9PhyidwAFJtDoVoroIDkrUqdMgBzK2U9ZDZJzAwUlieTykreGE1O3BkDCFk5KGB0IaHcFpiXRzFKTy4dT41TEQLeDkCH0AJPThgvihaUgWwSWJMqOQpoDLUjTmINd0q3XdawkkT+DSJLkZSC/g4ojeBKQDC9Lthlw5zFcN+RlIk4IlSZs9EFmCNSnldoj0waL4citEWeW4SdQ2iLTMMd0m4xCZgnVJ5QaIBxbGWw/pwMp0ayExWJp4HaQVtkJEuwZSRWBtomo5RAZgcQK5GJKC1UmXQmKwPPEySC5sh4h8CcTuATI6TIDGij6/wn9AWiCRdg4iExqQRM5APCASbxqSA5nkUxAKM9bIzPUK0UAoehyiIkqQSI1CPCAVbwxSCVoQUY1ASiCW8jskB3LJv0JKepDyG4RggwybBCg3yLBJ/iAVkEz1AfFoQrx3SChoQkT4BtFANPoVQmnb+30T/IRkQDbZCySlC0mHEKpDfTDcgca3xanEA4hPGeL/h1DuWb99C8j3rGffAvI969m37hAlaEOEekJ6IJ7+CfGoQ7wfCN191nC/BWSPVG/HKyA/+T4nYHBgiDwGCWAT0IcEzQ1CfRV5riRA5Y+G02lvEO0CRN8gngsQ7wbxXYD4CFT+Hj2dREIoXICIEJyYtG7TFvRuQHrQbkA0eG5APEjdgKTguwHxIXADUrsCCSByAxKBcAMiGMIQhjCEIQxhCEMYwhCGMIQhDGEIQxjCEIYwhCEMYQhDGMIQhjCEIQxhCEMYwhCGMIQhDGEIQxjCEIYwhCEMYQhDGMIQhjBkCyRxAxK58/O92g1I7c5PXJ350XHhBqRw54f5mRuQHnI3IC0oV64TceaCF5qXen8sIwjoxPx7vwQpdgFyv5bKiWnrflGYdODWh8fVbS5csFXfL9NzYbQ/rjdEBzYpPxdOOrC2/1wBiuQPiUHzA+kcGCIPCPnb234vLqa+b/y7ShqJn9v/LvemPgH/v25dkd6lDC7Ap923BiUJaPetYZEIyvOWUMNCKoQ3ji+FVChfuf5a2obuoeSt2BDd+gpv5Z/IDvePglxU7/j+KJFGdXX/LFpHcwb+UkaQZsWhb4UdKTbJ11KbFJvke/FTek0yUo6W3MQ1WiCY2of50ZLNxMoOTRTRpnXAmihrTqq47mSheQzpjPcWpyB0xruH05CGyAkrUTMQKut7hnMQGp3Lw3kIhZnrbcYagSjrT70ixyUQbG0fJhqXQWw/v6e4FGL3R+0vA2QUIi3+++jL5n0OYvNWJcM1EMwFoYE+BbH1G2qBayF2rvAprofYOAmXcgvEvq8q/rhjEmKbZMoxDbFLMumYgdj0/zbTjjmIPSM+nXbMQrC3Y2X0ZhzzEGxt2K10s685D8Hq+oNWjCYgGF68FxYZmoGguvQYn+RoCoLywoKcQYXmIBcuKHWIRiEYXzMNlxINQzC7QuI1aByCeWLh8rEFgmFg3/KxCYLKt2752AZBmdq2fGyEnHhCWbh8bIac9U1i6fKxHXLONLx4+dgBOWMaXr587IEcvxvWG15qC+TgySvK8CzI7Sh/3ECpKzwRgvlRq3wh8VQIqkOOKEm29X02Q27zsPnZy1N4AcR4owTtjpfZA7mNFIO7SNFJvAyC2Jsa9Gm470X2QlBqE0OlzPe+x27InbKzVcR+hhHIjdLv2LREXmXiHYxAEJs23faJuI6VmTcwBLlPxrG/dt+SFHlj6vHmIPdtcVwubhcRFK00+GyjkHu7ZEU92zAiSeNKmn2wacgD0+q0jsSIoSx604ijII/RL8M27rzU94NHar/0Cp3lSh70wH8CDADyhUiNEH7C5gAAAABJRU5ErkJggg=="/>
<path d="M301 92c-7-8-13-17-39-19-28-2-36 8-44 19s-24-28-19-33c10-10 35-18 59-16 42 3 71 24 66 36s-19 19-23 13Z" fill="#f0f0f0" />
<g mask="url(#a)">
<path d="M197 83c3-9 12-17 22-19a32 32 0 0 1 5-1c-7-1-13-1-18 3-7 3-9 10-9 17Z" fill="#fff" />
</g>
<g mask="url(#b)">
<path d="M257 47c-31-1-49 6-59 14h-1v1a40 40 0 0 0-4 4c-5 5-8 14-9 22-1 6 0 12 2 15 0-5 4-9 8-13-2-13 0-25 14-30 7-2 14-1 21 0 12 2 21-5 32-7 9-2 17 0 25 4l17 8 14 4h1l-3-2a108 108 0 0 0-58-20Z" fill="#fff" />
</g>
<g mask="url(#c)">
<path d="M241 64a88 88 0 0 0 14-2c11-2 20-1 30 3l20 5c-15-5-27-16-44-13-7 1-13 5-20 7Z" fill="#fff" />
</g>
<g mask="url(#c)">
<path d="M300 87c8 1 15-3 18-12 1-3-1-5-3-8l-1-1c2 7 0 11-5 16-5 3-11 3-16 2l-38-8c-14-3-29-4-43 0a35 35 0 0 0-12 4c15-8 35-6 52-4 16 2 32 8 48 11Z" fill="#d4d4d4" />
</g>
<g mask="url(#d)">
<path d="M320 71c3 11-7 21-21 18l-23-4c-12-3-24-5-37-6-16-1-33-1-44 10 5-3 69-11 113 9q15 1 20 7c3-4 6-16 0-25a43 43 0 0 0-8-9Z" fill="#d4d4d4" />
</g>
</svg>
</div>
The used custom function svg2Png() is just a simplyfied example code and might not be appropriate to provide the best legacy browser support.
Thus consider posting a issue report on github for 'html2canvas' (or other used libraries).

How does SVG affect border rendering in Chrome 60 / Windows 7?

Exact chrome version: 60.0.3112.113 64bit.
It happens on my Windows 7 desktop, but I can't reproduce it on my Windows 10 laptop.
This code works fine:
<button style="border-radius: 17px; border: 1px solid black; padding: 10px">
Button
</button>
Result:
But if I add this SVG to the document:
<svg>
<path d="M0 0c0-4 0 0 0 0 0 0 0 0 1 60"></path>
<path d="M0 0c0-4 0 0 0 0 0 0 0 0 1 60"></path>
<path d="M0 0c0-4 0 0 0 0 0 0 0 0 1 60"></path>
<path d="M0 0c0-4 0 0 0 0 0 0 0 0 1 60"></path>
<path d="M0 0c0-4 0 0 0 0 0 0 0 0 1 60"></path>
<path d="M0 0c0-4 0 0 0 0 0 0 0 0 1 60"></path>
</svg>
The result becomes weird:
Here is the fiddle: https://jsfiddle.net/q29aofrm/
This is simplified SVG code. And not any SVG produce side effects. A real example I found at http://getbootstrap.com/ (look closely at button corners)
Can you explain that strange behavior?
Is there any way to avoid it?

SVG chart generated through D3 not crispy

I'm having some troubles to make my line chart looking crispy. I don't understand why is that. The code associated to the generation of the chart is a bit too long to share it here, so I created a JSFiddle with the result only.
<svg shape-rendering="geometricPrecision" width="1024" height="409"><defs><clipPath id="clip"><clip-rect id="clip-rect" x="30" y="40" width="944" height="389"></clip-rect></clipPath></defs><path stroke="none" class="splitted-lines lines line-0" stroke-width="0" fill="rgba(0,0,0,0)" shape-rendering="geometricPrecision" d="M30,1436L35,1436L40,1436L45,1436L50,1436L55,1436L60,1436L65,1436L70,1436L74,1436L79,1436L84,1436L89,1436L94,1436L99,1436L104,1436L109,1436L114,1436L119,1436L124,1436L129,1436L134,1436L139,1436L144,1436L149,1436L154,1436L158,1436L163,1436L168,1436L173,1436L178,1436L183,1436L188,1436L193,1436L198,1436L203,1436L208,1436L213,1436L218,1436L223,1436L228,1436L233,1436L238,1436L242,1436L247,1436L252,1436L257,1436L262,1436L267,1436L272,1436L277,1436L282,1436L287,1436L292,1436L297,1436L302,1436L307,1436L312,1436L317,1436L321,1436L326,1436L331,1436L336,1436L341,1436L346,1436L351,1436L356,1436L361,1436L366,1436L371,1436L376,1436L381,1436L386,1436L391,1436L396,1436L401,1436L405,1436L410,1436L415,1436L420,1436L425,1436L430,1436L435,1436L440,1436L445,1436L450,1436L455,1436L460,1436L465,1436L470,1436L475,1436L480,1436L485,1436L489,1436L494,1436L499,1436L504,1436L509,1436L514,1436L519,1436L524,1436L529,1436L534,1436L539,1436L544,1436L549,1436L554,1436L559,1436L564,1436L569,1436L573,1436L578,1436L583,1436L588,1436L593,1436L598,1436L603,1436L608,1436L613,1436L618,1436L623,1436L628,1436L633,1436L638,1436L643,1436L648,1436L653,1436L657,1436L662,1436L667,1436L672,1436L677,1436L682,1436L687,1436L692,1436L697,1436L702,1436L707,1436L712,1436L717,1436L722,1436L727,1436L732,1436L736,1436L741,1436L746,1436L751,1436L756,1436L761,1436L766,1436L771,1436L776,1436L781,1436L786,1436L791,1436L796,1436L801,1436L806,1436L811,1436L816,1436L821,1436L825,1436L830,1436L835,1436L840,1436L845,1436L850,1436L855,1436L860,1436L865,1436L870,1436L875,1436L880,1436L885,1436L890,1436L895,1436L900,1436L904,1436L909,1436L914,1436L919,1436L924,1436L929,1436L934,1436L939,1436L944,1436L944,324L939,324L934,325L929,325L924,326L919,327L914,327L909,328L904,329L900,329L895,330L890,330L885,331L880,332L875,332L870,333L865,333L860,334L855,334L850,335L845,336L840,336L835,337L830,337L825,338L821,338L816,339L811,339L806,340L801,340L796,341L791,342L786,342L781,343L776,343L771,344L766,344L761,345L756,345L751,346L746,346L741,347L736,347L732,347L727,348L722,348L717,349L712,349L707,350L702,350L697,351L692,351L687,351L682,351L677,352L672,352L667,352L662,352L657,352L653,352L648,352L643,351L638,351L633,351L628,351L623,351L618,350L613,350L608,350L603,349L598,349L593,348L588,348L583,348L578,347L573,347L569,346L564,346L559,345L554,344L549,344L544,343L539,342L534,342L529,341L524,340L519,340L514,339L509,338L504,338L499,337L494,336L489,335L485,334L480,334L475,333L470,332L465,331L460,330L455,330L450,329L445,328L440,327L435,327L430,326L425,325L420,324L415,323L410,323L405,322L401,321L396,321L391,320L386,319L381,318L376,318L371,317L366,316L361,316L356,315L351,314L346,314L341,313L336,312L331,312L326,311L321,311L317,310L312,309L307,309L302,308L297,307L292,307L287,306L282,305L277,305L272,304L267,303L262,303L257,302L252,301L247,301L242,300L238,299L233,299L228,298L223,297L218,296L213,296L208,295L203,294L198,294L193,293L188,292L183,292L178,291L173,290L168,290L163,289L158,288L154,288L149,287L144,286L139,286L134,285L129,284L124,284L119,283L114,282L109,282L104,281L99,280L94,279L89,278L84,277L79,275L74,273L70,271L65,268L60,265L55,262L50,258L45,255L40,252L35,249L30,245Z"></path><path stroke="none" class="splitted-lines lines line-1" stroke-width="0" fill="rgb(255,120,161)" shape-rendering="geometricPrecision" d="M30,246L35,250L40,253L45,256L50,259L55,263L60,266L65,269L70,272L74,274L79,276L84,278L89,279L94,280L99,281L104,282L109,283L114,283L119,284L124,285L129,285L134,286L139,287L144,287L149,288L154,289L158,289L163,290L168,291L173,291L178,292L183,293L188,293L193,294L198,295L203,295L208,296L213,297L218,297L223,298L228,299L233,300L238,300L242,301L247,302L252,302L257,303L262,304L267,304L272,305L277,306L282,306L287,307L292,308L297,308L302,309L307,310L312,310L317,311L321,312L326,312L331,313L336,313L341,314L346,315L351,315L356,316L361,317L366,317L371,318L376,319L381,319L386,320L391,321L396,322L401,322L405,323L410,324L415,324L420,325L425,326L430,327L435,328L440,328L445,329L450,330L455,331L460,331L465,332L470,333L475,334L480,335L485,335L489,336L494,337L499,338L504,339L509,339L514,340L519,341L524,341L529,342L534,343L539,343L544,344L549,345L554,345L559,346L564,347L569,347L573,348L578,348L583,349L588,349L593,349L598,350L603,350L608,351L613,351L618,351L623,352L628,352L633,352L638,352L643,352L648,353L653,353L657,353L662,353L667,353L672,353L677,353L682,352L687,352L692,352L697,352L702,351L707,351L712,350L717,350L722,349L727,349L732,348L736,348L741,348L746,347L751,347L756,346L761,346L766,345L771,345L776,344L781,344L786,343L791,343L796,342L801,341L806,341L811,340L816,340L821,339L825,339L830,338L835,338L840,337L845,337L850,336L855,335L860,335L865,334L870,334L875,333L880,333L885,332L890,331L895,331L900,330L904,330L909,329L914,328L919,328L924,327L929,326L934,326L939,325L944,325L944,267L939,267L934,267L929,268L924,268L919,268L914,269L909,269L904,269L900,270L895,270L890,270L885,271L880,271L875,271L870,271L865,272L860,272L855,272L850,273L845,273L840,273L835,273L830,274L825,274L821,274L816,275L811,275L806,275L801,275L796,276L791,276L786,276L781,277L776,277L771,277L766,277L761,278L756,278L751,278L746,278L741,279L736,279L732,279L727,279L722,280L717,280L712,280L707,280L702,281L697,281L692,281L687,281L682,281L677,281L672,282L667,282L662,282L657,282L653,282L648,282L643,282L638,282L633,282L628,282L623,282L618,281L613,281L608,281L603,281L598,281L593,281L588,281L583,281L578,281L573,280L569,280L564,280L559,280L554,280L549,280L544,279L539,279L534,279L529,279L524,279L519,278L514,278L509,278L504,278L499,277L494,277L489,277L485,277L480,276L475,276L470,276L465,276L460,275L455,275L450,275L445,275L440,274L435,274L430,274L425,274L420,273L415,273L410,273L405,273L401,273L396,272L391,272L386,272L381,272L376,271L371,271L366,271L361,271L356,271L351,270L346,270L341,270L336,270L331,270L326,269L321,269L317,269L312,269L307,269L302,268L297,268L292,268L287,268L282,267L277,267L272,267L267,267L262,266L257,266L252,266L247,266L242,265L238,265L233,265L228,265L223,264L218,264L213,264L208,264L203,263L198,263L193,263L188,263L183,262L178,262L173,262L168,262L163,261L158,261L154,261L149,261L144,260L139,260L134,260L129,260L124,259L119,259L114,259L109,259L104,258L99,258L94,258L89,257L84,257L79,256L74,255L70,254L65,253L60,252L55,251L50,250L45,248L40,247L35,246L30,245Z"></path><path stroke="none" class="splitted-lines lines line-2" stroke-width="0" fill="rgb(62,98,143)" shape-rendering="geometricPrecision" d="M30,246L35,247L40,248L45,249L50,251L55,252L60,253L65,254L70,255L74,256L79,257L84,258L89,258L94,259L99,259L104,259L109,260L114,260L119,260L124,260L129,261L134,261L139,261L144,261L149,262L154,262L158,262L163,262L168,263L173,263L178,263L183,263L188,264L193,264L198,264L203,264L208,265L213,265L218,265L223,265L228,266L233,266L238,266L242,266L247,267L252,267L257,267L262,267L267,268L272,268L277,268L282,268L287,269L292,269L297,269L302,269L307,270L312,270L317,270L321,270L326,270L331,271L336,271L341,271L346,271L351,271L356,272L361,272L366,272L371,272L376,272L381,273L386,273L391,273L396,273L401,274L405,274L410,274L415,274L420,274L425,275L430,275L435,275L440,275L445,276L450,276L455,276L460,276L465,277L470,277L475,277L480,277L485,278L489,278L494,278L499,278L504,279L509,279L514,279L519,279L524,280L529,280L534,280L539,280L544,280L549,281L554,281L559,281L564,281L569,281L573,281L578,282L583,282L588,282L593,282L598,282L603,282L608,282L613,282L618,282L623,283L628,283L633,283L638,283L643,283L648,283L653,283L657,283L662,283L667,283L672,283L677,282L682,282L687,282L692,282L697,282L702,282L707,281L712,281L717,281L722,281L727,280L732,280L736,280L741,280L746,279L751,279L756,279L761,279L766,278L771,278L776,278L781,278L786,277L791,277L796,277L801,276L806,276L811,276L816,276L821,275L825,275L830,275L835,274L840,274L845,274L850,274L855,273L860,273L865,273L870,272L875,272L880,272L885,272L890,271L895,271L900,271L904,270L909,270L914,270L919,269L924,269L929,269L934,268L939,268L944,268L944,229L939,229L934,229L929,229L924,229L919,229L914,229L909,230L904,230L900,230L895,230L890,230L885,230L880,230L875,230L870,231L865,231L860,231L855,231L850,231L845,231L840,231L835,231L830,231L825,232L821,232L816,232L811,232L806,232L801,232L796,232L791,232L786,232L781,233L776,233L771,233L766,233L761,233L756,233L751,233L746,233L741,233L736,234L732,234L727,234L722,234L717,234L712,234L707,234L702,234L697,234L692,234L687,235L682,235L677,235L672,235L667,235L662,235L657,235L653,235L648,235L643,235L638,235L633,235L628,236L623,236L618,236L613,236L608,236L603,236L598,236L593,236L588,236L583,236L578,236L573,236L569,236L564,237L559,237L554,237L549,237L544,237L539,237L534,237L529,237L524,237L519,237L514,238L509,238L504,238L499,238L494,238L489,238L485,238L480,238L475,238L470,239L465,239L460,239L455,239L450,239L445,239L440,239L435,239L430,239L425,239L420,240L415,240L410,240L405,240L401,240L396,240L391,240L386,240L381,240L376,241L371,241L366,241L361,241L356,241L351,241L346,241L341,241L336,241L331,242L326,242L321,242L317,242L312,242L307,242L302,242L297,242L292,242L287,242L282,242L277,242L272,242L267,242L262,242L257,242L252,242L247,242L242,243L238,243L233,243L228,243L223,243L218,243L213,243L208,243L203,243L198,243L193,243L188,243L183,243L178,243L173,243L168,243L163,243L158,243L154,243L149,243L144,243L139,243L134,243L129,243L124,243L119,243L114,243L109,243L104,243L99,243L94,243L89,244L84,244L79,244L74,244L70,244L65,244L60,244L55,244L50,244L45,244L40,244L35,244L30,245Z"></path><path stroke="none" class="splitted-lines lines line-3" stroke-width="0" fill="rgb(66,101,145)" shape-rendering="geometricPrecision" d="M30,246L35,245L40,245L45,245L50,245L55,245L60,245L65,245L70,245L74,245L79,245L84,245L89,245L94,244L99,244L104,244L109,244L114,244L119,244L124,244L129,244L134,244L139,244L144,244L149,244L154,244L158,244L163,244L168,244L173,244L178,244L183,244L188,244L193,244L198,244L203,244L208,244L213,244L218,244L223,244L228,244L233,244L238,244L242,244L247,243L252,243L257,243L262,243L267,243L272,243L277,243L282,243L287,243L292,243L297,243L302,243L307,243L312,243L317,243L321,243L326,243L331,243L336,242L341,242L346,242L351,242L356,242L361,242L366,242L371,242L376,242L381,241L386,241L391,241L396,241L401,241L405,241L410,241L415,241L420,241L425,240L430,240L435,240L440,240L445,240L450,240L455,240L460,240L465,240L470,240L475,239L480,239L485,239L489,239L494,239L499,239L504,239L509,239L514,239L519,238L524,238L529,238L534,238L539,238L544,238L549,238L554,238L559,238L564,238L569,237L573,237L578,237L583,237L588,237L593,237L598,237L603,237L608,237L613,237L618,237L623,237L628,237L633,236L638,236L643,236L648,236L653,236L657,236L662,236L667,236L672,236L677,236L682,236L687,236L692,235L697,235L702,235L707,235L712,235L717,235L722,235L727,235L732,235L736,235L741,234L746,234L751,234L756,234L761,234L766,234L771,234L776,234L781,234L786,233L791,233L796,233L801,233L806,233L811,233L816,233L821,233L825,233L830,232L835,232L840,232L845,232L850,232L855,232L860,232L865,232L870,232L875,231L880,231L885,231L890,231L895,231L900,231L904,231L909,231L914,230L919,230L924,230L929,230L934,230L939,230L944,230L944,139L939,140L934,140L929,140L924,140L919,141L914,141L909,141L904,141L900,141L895,142L890,142L885,142L880,142L875,143L870,143L865,143L860,143L855,144L850,144L845,144L840,144L835,145L830,145L825,145L821,145L816,146L811,146L806,146L801,146L796,147L791,147L786,147L781,147L776,148L771,148L766,148L761,148L756,149L751,149L746,149L741,149L736,150L732,150L727,150L722,151L717,151L712,151L707,151L702,152L697,152L692,152L687,153L682,153L677,153L672,154L667,154L662,154L657,155L653,155L648,156L643,156L638,157L633,157L628,158L623,158L618,158L613,159L608,159L603,160L598,160L593,161L588,161L583,162L578,162L573,163L569,163L564,164L559,164L554,165L549,166L544,166L539,167L534,167L529,168L524,168L519,169L514,169L509,170L504,171L499,171L494,172L489,172L485,173L480,173L475,174L470,174L465,175L460,176L455,176L450,177L445,177L440,178L435,178L430,179L425,179L420,180L415,181L410,181L405,182L401,182L396,183L391,183L386,184L381,184L376,185L371,185L366,186L361,186L356,187L351,187L346,188L341,188L336,189L331,189L326,190L321,191L317,191L312,192L307,192L302,193L297,193L292,194L287,194L282,195L277,195L272,196L267,197L262,197L257,198L252,198L247,199L242,199L238,200L233,200L228,201L223,201L218,202L213,203L208,203L203,204L198,204L193,205L188,205L183,206L178,206L173,207L168,208L163,208L158,209L154,209L149,210L144,210L139,211L134,212L129,212L124,213L119,213L114,214L109,214L104,215L99,215L94,216L89,217L84,218L79,220L74,221L70,223L65,226L60,228L55,231L50,233L45,236L40,239L35,241L30,245Z"></path><path stroke="none" class="splitted-lines lines line-4" stroke-width="0" fill="rgb(62,255,143)" shape-rendering="geometricPrecision" d="M30,246L35,242L40,240L45,237L50,234L55,232L60,229L65,227L70,224L74,222L79,221L84,219L89,218L94,217L99,216L104,216L109,215L114,215L119,214L124,214L129,213L134,213L139,212L144,211L149,211L154,210L158,210L163,209L168,209L173,208L178,207L183,207L188,206L193,206L198,205L203,205L208,204L213,204L218,203L223,202L228,202L233,201L238,201L242,200L247,200L252,199L257,199L262,198L267,198L272,197L277,196L282,196L287,195L292,195L297,194L302,194L307,193L312,193L317,192L321,192L326,191L331,190L336,190L341,189L346,189L351,188L356,188L361,187L366,187L371,186L376,186L381,185L386,185L391,184L396,184L401,183L405,183L410,182L415,182L420,181L425,180L430,180L435,179L440,179L445,178L450,178L455,177L460,177L465,176L470,175L475,175L480,174L485,174L489,173L494,173L499,172L504,172L509,171L514,170L519,170L524,169L529,169L534,168L539,168L544,167L549,167L554,166L559,165L564,165L569,164L573,164L578,163L583,163L588,162L593,162L598,161L603,161L608,160L613,160L618,159L623,159L628,159L633,158L638,158L643,157L648,157L653,156L657,156L662,155L667,155L672,155L677,154L682,154L687,154L692,153L697,153L702,153L707,152L712,152L717,152L722,152L727,151L732,151L736,151L741,150L746,150L751,150L756,150L761,149L766,149L771,149L776,149L781,148L786,148L791,148L796,148L801,147L806,147L811,147L816,147L821,146L825,146L830,146L835,146L840,145L845,145L850,145L855,145L860,144L865,144L870,144L875,144L880,143L885,143L890,143L895,143L900,142L904,142L909,142L914,142L919,142L924,141L929,141L934,141L939,141L944,140L944,80L939,80L934,80L929,81L924,81L919,81L914,82L909,82L904,82L900,83L895,83L890,83L885,83L880,84L875,84L870,84L865,85L860,85L855,85L850,86L845,86L840,86L835,87L830,87L825,87L821,88L816,88L811,88L806,89L801,89L796,89L791,90L786,90L781,91L776,91L771,91L766,92L761,92L756,92L751,93L746,93L741,94L736,94L732,94L727,95L722,95L717,95L712,96L707,96L702,97L697,97L692,97L687,98L682,98L677,99L672,100L667,100L662,101L657,101L653,102L648,103L643,103L638,104L633,105L628,106L623,106L618,107L613,108L608,109L603,109L598,110L593,111L588,112L583,112L578,113L573,114L569,115L564,116L559,116L554,117L549,118L544,119L539,120L534,121L529,121L524,122L519,123L514,124L509,125L504,126L499,127L494,127L489,128L485,129L480,130L475,131L470,132L465,133L460,133L455,134L450,135L445,136L440,137L435,138L430,139L425,139L420,140L415,141L410,142L405,143L401,144L396,144L391,145L386,146L381,147L376,148L371,148L366,149L361,150L356,151L351,152L346,152L341,153L336,154L331,155L326,156L321,156L317,157L312,158L307,159L302,160L297,161L292,162L287,162L282,163L277,164L272,165L267,166L262,167L257,168L252,169L247,170L242,170L238,171L233,172L228,173L223,174L218,175L213,176L208,177L203,178L198,179L193,179L188,180L183,181L178,182L173,183L168,184L163,185L158,186L154,187L149,188L144,189L139,189L134,190L129,191L124,192L119,193L114,194L109,195L104,196L99,197L94,198L89,199L84,201L79,204L74,207L70,210L65,214L60,218L55,222L50,227L45,231L40,235L35,240L30,245Z"></path><path shape-rendering="geometricPrecision" class="simple-lines lines line-0" stroke="rgb(255,0,0)" stroke-width="2" fill="none" d="M30,245L35,249L40,252L45,255L50,258L55,262L60,265L65,268L70,271L74,273L79,275L84,277L89,278L94,279L99,280L104,281L109,282L114,282L119,283L124,284L129,284L134,285L139,286L144,286L149,287L154,288L158,288L163,289L168,290L173,290L178,291L183,292L188,292L193,293L198,294L203,294L208,295L213,296L218,296L223,297L228,298L233,299L238,299L242,300L247,301L252,301L257,302L262,303L267,303L272,304L277,305L282,305L287,306L292,307L297,307L302,308L307,309L312,309L317,310L321,311L326,311L331,312L336,312L341,313L346,314L351,314L356,315L361,316L366,316L371,317L376,318L381,318L386,319L391,320L396,321L401,321L405,322L410,323L415,323L420,324L425,325L430,326L435,327L440,327L445,328L450,329L455,330L460,330L465,331L470,332L475,333L480,334L485,334L489,335L494,336L499,337L504,338L509,338L514,339L519,340L524,340L529,341L534,342L539,342L544,343L549,344L554,344L559,345L564,346L569,346L573,347L578,347L583,348L588,348L593,348L598,349L603,349L608,350L613,350L618,350L623,351L628,351L633,351L638,351L643,351L648,352L653,352L657,352L662,352L667,352L672,352L677,352L682,351L687,351L692,351L697,351L702,350L707,350L712,349L717,349L722,348L727,348L732,347L736,347L741,347L746,346L751,346L756,345L761,345L766,344L771,344L776,343L781,343L786,342L791,342L796,341L801,340L806,340L811,339L816,339L821,338L825,338L830,337L835,337L840,336L845,336L850,335L855,334L860,334L865,333L870,333L875,332L880,332L885,331L890,330L895,330L900,329L904,329L909,328L914,327L919,327L924,326L929,325L934,325L939,324L944,324"></path><path shape-rendering="geometricPrecision" class="simple-lines lines line-1" stroke="rgb(255,0,0)" stroke-width="2" fill="none" d="M30,245L35,244L40,244L45,244L50,244L55,244L60,244L65,244L70,244L74,244L79,244L84,244L89,244L94,243L99,243L104,243L109,243L114,243L119,243L124,243L129,243L134,243L139,243L144,243L149,243L154,243L158,243L163,243L168,243L173,243L178,243L183,243L188,243L193,243L198,243L203,243L208,243L213,243L218,243L223,243L228,243L233,243L238,243L242,243L247,242L252,242L257,242L262,242L267,242L272,242L277,242L282,242L287,242L292,242L297,242L302,242L307,242L312,242L317,242L321,242L326,242L331,242L336,241L341,241L346,241L351,241L356,241L361,241L366,241L371,241L376,241L381,240L386,240L391,240L396,240L401,240L405,240L410,240L415,240L420,240L425,239L430,239L435,239L440,239L445,239L450,239L455,239L460,239L465,239L470,239L475,238L480,238L485,238L489,238L494,238L499,238L504,238L509,238L514,238L519,237L524,237L529,237L534,237L539,237L544,237L549,237L554,237L559,237L564,237L569,236L573,236L578,236L583,236L588,236L593,236L598,236L603,236L608,236L613,236L618,236L623,236L628,236L633,235L638,235L643,235L648,235L653,235L657,235L662,235L667,235L672,235L677,235L682,235L687,235L692,234L697,234L702,234L707,234L712,234L717,234L722,234L727,234L732,234L736,234L741,233L746,233L751,233L756,233L761,233L766,233L771,233L776,233L781,233L786,232L791,232L796,232L801,232L806,232L811,232L816,232L821,232L825,232L830,231L835,231L840,231L845,231L850,231L855,231L860,231L865,231L870,231L875,230L880,230L885,230L890,230L895,230L900,230L904,230L909,230L914,229L919,229L924,229L929,229L934,229L939,229L944,229"></path><path shape-rendering="geometricPrecision" class="simple-lines lines line-2" stroke="rgb(255,0,0)" stroke-width="2" fill="none" d="M30,245L35,240L40,235L45,231L50,227L55,222L60,218L65,214L70,210L74,207L79,204L84,201L89,199L94,198L99,197L104,196L109,195L114,194L119,193L124,192L129,191L134,190L139,189L144,189L149,188L154,187L158,186L163,185L168,184L173,183L178,182L183,181L188,180L193,179L198,179L203,178L208,177L213,176L218,175L223,174L228,173L233,172L238,171L242,170L247,170L252,169L257,168L262,167L267,166L272,165L277,164L282,163L287,162L292,162L297,161L302,160L307,159L312,158L317,157L321,156L326,156L331,155L336,154L341,153L346,152L351,152L356,151L361,150L366,149L371,148L376,148L381,147L386,146L391,145L396,144L401,144L405,143L410,142L415,141L420,140L425,139L430,139L435,138L440,137L445,136L450,135L455,134L460,133L465,133L470,132L475,131L480,130L485,129L489,128L494,127L499,127L504,126L509,125L514,124L519,123L524,122L529,121L534,121L539,120L544,119L549,118L554,117L559,116L564,116L569,115L573,114L578,113L583,112L588,112L593,111L598,110L603,109L608,109L613,108L618,107L623,106L628,106L633,105L638,104L643,103L648,103L653,102L657,101L662,101L667,100L672,100L677,99L682,98L687,98L692,97L697,97L702,97L707,96L712,96L717,95L722,95L727,95L732,94L736,94L741,94L746,93L751,93L756,92L761,92L766,92L771,91L776,91L781,91L786,90L791,90L796,89L801,89L806,89L811,88L816,88L821,88L825,87L830,87L835,87L840,86L845,86L850,86L855,85L860,85L865,85L870,84L875,84L880,84L885,83L890,83L895,83L900,83L904,82L909,82L914,82L919,81L924,81L929,81L934,80L939,80L944,80"></path><path shape-rendering="geometricPrecision" class="simple-lines lines line-3" stroke="rgb(0,0,255)" stroke-width="2" fill="none" d="M30,245L35,245L40,245L45,245L50,245L55,245L60,245L65,245L70,245L74,245L79,245L84,245L89,245L94,245L99,245L104,245L109,245L114,245L119,245L124,245L129,245L134,245L139,245L144,245L149,245L154,245L158,245L163,245L168,245L173,245L178,245L183,245L188,245L193,245L198,245L203,245L208,245L213,245L218,245L223,245L228,245L233,245L238,245L242,245L247,245L252,245L257,245L262,245L267,245L272,245L277,245L282,245L287,245L292,245L297,245L302,245L307,245L312,245L317,245L321,245L326,245L331,245L336,245L341,245L346,245L351,245L356,245L361,245L366,245L371,245L376,245L381,245L386,245L391,245L396,245L401,245L405,245L410,245L415,245L420,245L425,245L430,245L435,245L440,245L445,245L450,245L455,245L460,245L465,245L470,245L475,245L480,245L485,245L489,245L494,245L499,245L504,245L509,245L514,245L519,245L524,245L529,245L534,245L539,245L544,245L549,245L554,245L559,245L564,245L569,245L573,245L578,245L583,245L588,245L593,245L598,245L603,245L608,245L613,245L618,245L623,245L628,245L633,245L638,245L643,245L648,245L653,245L657,245L662,245L667,245L672,245L677,245L682,245L687,245L692,245L697,245L702,245L707,245L712,245L717,245L722,245L727,245L732,245L736,245L741,245L746,245L751,245L756,245L761,245L766,245L771,245L776,245L781,245L786,245L791,245L796,245L801,245L806,245L811,245L816,245L821,245L825,245L830,245L835,245L840,245L845,245L850,245L855,245L860,245L865,245L870,245L875,245L880,245L885,245L890,245L895,245L900,245L904,245L909,245L914,245L919,245L924,245L929,245L934,245L939,245L944,245"></path><g class="x axis" transform="translate(0, 40)"><g class="tick" transform="translate(96,0)" style="opacity: 1;"><line y2="-5" x2="0"></line><text dy="0em" y="-15" x="0" style="text-anchor: middle;">Jan 16</text></g><g class="tick" transform="translate(277,0)" style="opacity: 1;"><line y2="-5" x2="0"></line><text dy="0em" y="-15" x="0" style="text-anchor: middle;">Jan 17</text></g><g class="tick" transform="translate(458,0)" style="opacity: 1;"><line y2="-5" x2="0"></line><text dy="0em" y="-15" x="0" style="text-anchor: middle;">Jan 18</text></g><g class="tick" transform="translate(638,0)" style="opacity: 1;"><line y2="-5" x2="0"></line><text dy="0em" y="-15" x="0" style="text-anchor: middle;">Jan 19</text></g><g class="tick" transform="translate(818,0)" style="opacity: 1;"><line y2="-5" x2="0"></line><text dy="0em" y="-15" x="0" style="text-anchor: middle;">Jan 20</text></g><path class="domain" d="M30,-5V0H944V-5"></path></g><g class="y axis" transform="translate(30, 0)"><g class="tick" transform="translate(0,364)" style="opacity: 1;"><line x2="914" y2="0"></line><text x="5" y="-5" style="text-anchor: start;"></text></g><g class="tick base-line" transform="translate(0,245)" style="opacity: 1;"><line x2="914" y2="0"></line><text x="5" y="-5" style="text-anchor: start;"></text></g><g class="tick" transform="translate(0,126)" style="opacity: 1;"><line x2="914" y2="0"></line><text x="5" y="-5" style="text-anchor: start;"></text></g></g></svg>
https://jsfiddle.net/gqtuocbw/
I tried multiple stuff, like
shape-rendering="auto"
shape-rendering="geometricPrecision"
But nothing works for me, and when I see this http://bl.ocks.org/mbostock/4060954 I can't understand the issue.
When I will understand the underlying problem, I will update my post with examples that makes it more relevant for future readers.
Cheers.
EDIT (SOLUTION + EXPLANATIONS):
Find out in the following JSFiddle the resolved issue: https://jsfiddle.net/cf35rfy2/1/
So the problem was because of rangeRound() used with a simple interpolation('basis')
And the doc says:
linear.rangeRound(values)
Sets the scale's output range to the specified array of values, while also setting the scale's interpolator to d3.interpolateRound. This is a convenience routine for when the values output by the scale should be exact integers, such as to avoid antialiasing artifacts. It is also possible to round the output values manually after the scale is applied.
I guess that I should have used it with interpolateRound function.
Hope this will help someone. Don't hesitate to correct me if I said something wrong here; but anyhow this solved my issue (thanks to squeamish ossifrage answers)

I'm not sure what you mean by "crispy", but your jsfiddle example looks quite pixellated to me. It's quite easy to see why this is happening. Here's an excerpt from the d attribute of the first <path> element:
L944,324 L939,324 L934,325 L929,325 L924,326 L919,327 L914,327 L909,328 L904,329
L900,329 L895,330 L890,330
As you can see, the coordinates all have integer values, and the Y coordinate only changes intermittently. The result is a line that consists of many horizontal segments with little vertical jumps between each segment and the next. If you change these coordinates to floating point values with a couple of digits after the decimal point, then your lines will be smoother.
Here's an example:
<svg width="400" height="100" viewBox="0 0 200 50">
<g fill="none" stroke-width="2px">
<!-- Grey path with integer Y coordinates -->
<path d="M5 33 7 32 9 32 11 32 13 31 15 31 17 31 19 31 21 30 23 30 25 30 27 29 29 29 31 29
33 28 35 28 37 28 39 28 41 27 43 27 45 27 47 26 49 26 51 26 53 25 55 25 57 25 59
25 61 24 63 24 65 24 67 23 69 23 71 23 73 23 75 22 77 22 79 22 81 21 83 21 85 21
87 20 89 20 91 20 93 20 95 19 97 19 99 19 101 18 103 18 105 18 107 18 109 17 111
17 113 17 115 16 117 16 119 16 121 15 123 15 125 15 127 15 129 14 131 14 133 14
135 13 137 13 139 13 141 12 143 12 145 12 147 12 149 11 151 11 153 11 155 10 157
10 159 10 161 10 163 9 165 9 167 9 169 8 171 8 173 8 175 7 177 7 179 7 181 7 183
6 185 6 187 6 189 5 191 5 193 5 195 5 197 4 199 4" stroke="#888"/>
<!-- Blue path with floating-point Y coordinates -->
<path d="M5 43.12 7 42.82 9 42.52 11 42.23 13 41.93 15 41.64 17 41.34 19 41.05 21 40.75 23
40.45 25 40.16 27 39.86 29 39.57 31 39.27 33 38.98 35 38.68 37 38.38 39 38.09 41
37.79 43 37.50 45 37.20 47 36.90 49 36.61 51 36.31 53 36.02 55 35.72 57 35.43 59
35.13 61 34.83 63 34.54 65 34.24 67 33.95 69 33.65 71 33.36 73 33.06 75 32.76 77
32.47 79 32.17 81 31.88 83 31.58 85 31.29 87 30.99 89 30.69 91 30.40 93 30.10 95
29.81 97 29.51 99 29.21 101 28.92 103 28.62 105 28.33 107 28.03 109 27.74 111
27.44 113 27.14 115 26.85 117 26.55 119 26.26 121 25.96 123 25.67 125 25.37 127
25.07 129 24.78 131 24.48 133 24.19 135 23.89 137 23.60 139 23.30 141 23.00 143
22.71 145 22.41 147 22.12 149 21.82 151 21.52 153 21.23 155 20.93 157 20.64 159
20.34 161 20.05 163 19.75 165 19.45 167 19.16 169 18.86 171 18.57 173 18.27 175
17.98 177 17.68 179 17.38 181 17.09 183 16.79 185 16.50 187 16.20 189 15.91 191
15.61 193 15.31 195 15.02 197 14.72 199 14.43" stroke="#44c"/>
</g>
</svg>

CSS Scale Transform on an SVG element with a filter creates blurry result in firefox

If SVG element has any filter the vector image in FF not rendered clearly.
See example in FF and in Google Chrome:
http://jsfiddle.net/7cuwP/1/
<div id="1">
<svg version="1.1" style="width: 150px; height: 50px;" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
<defs>
<g id=":m12-18svjv0b7">
<path stroke="none" fill="rgb(255,0,255)" d="M-2.4 -9.9 L1.8 -9.9 1.8 11.75 -2.4 11.75 -2.4 -9.9 Z"/>
</g>
<g id=":m23-18svjv0b7">
<path stroke="none" fill="rgb(255,0,255)" d="M0 -6.5 Q2 -6.5 3.65 -5.6 5.3 -4.7 6.25 -3.1 7.25 -1.45 7.3 0.75 7.25 2.95 6.25 4.6 5.3 6.25 3.65 7.15 2 8.05 0 8.05 -2 8.05 -3.65 7.15 -5.3 6.25 -6.25 4.6 -7.25 2.95 -7.25 0.75 -7.25 -1.45 -6.25 -3.1 -5.3 -4.7 -3.65 -5.6 -2 -6.5 0 -6.5 M2.25 -1.55 Q1.35 -2.4 0 -2.4 -1.3 -2.4 -2.25 -1.55 -3.1 -0.7 -3.15 0.75 -3.1 2.25 -2.25 3.1 -1.3 3.95 0 3.95 1.35 3.95 2.25 3.1 3.15 2.25 3.15 0.75 3.15 -0.7 2.25 -1.55"/>
</g>
<g id=":m24-18svjv0b7">
<path stroke="none" fill="rgb(255,0,255)" d="M2.6 -1.05 L1.35 -2.2 -0.3 -2.6 -2 -2.2 -3.25 -1.05 Q-3.8 -0.3 -3.8 0.7 L-3.8 0.75 Q-3.8 1.75 -3.25 2.5 L-2 3.65 -0.3 4.05 1.35 3.7 2.6 2.55 Q3.1 1.8 3.1 0.7 3.1 -0.35 2.6 -1.05 M0.25 -6.45 L1.75 -5.85 Q2.55 -5.45 3.1 -4.7 L3.1 -6.25 7.25 -6.25 7.25 7.75 3.1 7.75 3.1 6.15 1.85 7.25 0.35 7.85 -1 8.05 Q-2.8 8 -4.4 7.15 -6.05 6.25 -7.05 4.65 -8.1 3 -8.1 0.75 -8.1 -1.55 -7.05 -3.15 -6.05 -4.8 -4.4 -5.65 -2.8 -6.55 -1 -6.55 L0.25 -6.45"/>
</g>
<g id=":m25-18svjv0b7">
<path stroke="none" fill="rgb(255,0,255)" d="M-0.4 1.4 Q-1.75 1.45 -2.65 2.3 -3.6 3.2 -3.6 4.75 -3.6 6.3 -2.65 7.25 -1.75 8.15 -0.4 8.15 L1.25 7.7 2.4 6.55 Q2.85 5.75 2.85 4.75 2.85 3.7 2.4 2.95 1.95 2.2 1.2 1.8 0.5 1.4 -0.4 1.4 M1.3 -2 Q2.4 -1.45 2.95 -0.5 L2.95 -9.85 7.1 -9.85 7.1 11.8 2.95 11.8 2.95 10.05 Q2.4 11.05 1.3 11.55 0.2 12.1 -1.15 12.1 -3 12.1 -4.5 11.2 -6.05 10.3 -7 8.7 -7.9 7.05 -7.95 4.85 -7.9 2.55 -7 0.95 -6.05 -0.7 -4.5 -1.6 -3 -2.5 -1.15 -2.5 L1.3 -2"/>
</g>
<g id=":m26-18svjv0b7">
<path stroke="none" fill="rgb(255,0,255)" d="M1.8 -2.8 L1.8 11.2 -2.35 11.2 -2.35 -2.8 1.8 -2.8 M1.55 -9.75 Q2.25 -9.05 2.3 -8 2.25 -6.95 1.55 -6.25 0.8 -5.55 -0.25 -5.55 -1.35 -5.55 -2.1 -6.25 -2.85 -6.95 -2.85 -8 -2.85 -9.05 -2.1 -9.75 -1.35 -10.4 -0.25 -10.45 0.8 -10.4 1.55 -9.75"/>
</g>
<g id=":m27-18svjv0b7">
<path stroke="none" fill="rgb(255,0,255)" d="M1.35 -6.45 Q3.75 -6.45 5.1 -5 6.45 -3.5 6.5 -0.55 L6.5 7.85 5.65 7.85 4.4 7.85 3.15 7.85 2.3 7.85 2.3 0.4 Q2.3 -1.05 1.6 -1.7 0.95 -2.4 -0.15 -2.4 -1.25 -2.45 -1.95 -1.8 -2.7 -1.15 -2.7 0.45 L-2.7 7.85 -6.9 7.85 -6.9 -6.15 -2.7 -6.15 -2.7 -4.15 Q-2.1 -5.2 -1 -5.8 0.1 -6.45 1.35 -6.45 Z"/>
</g>
<g id=":m28-18svjv0b7">
<path stroke="none" fill="rgb(255,0,255)" d="M1.4 -9.75 Q2.55 -9.25 3.1 -8.25 L3.1 -10 7.15 -10 7.15 2.05 Q7.15 6.55 5.05 8.8 3 11 -0.75 11 -3.1 10.95 -4.9 9.8 -6.75 8.65 -7.65 6.65 L-5.95 5.8 -4.3 5 Q-4.05 5.65 -3.45 6.15 L-2.2 6.95 -0.75 7.25 Q0.85 7.2 1.7 6.55 2.6 5.9 2.9 4.8 3.2 3.7 3.1 2.25 L2.1 3.35 Q1.45 3.8 0.65 4.05 L-1.1 4.3 Q-2.9 4.3 -4.5 3.4 -6.05 2.5 -7.05 0.9 -8.05 -0.75 -8.05 -2.95 -8.05 -5.25 -7.05 -6.85 -6.05 -8.5 -4.5 -9.4 -2.9 -10.3 -1.1 -10.3 0.25 -10.3 1.4 -9.75 M3 -3.05 Q3 -4.1 2.55 -4.85 L1.3 -5.95 Q0.5 -6.35 -0.35 -6.35 L-2 -5.95 -3.25 -4.8 Q-3.7 -4.05 -3.7 -3.05 -3.7 -2 -3.25 -1.2 -2.8 -0.45 -2 -0.05 L-0.35 0.4 1.3 -0.05 2.5 -1.25 Q3 -2 3 -3.05"/>
</g>
</defs>
<g>
<filter id="18t4a8dd8-2">
<feComponentTransfer color-interpolation-filters="sRGB">
<feFuncA type="linear" intercept="0" slope="1"/>
<feFuncR type="linear" intercept="1" slope="0"/>
<feFuncG type="linear" intercept="0" slope="1"/>
<feFuncB type="linear" intercept="1" slope="0"/>
</feComponentTransfer>
</filter>
<g transform="matrix(1 0 0 1 50 20)" filter="url(#18t4a8dd8-2)">
<g>
<use id="s29d1m12" x="0" y="0" xlink:href="#:m12-18svjv0b7" transform="matrix(1 0 0 1 -29.1 -1.25)"></use>
<use id="s29d2m23" x="0" y="0" xlink:href="#:m23-18svjv0b7" transform="matrix(1 0 0 1 -17 2.7)"></use>
<use id="s29d3m24" x="0" y="0" xlink:href="#:m24-18svjv0b7" transform="matrix(0.9962 -0.0839 0.0781 0.9273 0.55 0.2)"></use>
<use id="s29d4m25" x="0" y="0" xlink:href="#:m25-18svjv0b7" transform="matrix(0.9998 0.0179 -0.0179 0.9998 18.75 -2)"></use>
<use id="s29d5m26" x="0" y="0" xlink:href="#:m26-18svjv0b7" transform="matrix(1 0 0 1 32 -0.65)"></use>
<use id="s29d6m27" x="0" y="0" xlink:href="#:m27-18svjv0b7" transform="matrix(1 0 0 1 44.6 2.65)"></use>
<use id="s29d7m28" x="0" y="0" xlink:href="#:m28-18svjv0b7" transform="matrix(1 0 0 1 61.95 6.45)"></use>
</g>
</g>
</g>
</svg>
</div>
<div id="2" style="-webkit-transform: matrix(2,0,0,2,400,50); transform: matrix(2,0,0,2,400,50);">
<svg version="1.1" style="width: 150px; height: 100px;" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
<defs>
<g id=":m12-18svjv0b7">
<path stroke="none" fill="rgb(255,0,255)" d="M-2.4 -9.9 L1.8 -9.9 1.8 11.75 -2.4 11.75 -2.4 -9.9 Z"/>
</g>
<g id=":m23-18svjv0b7">
<path stroke="none" fill="rgb(255,0,255)" d="M0 -6.5 Q2 -6.5 3.65 -5.6 5.3 -4.7 6.25 -3.1 7.25 -1.45 7.3 0.75 7.25 2.95 6.25 4.6 5.3 6.25 3.65 7.15 2 8.05 0 8.05 -2 8.05 -3.65 7.15 -5.3 6.25 -6.25 4.6 -7.25 2.95 -7.25 0.75 -7.25 -1.45 -6.25 -3.1 -5.3 -4.7 -3.65 -5.6 -2 -6.5 0 -6.5 M2.25 -1.55 Q1.35 -2.4 0 -2.4 -1.3 -2.4 -2.25 -1.55 -3.1 -0.7 -3.15 0.75 -3.1 2.25 -2.25 3.1 -1.3 3.95 0 3.95 1.35 3.95 2.25 3.1 3.15 2.25 3.15 0.75 3.15 -0.7 2.25 -1.55"/>
</g>
<g id=":m24-18svjv0b7">
<path stroke="none" fill="rgb(255,0,255)" d="M2.6 -1.05 L1.35 -2.2 -0.3 -2.6 -2 -2.2 -3.25 -1.05 Q-3.8 -0.3 -3.8 0.7 L-3.8 0.75 Q-3.8 1.75 -3.25 2.5 L-2 3.65 -0.3 4.05 1.35 3.7 2.6 2.55 Q3.1 1.8 3.1 0.7 3.1 -0.35 2.6 -1.05 M0.25 -6.45 L1.75 -5.85 Q2.55 -5.45 3.1 -4.7 L3.1 -6.25 7.25 -6.25 7.25 7.75 3.1 7.75 3.1 6.15 1.85 7.25 0.35 7.85 -1 8.05 Q-2.8 8 -4.4 7.15 -6.05 6.25 -7.05 4.65 -8.1 3 -8.1 0.75 -8.1 -1.55 -7.05 -3.15 -6.05 -4.8 -4.4 -5.65 -2.8 -6.55 -1 -6.55 L0.25 -6.45"/>
</g>
<g id=":m25-18svjv0b7">
<path stroke="none" fill="rgb(255,0,255)" d="M-0.4 1.4 Q-1.75 1.45 -2.65 2.3 -3.6 3.2 -3.6 4.75 -3.6 6.3 -2.65 7.25 -1.75 8.15 -0.4 8.15 L1.25 7.7 2.4 6.55 Q2.85 5.75 2.85 4.75 2.85 3.7 2.4 2.95 1.95 2.2 1.2 1.8 0.5 1.4 -0.4 1.4 M1.3 -2 Q2.4 -1.45 2.95 -0.5 L2.95 -9.85 7.1 -9.85 7.1 11.8 2.95 11.8 2.95 10.05 Q2.4 11.05 1.3 11.55 0.2 12.1 -1.15 12.1 -3 12.1 -4.5 11.2 -6.05 10.3 -7 8.7 -7.9 7.05 -7.95 4.85 -7.9 2.55 -7 0.95 -6.05 -0.7 -4.5 -1.6 -3 -2.5 -1.15 -2.5 L1.3 -2"/>
</g>
<g id=":m26-18svjv0b7">
<path stroke="none" fill="rgb(255,0,255)" d="M1.8 -2.8 L1.8 11.2 -2.35 11.2 -2.35 -2.8 1.8 -2.8 M1.55 -9.75 Q2.25 -9.05 2.3 -8 2.25 -6.95 1.55 -6.25 0.8 -5.55 -0.25 -5.55 -1.35 -5.55 -2.1 -6.25 -2.85 -6.95 -2.85 -8 -2.85 -9.05 -2.1 -9.75 -1.35 -10.4 -0.25 -10.45 0.8 -10.4 1.55 -9.75"/>
</g>
<g id=":m27-18svjv0b7">
<path stroke="none" fill="rgb(255,0,255)" d="M1.35 -6.45 Q3.75 -6.45 5.1 -5 6.45 -3.5 6.5 -0.55 L6.5 7.85 5.65 7.85 4.4 7.85 3.15 7.85 2.3 7.85 2.3 0.4 Q2.3 -1.05 1.6 -1.7 0.95 -2.4 -0.15 -2.4 -1.25 -2.45 -1.95 -1.8 -2.7 -1.15 -2.7 0.45 L-2.7 7.85 -6.9 7.85 -6.9 -6.15 -2.7 -6.15 -2.7 -4.15 Q-2.1 -5.2 -1 -5.8 0.1 -6.45 1.35 -6.45 Z"/>
</g>
<g id=":m28-18svjv0b7">
<path stroke="none" fill="rgb(255,0,255)" d="M1.4 -9.75 Q2.55 -9.25 3.1 -8.25 L3.1 -10 7.15 -10 7.15 2.05 Q7.15 6.55 5.05 8.8 3 11 -0.75 11 -3.1 10.95 -4.9 9.8 -6.75 8.65 -7.65 6.65 L-5.95 5.8 -4.3 5 Q-4.05 5.65 -3.45 6.15 L-2.2 6.95 -0.75 7.25 Q0.85 7.2 1.7 6.55 2.6 5.9 2.9 4.8 3.2 3.7 3.1 2.25 L2.1 3.35 Q1.45 3.8 0.65 4.05 L-1.1 4.3 Q-2.9 4.3 -4.5 3.4 -6.05 2.5 -7.05 0.9 -8.05 -0.75 -8.05 -2.95 -8.05 -5.25 -7.05 -6.85 -6.05 -8.5 -4.5 -9.4 -2.9 -10.3 -1.1 -10.3 0.25 -10.3 1.4 -9.75 M3 -3.05 Q3 -4.1 2.55 -4.85 L1.3 -5.95 Q0.5 -6.35 -0.35 -6.35 L-2 -5.95 -3.25 -4.8 Q-3.7 -4.05 -3.7 -3.05 -3.7 -2 -3.25 -1.2 -2.8 -0.45 -2 -0.05 L-0.35 0.4 1.3 -0.05 2.5 -1.25 Q3 -2 3 -3.05"/>
</g>
</defs>
<g>
<filter id="18t4a8dd8-2">
<feComponentTransfer color-interpolation-filters="sRGB">
<feFuncA type="linear" intercept="0" slope="1"/>
<feFuncR type="linear" intercept="1" slope="0"/>
<feFuncG type="linear" intercept="0" slope="1"/>
<feFuncB type="linear" intercept="1" slope="0"/>
</feComponentTransfer>
</filter>
<g transform="matrix(1 0 0 1 50 20)" filter="url(#18t4a8dd8-2)">
<g>
<use id="s29d1m12" x="0" y="0" xlink:href="#:m12-18svjv0b7" transform="matrix(1 0 0 1 -29.1 -1.25)"></use>
<use id="s29d2m23" x="0" y="0" xlink:href="#:m23-18svjv0b7" transform="matrix(1 0 0 1 -17 2.7)"></use>
<use id="s29d3m24" x="0" y="0" xlink:href="#:m24-18svjv0b7" transform="matrix(0.9962 -0.0839 0.0781 0.9273 0.55 0.2)"></use>
<use id="s29d4m25" x="0" y="0" xlink:href="#:m25-18svjv0b7" transform="matrix(0.9998 0.0179 -0.0179 0.9998 18.75 -2)"></use>
<use id="s29d5m26" x="0" y="0" xlink:href="#:m26-18svjv0b7" transform="matrix(1 0 0 1 32 -0.65)"></use>
<use id="s29d6m27" x="0" y="0" xlink:href="#:m27-18svjv0b7" transform="matrix(1 0 0 1 44.6 2.65)"></use>
<use id="s29d7m28" x="0" y="0" xlink:href="#:m28-18svjv0b7" transform="matrix(1 0 0 1 61.95 6.45)"></use>
</g>
</g>
<g transform="matrix(1 0 0 1 50 50)">
<g>
<use id="s29d1m12" x="0" y="0" xlink:href="#:m12-18svjv0b7" transform="matrix(1 0 0 1 -29.1 -1.25)"></use>
<use id="s29d2m23" x="0" y="0" xlink:href="#:m23-18svjv0b7" transform="matrix(1 0 0 1 -17 2.7)"></use>
<use id="s29d3m24" x="0" y="0" xlink:href="#:m24-18svjv0b7" transform="matrix(0.9962 -0.0839 0.0781 0.9273 0.55 0.2)"></use>
<use id="s29d4m25" x="0" y="0" xlink:href="#:m25-18svjv0b7" transform="matrix(0.9998 0.0179 -0.0179 0.9998 18.75 -2)"></use>
<use id="s29d5m26" x="0" y="0" xlink:href="#:m26-18svjv0b7" transform="matrix(1 0 0 1 32 -0.65)"></use>
<use id="s29d6m27" x="0" y="0" xlink:href="#:m27-18svjv0b7" transform="matrix(1 0 0 1 44.6 2.65)"></use>
<use id="s29d7m28" x="0" y="0" xlink:href="#:m28-18svjv0b7" transform="matrix(1 0 0 1 61.95 6.45)"></use>
</g>
</g>
</g>
</svg>
</div>
1-st element has filter and no css-transforms
2-nd element has filter and css-transform (scale and translate)
3-rd element has no filter and has css-transform (scale and translate)
How fix this bug in FF?
PS: This behavior not depend on css-transforms, its made just for an example.

SVG Filters convert vector graphics to bitmaps. When you apply a scale transform higher in the nesting hierarchy, you're going to see the result as if a bitmap is scaled up - hence the blurriness
Fix this by scaling the SVG path with an SVG transform before, or at the same time as you apply the filter.
In this case, remove the CSS transform scale which is applied to the div wrapper, and adjust the transform that's on the same element as the filter to scale the element without the blurry bitmapped result.
Something like the following:
http://codepen.io/anon/pen/HbzhK?editors=100
<div id="2" >
<svg version="1.1" style="width: 150px; height: 100px;" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
<defs>
<g id=":m12-18svjv0b7">
<path stroke="none" fill="rgb(255,0,255)" d="M-2.4 -9.9 L1.8 -9.9 1.8 11.75 -2.4 11.75 -2.4 -9.9 Z"/>
</g>
<g id=":m23-18svjv0b7">
<path stroke="none" fill="rgb(255,0,255)" d="M0 -6.5 Q2 -6.5 3.65 -5.6 5.3 -4.7 6.25 -3.1 7.25 -1.45 7.3 0.75 7.25 2.95 6.25 4.6 5.3 6.25 3.65 7.15 2 8.05 0 8.05 -2 8.05 -3.65 7.15 -5.3 6.25 -6.25 4.6 -7.25 2.95 -7.25 0.75 -7.25 -1.45 -6.25 -3.1 -5.3 -4.7 -3.65 -5.6 -2 -6.5 0 -6.5 M2.25 -1.55 Q1.35 -2.4 0 -2.4 -1.3 -2.4 -2.25 -1.55 -3.1 -0.7 -3.15 0.75 -3.1 2.25 -2.25 3.1 -1.3 3.95 0 3.95 1.35 3.95 2.25 3.1 3.15 2.25 3.15 0.75 3.15 -0.7 2.25 -1.55"/>
</g>
<g id=":m24-18svjv0b7">
<path stroke="none" fill="rgb(255,0,255)" d="M2.6 -1.05 L1.35 -2.2 -0.3 -2.6 -2 -2.2 -3.25 -1.05 Q-3.8 -0.3 -3.8 0.7 L-3.8 0.75 Q-3.8 1.75 -3.25 2.5 L-2 3.65 -0.3 4.05 1.35 3.7 2.6 2.55 Q3.1 1.8 3.1 0.7 3.1 -0.35 2.6 -1.05 M0.25 -6.45 L1.75 -5.85 Q2.55 -5.45 3.1 -4.7 L3.1 -6.25 7.25 -6.25 7.25 7.75 3.1 7.75 3.1 6.15 1.85 7.25 0.35 7.85 -1 8.05 Q-2.8 8 -4.4 7.15 -6.05 6.25 -7.05 4.65 -8.1 3 -8.1 0.75 -8.1 -1.55 -7.05 -3.15 -6.05 -4.8 -4.4 -5.65 -2.8 -6.55 -1 -6.55 L0.25 -6.45"/>
</g>
<g id=":m25-18svjv0b7">
<path stroke="none" fill="rgb(255,0,255)" d="M-0.4 1.4 Q-1.75 1.45 -2.65 2.3 -3.6 3.2 -3.6 4.75 -3.6 6.3 -2.65 7.25 -1.75 8.15 -0.4 8.15 L1.25 7.7 2.4 6.55 Q2.85 5.75 2.85 4.75 2.85 3.7 2.4 2.95 1.95 2.2 1.2 1.8 0.5 1.4 -0.4 1.4 M1.3 -2 Q2.4 -1.45 2.95 -0.5 L2.95 -9.85 7.1 -9.85 7.1 11.8 2.95 11.8 2.95 10.05 Q2.4 11.05 1.3 11.55 0.2 12.1 -1.15 12.1 -3 12.1 -4.5 11.2 -6.05 10.3 -7 8.7 -7.9 7.05 -7.95 4.85 -7.9 2.55 -7 0.95 -6.05 -0.7 -4.5 -1.6 -3 -2.5 -1.15 -2.5 L1.3 -2"/>
</g>
<g id=":m26-18svjv0b7">
<path stroke="none" fill="rgb(255,0,255)" d="M1.8 -2.8 L1.8 11.2 -2.35 11.2 -2.35 -2.8 1.8 -2.8 M1.55 -9.75 Q2.25 -9.05 2.3 -8 2.25 -6.95 1.55 -6.25 0.8 -5.55 -0.25 -5.55 -1.35 -5.55 -2.1 -6.25 -2.85 -6.95 -2.85 -8 -2.85 -9.05 -2.1 -9.75 -1.35 -10.4 -0.25 -10.45 0.8 -10.4 1.55 -9.75"/>
</g>
<g id=":m27-18svjv0b7">
<path stroke="none" fill="rgb(255,0,255)" d="M1.35 -6.45 Q3.75 -6.45 5.1 -5 6.45 -3.5 6.5 -0.55 L6.5 7.85 5.65 7.85 4.4 7.85 3.15 7.85 2.3 7.85 2.3 0.4 Q2.3 -1.05 1.6 -1.7 0.95 -2.4 -0.15 -2.4 -1.25 -2.45 -1.95 -1.8 -2.7 -1.15 -2.7 0.45 L-2.7 7.85 -6.9 7.85 -6.9 -6.15 -2.7 -6.15 -2.7 -4.15 Q-2.1 -5.2 -1 -5.8 0.1 -6.45 1.35 -6.45 Z"/>
</g>
<g id=":m28-18svjv0b7">
<path stroke="none" fill="rgb(255,0,255)" d="M1.4 -9.75 Q2.55 -9.25 3.1 -8.25 L3.1 -10 7.15 -10 7.15 2.05 Q7.15 6.55 5.05 8.8 3 11 -0.75 11 -3.1 10.95 -4.9 9.8 -6.75 8.65 -7.65 6.65 L-5.95 5.8 -4.3 5 Q-4.05 5.65 -3.45 6.15 L-2.2 6.95 -0.75 7.25 Q0.85 7.2 1.7 6.55 2.6 5.9 2.9 4.8 3.2 3.7 3.1 2.25 L2.1 3.35 Q1.45 3.8 0.65 4.05 L-1.1 4.3 Q-2.9 4.3 -4.5 3.4 -6.05 2.5 -7.05 0.9 -8.05 -0.75 -8.05 -2.95 -8.05 -5.25 -7.05 -6.85 -6.05 -8.5 -4.5 -9.4 -2.9 -10.3 -1.1 -10.3 0.25 -10.3 1.4 -9.75 M3 -3.05 Q3 -4.1 2.55 -4.85 L1.3 -5.95 Q0.5 -6.35 -0.35 -6.35 L-2 -5.95 -3.25 -4.8 Q-3.7 -4.05 -3.7 -3.05 -3.7 -2 -3.25 -1.2 -2.8 -0.45 -2 -0.05 L-0.35 0.4 1.3 -0.05 2.5 -1.25 Q3 -2 3 -3.05"/>
</g>
</defs>
<g>
<filter id="18t4a8dd8-2">
<feComponentTransfer color-interpolation-filters="sRGB">
<feFuncA type="linear" intercept="0" slope="1"/>
<feFuncR type="linear" intercept="1" slope="0"/>
<feFuncG type="linear" intercept="0" slope="1"/>
<feFuncB type="linear" intercept="1" slope="0"/>
</feComponentTransfer>
</filter>
<g transform="matrix(2 0 0 2 50 20)" filter="url(#18t4a8dd8-2)">
etc.

Develop Reference

ruby bash windows laravel spring algorithm oracle macos go visual-studio

Convert path svg animation to pure css animation - animation

Related

SVG animation on Safari runs with low fps

Convert SVG with image not working in safari

How does SVG affect border rendering in Chrome 60 / Windows 7?

SVG chart generated through D3 not crispy

CSS Scale Transform on an SVG element with a filter creates blurry result in firefox

Categories

Resources