feat: Support % length values in SVG CSS animations (#9011)

## Summary

There was an issue with propagation of SVG dimensions before, which was
finally fixed in
[this](software-mansion/react-native-svg#2802)
PR. Thanks to these changes, we are able to support `%` in the same way
as for non-svg components and don't have to use the separate value
struct `SVGLength`.

## Test plan

I went through all SVG-related examples in the example app, adjusted
descriptions stating that `%` aren't supported (which isn't true
anymore) and tested that everything works as expected now.

---------

Co-authored-by: Jakub Wiśniewski <119816982+wisniewskij@users.noreply.github.com>

Author: MatiPl01

apps/common-app/package.json

@@ -41,7 +41,7 @@
     "react-native-reanimated": "workspace:*",
     "react-native-safe-area-context": "5.6.1",
     "react-native-screens": "4.19.0-nightly-20251125-46052f31e",
-    "react-native-svg": "15.14.0",
+    "react-native-svg": "15.15.3",
     "react-native-worklets": "workspace:*",
     "react-strict-dom": "0.0.54"
   },

apps/common-app/src/apps/css/examples/animations/screens/animatedProperties/svg/Circle.tsx

@@ -62,7 +62,7 @@ export default function CircleExample() {
                 },
                 {
                   description:
-                    'Interpolation between absolute and relative values is **not supported** in SVG, thus the circle radius is changed **abruptly**',
+                    'Smoothly interpolates between an absolute and a percentage value by resolving them to the same unit',
                   keyframes: {
                     from: {
                       r: 10,
@@ -106,7 +106,7 @@ export default function CircleExample() {
                 },
                 {
                   description:
-                    'Interpolation between absolute and relative values is not supported in SVG, thus the circle position is changed abruptly',
+                    'Smoothly interpolates between an absolute and a percentage value by resolving them to the same unit',
                   keyframes: {
                     from: {
                       cx: 50,
@@ -145,7 +145,7 @@ export default function CircleExample() {
                 },
                 {
                   description:
-                    'Interpolation between absolute and relative values is not supported in SVG, thus the circle position is changed abruptly',
+                    'Smoothly interpolates between an absolute and a percentage value by resolving them to the same unit',
                   keyframes: {
                     from: {
                       cy: 50,

apps/common-app/src/apps/css/examples/animations/screens/animatedProperties/svg/Ellipse.tsx

@@ -51,7 +51,7 @@ export default function EllipseExample() {
                 },
                 {
                   description:
-                    'Interpolation between absolute and relative values is **not supported** in SVG, thus the ellipse radii are changed **abruptly**',
+                    'Smoothly interpolates between absolute and percentage values by resolving them to the same unit',
                   keyframes: {
                     from: {
                       rx: 10,
@@ -107,7 +107,7 @@ export default function EllipseExample() {
                 },
                 {
                   description:
-                    'Interpolation between absolute and relative values is **not supported** in SVG, thus the horizontal radius is changed **abruptly**',
+                    'Smoothly interpolates between an absolute and a percentage value by resolving them to the same unit',
                   keyframes: {
                     from: {
                       rx: 10,
@@ -146,7 +146,7 @@ export default function EllipseExample() {
                 },
                 {
                   description:
-                    'Interpolation between absolute and relative values is **not supported** in SVG, thus the vertical radius is changed **abruptly**',
+                    'Smoothly interpolates between an absolute and a percentage value by resolving them to the same unit',
                   keyframes: {
                     from: {
                       ry: 10,
@@ -190,7 +190,7 @@ export default function EllipseExample() {
                 },
                 {
                   description:
-                    'Interpolation between absolute and relative values is not supported in SVG, thus the ellipse position is changed abruptly',
+                    'Smoothly interpolates between an absolute and a percentage value by resolving them to the same unit',
                   keyframes: {
                     from: {
                       cx: 50,
@@ -229,7 +229,7 @@ export default function EllipseExample() {
                 },
                 {
                   description:
-                    'Interpolation between absolute and relative values is not supported in SVG, thus the ellipse position is changed abruptly',
+                    'Smoothly interpolates between an absolute and a percentage value by resolving them to the same unit',
                   keyframes: {
                     from: {
                       cy: 50,

apps/common-app/src/apps/css/examples/animations/screens/animatedProperties/svg/Image.tsx

@@ -67,7 +67,7 @@ export default function ImageExample() {
                 },
                 {
                   description:
-                    'Interpolation between absolute and relative values is **not supported** in SVG, thus the X position is changed **abruptly**',
+                    'Smoothly interpolates between an absolute and a percentage value by resolving them to the same unit',
                   keyframes: {
                     from: {
                       x: 20,
@@ -107,7 +107,7 @@ export default function ImageExample() {
                 },
                 {
                   description:
-                    'Interpolation between absolute and relative values is **not supported** in SVG, thus the Y position is changed **abruptly**',
+                    'Smoothly interpolates between an absolute and a percentage value by resolving them to the same unit',
                   keyframes: {
                     from: {
                       y: 20,
@@ -159,7 +159,7 @@ export default function ImageExample() {
                 },
                 {
                   description:
-                    'Interpolation between absolute and relative values is **not supported** in SVG, thus the width is changed **abruptly**',
+                    'Smoothly interpolates between an absolute and a percentage value by resolving them to the same unit',
                   keyframes: {
                     from: {
                       width: 60,
@@ -200,7 +200,7 @@ export default function ImageExample() {
                 },
                 {
                   description:
-                    'Interpolation between absolute and relative values is **not supported** in SVG, thus the height is changed **abruptly**',
+                    'Smoothly interpolates between an absolute and a percentage value by resolving them to the same unit',
                   keyframes: {
                     from: {
                       height: 60,

apps/common-app/src/apps/css/examples/animations/screens/animatedProperties/svg/Line.tsx

@@ -61,7 +61,7 @@ export default function LineExample() {
                 },
                 {
                   description:
-                    'Interpolation between absolute and relative values is **not supported** in SVG, thus the start X position is changed **abruptly**',
+                    'Smoothly interpolates between an absolute and a percentage value by resolving them to the same unit',
                   keyframes: {
                     from: {
                       x1: 20,
@@ -100,7 +100,7 @@ export default function LineExample() {
                 },
                 {
                   description:
-                    'Interpolation between absolute and relative values is **not supported** in SVG, thus the start Y position is changed **abruptly**',
+                    'Smoothly interpolates between an absolute and a percentage value by resolving them to the same unit',
                   keyframes: {
                     from: {
                       y1: 15,
@@ -144,7 +144,7 @@ export default function LineExample() {
                 },
                 {
                   description:
-                    'Interpolation between absolute and relative values is **not supported** in SVG, thus the end X position is changed **abruptly**',
+                    'Smoothly interpolates between an absolute and a percentage value by resolving them to the same unit',
                   keyframes: {
                     from: {
                       x2: 80,
@@ -183,7 +183,7 @@ export default function LineExample() {
                 },
                 {
                   description:
-                    'Interpolation between absolute and relative values is **not supported** in SVG, thus the end Y position is changed **abruptly**',
+                    'Smoothly interpolates between an absolute and a percentage value by resolving them to the same unit',
                   keyframes: {
                     from: {
                       y2: 85,

apps/common-app/src/apps/css/examples/animations/screens/animatedProperties/svg/Rect.tsx

@@ -61,7 +61,7 @@ export default function RectExample() {
                 },
                 {
                   description:
-                    'Interpolation between absolute and relative values is **not supported** in SVG, thus the X position is changed **abruptly**',
+                    'Smoothly interpolates between an absolute and a percentage value by resolving them to the same unit',
                   keyframes: {
                     from: {
                       x: 20,
@@ -101,7 +101,7 @@ export default function RectExample() {
                 },
                 {
                   description:
-                    'Interpolation between absolute and relative values is **not supported** in SVG, thus the Y position is changed **abruptly**',
+                    'Smoothly interpolates between an absolute and a percentage value by resolving them to the same unit',
                   keyframes: {
                     from: {
                       y: 20,
@@ -153,7 +153,7 @@ export default function RectExample() {
                 },
                 {
                   description:
-                    'Interpolation between absolute and relative values is **not supported** in SVG, thus the width is changed **abruptly**',
+                    'Smoothly interpolates between an absolute and a percentage value by resolving them to the same unit',
                   keyframes: {
                     from: {
                       width: 60,
@@ -194,7 +194,7 @@ export default function RectExample() {
                 },
                 {
                   description:
-                    'Interpolation between absolute and relative values is **not supported** in SVG, thus the height is changed **abruptly**',
+                    'Smoothly interpolates between an absolute and a percentage value by resolving them to the same unit',
                   keyframes: {
                     from: {
                       height: 60,
@@ -239,7 +239,7 @@ export default function RectExample() {
                 },
                 {
                   description:
-                    'Interpolation between absolute and relative values is **not supported** in SVG, thus the horizontal radius is changed **abruptly**',
+                    'Smoothly interpolates between an absolute and a percentage value by resolving them to the same unit',
                   keyframes: {
                     from: {
                       rx: 5,
@@ -279,7 +279,7 @@ export default function RectExample() {
                 },
                 {
                   description:
-                    'Interpolation between absolute and relative values is **not supported** in SVG, thus the vertical radius is changed **abruptly**',
+                    'Smoothly interpolates between an absolute and a percentage value by resolving them to the same unit',
                   keyframes: {
                     from: {
                       ry: 5,

apps/common-app/src/apps/css/examples/animations/screens/animatedProperties/svg/common/Stroke.tsx

@@ -171,6 +171,34 @@ export default function StrokeExample() {
               },
               title: 'Array value with different number of elements',
             },
+            {
+              keyframes: {
+                from: {
+                  strokeDasharray: ['10%', '5%'],
+                },
+                to: {
+                  strokeDasharray: ['25%', '12%'],
+                },
+              },
+              props: {
+                strokeWidth: 5,
+              },
+              title: 'Percentage values',
+            },
+            {
+              keyframes: {
+                from: {
+                  strokeDasharray: [8, '15%'],
+                },
+                to: {
+                  strokeDasharray: ['5%', 5],
+                },
+              },
+              props: {
+                strokeWidth: 5,
+              },
+              title: 'Mixed values (number + percentage)',
+            },
           ],
           title: 'strokeDasharray',
         },

docs/docs-reanimated/package.json

@@ -57,7 +57,7 @@
     "react-native": "0.83.0",
     "react-native-gesture-handler": "2.28.0",
     "react-native-reanimated": "4.2.0-nightly-20251017-235c127fd",
-    "react-native-svg": "15.14.0",
+    "react-native-svg": "15.15.3",
     "react-native-web": "0.21.2",
     "react-native-worklets": "0.7.0-nightly-20251015-0297d2990",
     "source-map": "0.7.4",

docs/docs-worklets/package.json

@@ -58,7 +58,7 @@
     "react-native": "0.83.0",
     "react-native-gesture-handler": "2.28.0",
     "react-native-reanimated": "4.2.0-nightly-20251017-235c127fd",
-    "react-native-svg": "15.14.0",
+    "react-native-svg": "15.15.3",
     "react-native-web": "0.21.2",
     "react-native-worklets": "0.7.0-nightly-20251015-0297d2990",
     "source-map": "0.7.4",