SVG animation on Safari runs with low fps - animation
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!
Related
Issue displaying inline SVG as src attribute to <img> tag [duplicate]
This question already has answers here: SVG data image not working as a background-image in a pseudo element (4 answers) Closed last year. SVG alone works, but not as inline with src attribute to <img> tag. <img src='data:image/svg+xml;charset=utf-8,<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 9.14453C0 9.60156 0.175781 10.0234 0.492188 10.3398L7.91016 17.7578C8.57812 18.4258 9.66797 18.4258 10.3008 17.7578L17.4727 10.5859C18.1406 9.95312 18.1406 8.86328 17.4727 8.19531L10.0547 0.777344C9.73828 0.460938 9.31641 0.25 8.85938 0.25H1.6875C0.738281 0.25 0 1.02344 0 1.9375V9.14453ZM3.9375 2.5C4.85156 2.5 5.625 3.27344 5.625 4.1875C5.625 5.13672 4.85156 5.875 3.9375 5.875C2.98828 5.875 2.25 5.13672 2.25 4.1875C2.25 3.27344 2.98828 2.5 3.9375 2.5Z" fill="#D40026"/></svg>'/>
You have to escape all characters that can be used in a URI In modern browsers you only need to escape the # character in SVG That means #D40026 needs to become %23D40026 See: https://yoksel.github.io/url-encoder/ <svg width="19" height="19" viewBox="0 0 190 190" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M0 91C0 96 2 100 5 103L79 178C86 184 97 184 103 178L175 106C181 100 181 89 175 82L101 8C97 5 93 3 89 3H17C7 3 0 10 0 19V91ZM39 25C49 25 56 33 56 42 56 51 49 59 39 59 30 59 23 51 23 42 23 33 30 25 39 25Z" fill="#D40026"/> </svg> <img src='data:image/svg+xml;charset=utf-8,<svg width="19" height="19" viewBox="0 0 190 190" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 91C0 96 2 100 5 103L79 178C86 184 97 184 103 178L175 106C181 100 181 89 175 82L101 8C97 5 93 3 89 3H17C7 3 0 10 0 19V91ZM39 25C49 25 56 33 56 42 56 51 49 59 39 59 30 59 23 51 23 42 23 33 30 25 39 25Z" fill="firebrick"/></svg>'/> <img src='data:image/svg+xml;charset=utf-8,<svg width="19" height="19" viewBox="0 0 190 190" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 91C0 96 2 100 5 103L79 178C86 184 97 184 103 178L175 106C181 100 181 89 175 82L101 8C97 5 93 3 89 3H17C7 3 0 10 0 19V91ZM39 25C49 25 56 33 56 42 56 51 49 59 39 59 30 59 23 51 23 42 23 33 30 25 39 25Z" fill="%23D40026"/></svg>'/>
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?
Convert path svg animation to pure css 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>
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.