diff --git a/android/src/main/java/com/horcrux/svg/GroupView.java b/android/src/main/java/com/horcrux/svg/GroupView.java
index 8bc8dcfe2..42c0803f6 100644
--- a/android/src/main/java/com/horcrux/svg/GroupView.java
+++ b/android/src/main/java/com/horcrux/svg/GroupView.java
@@ -19,10 +19,12 @@
 import android.graphics.Region;
 import android.os.Build;
 import android.view.View;
+import com.facebook.react.bridge.Arguments;
 import com.facebook.react.bridge.Dynamic;
 import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.bridge.ReadableType;
+import com.facebook.react.bridge.WritableMap;
 import java.util.ArrayList;
 import javax.annotation.Nullable;
 
@@ -336,4 +338,20 @@ void resetProperties() {
       }
     }
   }
+
+  @Override
+  public void updateShadowNodeMetrics() {
+    SvgView svgView = this.getSvgView();
+
+    if (this.stateWrapper == null || svgView == null) {
+      return;
+    }
+
+    WritableMap map = Arguments.createMap();
+    map.putDouble("x", 0);
+    map.putDouble("y", 0);
+    map.putDouble("width", svgView.getCanvasWidth() / mScale);
+    map.putDouble("height", svgView.getCanvasHeight() / mScale);
+    this.stateWrapper.updateState(map);
+  }
 }
diff --git a/android/src/main/java/com/horcrux/svg/RenderableView.java b/android/src/main/java/com/horcrux/svg/RenderableView.java
index 57d6e8197..b626f84ed 100644
--- a/android/src/main/java/com/horcrux/svg/RenderableView.java
+++ b/android/src/main/java/com/horcrux/svg/RenderableView.java
@@ -33,8 +33,8 @@
 import com.facebook.react.bridge.ReadableType;
 import com.facebook.react.bridge.WritableMap;
 import com.facebook.react.touch.ReactHitSlopView;
-import com.facebook.react.uimanager.events.RCTEventEmitter;
 import com.facebook.react.uimanager.PointerEvents;
+import com.facebook.react.uimanager.events.RCTEventEmitter;
 import java.lang.reflect.Field;
 import java.util.ArrayList;
 import java.util.regex.Matcher;
@@ -103,10 +103,8 @@ public abstract class RenderableView extends VirtualView implements ReactHitSlop
 
   public void onReceiveNativeEvent() {
     WritableMap event = Arguments.createMap();
-    ReactContext reactContext = (ReactContext)getContext();
-    reactContext
-        .getJSModule(RCTEventEmitter.class)
-        .receiveEvent(getId(), "topSvgLayout", event);
+    ReactContext reactContext = (ReactContext) getContext();
+    reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(getId(), "topSvgLayout", event);
   }
 
   @Nullable String mFilter;
@@ -500,6 +498,8 @@ void render(Canvas canvas, Paint paint, float opacity) {
     } else {
       draw(canvas, paint, opacity);
     }
+
+    this.updateShadowNodeMetrics();
   }
 
   @Override
@@ -824,4 +824,19 @@ void resetProperties() {
   private boolean hasOwnProperty(String propName) {
     return mAttributeList != null && mAttributeList.contains(propName);
   }
+
+  protected void updateShadowNodeMetrics() {
+    RectF clientRect = this.getClientRect();
+
+    if (this.stateWrapper == null || clientRect == null) {
+      return;
+    }
+    
+    WritableMap map = Arguments.createMap();
+    map.putDouble("x", clientRect.left / mScale);
+    map.putDouble("y", clientRect.top / mScale);
+    map.putDouble("width", clientRect.width() / mScale);
+    map.putDouble("height", clientRect.height() / mScale);
+    this.stateWrapper.updateState(map);
+  }
 }
diff --git a/android/src/main/java/com/horcrux/svg/RenderableViewManager.java b/android/src/main/java/com/horcrux/svg/RenderableViewManager.java
index 06095e45f..26e186a8b 100644
--- a/android/src/main/java/com/horcrux/svg/RenderableViewManager.java
+++ b/android/src/main/java/com/horcrux/svg/RenderableViewManager.java
@@ -67,6 +67,9 @@
 import android.util.SparseArray;
 import android.view.View;
 import android.view.ViewGroup;
+
+import androidx.annotation.NonNull;
+
 import com.facebook.react.bridge.Dynamic;
 import com.facebook.react.bridge.JavaOnlyMap;
 import com.facebook.react.bridge.ReadableArray;
@@ -78,6 +81,8 @@
 import com.facebook.react.uimanager.MatrixMathHelper;
 import com.facebook.react.uimanager.PixelUtil;
 import com.facebook.react.uimanager.PointerEvents;
+import com.facebook.react.uimanager.ReactStylesDiffMap;
+import com.facebook.react.uimanager.StateWrapper;
 import com.facebook.react.uimanager.ThemedReactContext;
 import com.facebook.react.uimanager.TransformHelper;
 import com.facebook.react.uimanager.ViewGroupManager;
@@ -166,6 +171,12 @@ protected ViewManagerDelegate getDelegate() {
     return mDelegate;
   }
 
+  @Override
+  public Object updateState(@NonNull VirtualView view, ReactStylesDiffMap props, StateWrapper stateWrapper) {
+    view.setStateWrapper(stateWrapper);
+    return super.updateState(view, props, stateWrapper);
+  }
+
   static class RenderableShadowNode extends LayoutShadowNode {
 
     @SuppressWarnings({"unused", "EmptyMethod"})
diff --git a/android/src/main/java/com/horcrux/svg/VirtualView.java b/android/src/main/java/com/horcrux/svg/VirtualView.java
index 3f8b0ac35..a01bf3fb7 100644
--- a/android/src/main/java/com/horcrux/svg/VirtualView.java
+++ b/android/src/main/java/com/horcrux/svg/VirtualView.java
@@ -21,11 +21,11 @@
 import com.facebook.react.common.ReactConstants;
 import com.facebook.react.uimanager.DisplayMetricsHolder;
 import com.facebook.react.uimanager.PointerEvents;
+import com.facebook.react.uimanager.StateWrapper;
 import com.facebook.react.uimanager.UIManagerHelper;
 import com.facebook.react.uimanager.events.EventDispatcher;
 import com.facebook.react.views.view.ReactViewGroup;
 import com.horcrux.svg.events.SvgOnLayoutEvent;
-
 import java.util.ArrayList;
 import javax.annotation.Nullable;
 
@@ -85,6 +85,7 @@ public abstract class VirtualView extends ReactViewGroup {
   private float canvasHeight = -1;
   private float canvasWidth = -1;
   private GlyphContext glyphContext;
+  protected @Nullable StateWrapper stateWrapper = null;
 
   Path mPath;
   Path mFillPath;
@@ -107,6 +108,10 @@ public void setPointerEvents(PointerEvents pointerEvents) {
     mPointerEvents = pointerEvents;
   }
 
+  public void setStateWrapper(@Nullable StateWrapper stateWrapper) {
+    this.stateWrapper = stateWrapper;
+  }
+
   @Override
   public void onInitializeAccessibilityNodeInfo(AccessibilityNodeInfo info) {
     super.onInitializeAccessibilityNodeInfo(info);
@@ -250,7 +255,7 @@ int saveAndSetupCanvas(Canvas canvas, Matrix ctm) {
     int count = canvas.save();
     mCTM.set(mMatrix);
     canvas.concat(mCTM);
-    mCTM.preConcat(ctm);
+    mCTM.postConcat(ctm);
     mCTMInvertible = mCTM.invert(mInvCTM);
     return count;
   }
@@ -438,7 +443,9 @@ public SvgView getSvgView() {
 
   double relativeOnWidth(SVGLength length) {
     SvgView svg = getSvgView();
-    if (length.unit == SVGLength.UnitType.PERCENTAGE && svg != null && svg.getViewBox().width() != 0) {
+    if (length.unit == SVGLength.UnitType.PERCENTAGE
+        && svg != null
+        && svg.getViewBox().width() != 0) {
       return relativeOn(length, svg.getViewBox().width());
     }
     return relativeOn(length, getCanvasWidth());
@@ -446,7 +453,9 @@ public SvgView getSvgView() {
 
   double relativeOnHeight(SVGLength length) {
     SvgView svg = getSvgView();
-    if (length.unit == SVGLength.UnitType.PERCENTAGE && svg != null && svg.getViewBox().height() != 0) {
+    if (length.unit == SVGLength.UnitType.PERCENTAGE
+        && svg != null
+        && svg.getViewBox().height() != 0) {
       return relativeOn(length, svg.getViewBox().height());
     }
     return relativeOn(length, getCanvasHeight());
@@ -613,13 +622,13 @@ void setClientRect(RectF rect) {
         UIManagerHelper.getEventDispatcherForReactTag(mContext, getId());
     if (eventDispatcher != null) {
       eventDispatcher.dispatchEvent(
-        new SvgOnLayoutEvent(
-          UIManagerHelper.getSurfaceId(VirtualView.this),
-          this.getId(),
-          left,
-          top,
-          width,
-          height));
+          new SvgOnLayoutEvent(
+              UIManagerHelper.getSurfaceId(VirtualView.this),
+              this.getId(),
+              left,
+              top,
+              width,
+              height));
     }
   }
 
diff --git a/apple/Elements/RNSVGGroup.mm b/apple/Elements/RNSVGGroup.mm
index fd47282ed..013d861bb 100644
--- a/apple/Elements/RNSVGGroup.mm
+++ b/apple/Elements/RNSVGGroup.mm
@@ -16,6 +16,7 @@
 #import <react/renderer/components/view/conversions.h>
 #import <rnsvg/RNSVGComponentDescriptors.h>
 #import "RNSVGFabricConversions.h"
+#import "RNSVGRenderUtils.h"
 #endif // RCT_NEW_ARCH_ENABLED
 
 @implementation RNSVGGroup {
@@ -308,6 +309,16 @@ - (void)resetProperties
   }];
 }
 
+#ifdef RCT_NEW_ARCH_ENABLED
+- (void)updateShadowNodeMetrics
+{
+  auto statePtr = [self state];
+  if (statePtr) {
+    statePtr->updateState(RNSVGLayoutableState(0, 0, [self getCanvasWidth], [self getCanvasHeight]));
+  }
+}
+#endif
+
 @end
 
 #ifdef RCT_NEW_ARCH_ENABLED
diff --git a/apple/RNSVGRenderable.h b/apple/RNSVGRenderable.h
index 7f56488d9..a52aeea16 100644
--- a/apple/RNSVGRenderable.h
+++ b/apple/RNSVGRenderable.h
@@ -16,6 +16,12 @@
 #import "RNSVGNode.h"
 #import "RNSVGVectorEffect.h"
 
+#ifdef RCT_NEW_ARCH_ENABLED
+#import <rnsvg/RNSVGComponentDescriptors.h>
+
+using namespace facebook::react;
+#endif
+
 @interface RNSVGRenderable : RNSVGNode
 
 @property (class) RNSVGRenderable *contextElement;
@@ -36,6 +42,10 @@
 @property (nonatomic, assign) CGPathRef hitArea;
 @property (nonatomic, strong) NSString *filter;
 
+#ifdef RCT_NEW_ARCH_ENABLED
+- (facebook::react::RNSVGRenderableShadowNode::ConcreteState::Shared)state;
+#endif
+
 - (void)setColor:(RNSVGColor *)color;
 
 - (void)setHitArea:(CGPathRef)path;
@@ -48,4 +58,8 @@
 
 - (CGColor *)getCurrentColor;
 
+#ifdef RCT_NEW_ARCH_ENABLED
+- (void)updateShadowNodeMetrics;
+#endif
+
 @end
diff --git a/apple/RNSVGRenderable.mm b/apple/RNSVGRenderable.mm
index 754d29be8..e448ede3c 100644
--- a/apple/RNSVGRenderable.mm
+++ b/apple/RNSVGRenderable.mm
@@ -26,6 +26,10 @@ @implementation RNSVGRenderable {
   CGFloat *_strokeDashArrayData;
   CGPathRef _srcHitPath;
   RNSVGRenderable *_caller;
+  
+#ifdef RCT_NEW_ARCH_ENABLED
+  RNSVGRenderableShadowNode::ConcreteState::Shared _state;
+#endif
 }
 
 static RNSVGRenderable *_contextElement;
@@ -243,6 +247,11 @@ - (void)prepareForRecycle
   _filter = nil;
   _caller = nil;
 }
+
+- (void)updateState:(State::Shared const &)state oldState:(State::Shared const &)oldState
+{
+  _state = std::static_pointer_cast<const RNSVGRenderableShadowNode::ConcreteState>(state);
+}
 #endif // RCT_NEW_ARCH_ENABLED
 
 UInt32 saturate(CGFloat value)
@@ -432,6 +441,9 @@ - (void)renderTo:(CGContextRef)context rect:(CGRect)rect
   CGContextRestoreGState(context);
 
   [self renderMarkers:context path:self.path rect:&rect];
+#ifdef RCT_NEW_ARCH_ENABLED
+  [self updateShadowNodeMetrics];
+#endif
 }
 
 - (void)prepareStrokeDash:(NSUInteger)count strokeDasharray:(NSArray<RNSVGLength *> *)strokeDasharray
@@ -773,4 +785,17 @@ - (CGColor *)getCurrentColor
   return nil;
 }
 
+#ifdef RCT_NEW_ARCH_ENABLED
+- (void)updateShadowNodeMetrics
+{
+  if (_state) {
+    _state->updateState(RNSVGLayoutableState(self.clientRect.origin.x, self.clientRect.origin.y, self.clientRect.size.width, self.clientRect.size.height));
+  }
+}
+
+- (RNSVGRenderableShadowNode::ConcreteState::Shared)state {
+  return _state;
+}
+#endif
+
 @end
diff --git a/apps/fabric-example/ios/Podfile.lock b/apps/fabric-example/ios/Podfile.lock
index 8ecc27467..d8e2aa4ee 100644
--- a/apps/fabric-example/ios/Podfile.lock
+++ b/apps/fabric-example/ios/Podfile.lock
@@ -2606,7 +2606,7 @@ PODS:
     - ReactCommon/turbomodule/core
     - SocketRocket
     - Yoga
-  - RNSVG (15.13.0):
+  - RNSVG (15.14.0):
     - boost
     - DoubleConversion
     - fast_float
@@ -2632,10 +2632,10 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNSVG/common (= 15.13.0)
+    - RNSVG/common (= 15.14.0)
     - SocketRocket
     - Yoga
-  - RNSVG/common (15.13.0):
+  - RNSVG/common (15.14.0):
     - boost
     - DoubleConversion
     - fast_float
@@ -2988,7 +2988,7 @@ SPEC CHECKSUMS:
   RNGestureHandler: 4f7cc97a71d4fe0fcba38c94acdd969f5f17c91c
   RNReanimated: d3ecb5fd98f70b736cb8880cc95776298ff761c7
   RNScreens: 74985ca8e102294a60cec7513fa84c936fa0b20b
-  RNSVG: eca4f6bb09bcaf582c4f082f3989a6b8513b3e93
+  RNSVG: 4a4f7d4897abbfdc6dfe30be5d6cc5ffee23ea43
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   Yoga: a3ed390a19db0459bd6839823a6ac6d9c6db198d
 
diff --git a/common/cpp/react/renderer/components/rnsvg/RNSVGComponentDescriptor.h b/common/cpp/react/renderer/components/rnsvg/RNSVGComponentDescriptor.h
new file mode 100644
index 000000000..9344b8c4b
--- /dev/null
+++ b/common/cpp/react/renderer/components/rnsvg/RNSVGComponentDescriptor.h
@@ -0,0 +1,30 @@
+// RNSVGComponentDescriptor.h
+#pragma once
+#include <react/debug/react_native_assert.h>
+#include <react/renderer/core/ConcreteComponentDescriptor.h>
+#include "RNSVGShadowNodes.h"
+
+namespace facebook::react {
+
+template <typename ShadowNodeT>
+class RNSVGComponentDescriptor final
+: public ConcreteComponentDescriptor<ShadowNodeT> {
+public:
+  using ConcreteComponentDescriptor<ShadowNodeT>::ConcreteComponentDescriptor;
+  void adopt(ShadowNode &shadowNode) const override {
+    react_native_assert(dynamic_cast<RNSVGLayoutableShadowNode *>(&shadowNode));
+    auto layoutableShadowNode = dynamic_cast<RNSVGLayoutableShadowNode *>(&shadowNode);
+    
+    auto state = std::static_pointer_cast<const typename ShadowNodeT::ConcreteState>(shadowNode.getState());
+      auto stateData = state->getData();
+      
+      if (stateData.getWidth() != 0 && stateData.getHeight() != 0) {
+        layoutableShadowNode->setSize(Size{stateData.getWidth(), stateData.getHeight()});
+        layoutableShadowNode->setShadowNodePosition(stateData.getX(), stateData.getY());
+      }
+    
+    ConcreteComponentDescriptor<ShadowNodeT>::adopt(shadowNode);
+  }
+};
+
+} // namespace facebook::react
diff --git a/common/cpp/react/renderer/components/rnsvg/RNSVGComponentDescriptors.h b/common/cpp/react/renderer/components/rnsvg/RNSVGComponentDescriptors.h
index 61c44e7a6..5711d319f 100644
--- a/common/cpp/react/renderer/components/rnsvg/RNSVGComponentDescriptors.h
+++ b/common/cpp/react/renderer/components/rnsvg/RNSVGComponentDescriptors.h
@@ -1,64 +1,64 @@
 #pragma once
 
 #include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
-#include <react/renderer/core/ConcreteComponentDescriptor.h>
+#include "RNSVGComponentDescriptor.h"
 #include "RNSVGShadowNodes.h"
 
 namespace facebook::react {
 
 using RNSVGCircleComponentDescriptor =
-    ConcreteComponentDescriptor<RNSVGCircleShadowNode>;
+    RNSVGComponentDescriptor<RNSVGCircleShadowNode>;
 using RNSVGClipPathComponentDescriptor =
-    ConcreteComponentDescriptor<RNSVGClipPathShadowNode>;
+    RNSVGComponentDescriptor<RNSVGClipPathShadowNode>;
 using RNSVGDefsComponentDescriptor =
-    ConcreteComponentDescriptor<RNSVGDefsShadowNode>;
+    RNSVGComponentDescriptor<RNSVGDefsShadowNode>;
 using RNSVGEllipseComponentDescriptor =
-    ConcreteComponentDescriptor<RNSVGEllipseShadowNode>;
+    RNSVGComponentDescriptor<RNSVGEllipseShadowNode>;
 using RNSVGFeBlendComponentDescriptor =
-    ConcreteComponentDescriptor<RNSVGFeBlendShadowNode>;
+    RNSVGComponentDescriptor<RNSVGFeBlendShadowNode>;
 using RNSVGFeColorMatrixComponentDescriptor =
-    ConcreteComponentDescriptor<RNSVGFeColorMatrixShadowNode>;
+    RNSVGComponentDescriptor<RNSVGFeColorMatrixShadowNode>;
 using RNSVGFeCompositeComponentDescriptor =
-    ConcreteComponentDescriptor<RNSVGFeCompositeShadowNode>;
+    RNSVGComponentDescriptor<RNSVGFeCompositeShadowNode>;
 using RNSVGFeFloodComponentDescriptor =
-    ConcreteComponentDescriptor<RNSVGFeFloodShadowNode>;
+    RNSVGComponentDescriptor<RNSVGFeFloodShadowNode>;
 using RNSVGFeGaussianBlurComponentDescriptor =
-    ConcreteComponentDescriptor<RNSVGFeGaussianBlurShadowNode>;
+    RNSVGComponentDescriptor<RNSVGFeGaussianBlurShadowNode>;
 using RNSVGFeMergeComponentDescriptor =
-    ConcreteComponentDescriptor<RNSVGFeMergeShadowNode>;
+    RNSVGComponentDescriptor<RNSVGFeMergeShadowNode>;
 using RNSVGFeOffsetComponentDescriptor =
-    ConcreteComponentDescriptor<RNSVGFeOffsetShadowNode>;
+    RNSVGComponentDescriptor<RNSVGFeOffsetShadowNode>;
 using RNSVGFilterComponentDescriptor =
-    ConcreteComponentDescriptor<RNSVGFilterShadowNode>;
+    RNSVGComponentDescriptor<RNSVGFilterShadowNode>;
 using RNSVGForeignObjectComponentDescriptor =
-    ConcreteComponentDescriptor<RNSVGForeignObjectShadowNode>;
+    RNSVGComponentDescriptor<RNSVGForeignObjectShadowNode>;
 using RNSVGGroupComponentDescriptor =
-    ConcreteComponentDescriptor<RNSVGGroupShadowNode>;
+    RNSVGComponentDescriptor<RNSVGGroupShadowNode>;
 using RNSVGLinearGradientComponentDescriptor =
-    ConcreteComponentDescriptor<RNSVGLinearGradientShadowNode>;
+    RNSVGComponentDescriptor<RNSVGLinearGradientShadowNode>;
 using RNSVGLineComponentDescriptor =
-    ConcreteComponentDescriptor<RNSVGLineShadowNode>;
+    RNSVGComponentDescriptor<RNSVGLineShadowNode>;
 using RNSVGMarkerComponentDescriptor =
-    ConcreteComponentDescriptor<RNSVGMarkerShadowNode>;
+    RNSVGComponentDescriptor<RNSVGMarkerShadowNode>;
 using RNSVGMaskComponentDescriptor =
-    ConcreteComponentDescriptor<RNSVGMaskShadowNode>;
+    RNSVGComponentDescriptor<RNSVGMaskShadowNode>;
 using RNSVGPathComponentDescriptor =
-    ConcreteComponentDescriptor<RNSVGPathShadowNode>;
+    RNSVGComponentDescriptor<RNSVGPathShadowNode>;
 using RNSVGPatternComponentDescriptor =
-    ConcreteComponentDescriptor<RNSVGPatternShadowNode>;
+    RNSVGComponentDescriptor<RNSVGPatternShadowNode>;
 using RNSVGRadialGradientComponentDescriptor =
-    ConcreteComponentDescriptor<RNSVGRadialGradientShadowNode>;
+    RNSVGComponentDescriptor<RNSVGRadialGradientShadowNode>;
 using RNSVGRectComponentDescriptor =
-    ConcreteComponentDescriptor<RNSVGRectShadowNode>;
+    RNSVGComponentDescriptor<RNSVGRectShadowNode>;
 using RNSVGSymbolComponentDescriptor =
-    ConcreteComponentDescriptor<RNSVGSymbolShadowNode>;
+    RNSVGComponentDescriptor<RNSVGSymbolShadowNode>;
 using RNSVGTextComponentDescriptor =
-    ConcreteComponentDescriptor<RNSVGTextShadowNode>;
+    RNSVGComponentDescriptor<RNSVGTextShadowNode>;
 using RNSVGTextPathComponentDescriptor =
-    ConcreteComponentDescriptor<RNSVGTextPathShadowNode>;
+    RNSVGComponentDescriptor<RNSVGTextPathShadowNode>;
 using RNSVGTSpanComponentDescriptor =
-    ConcreteComponentDescriptor<RNSVGTSpanShadowNode>;
+    RNSVGComponentDescriptor<RNSVGTSpanShadowNode>;
 using RNSVGUseComponentDescriptor =
-    ConcreteComponentDescriptor<RNSVGUseShadowNode>;
+    RNSVGComponentDescriptor<RNSVGUseShadowNode>;
 
 } // namespace facebook::react
diff --git a/common/cpp/react/renderer/components/rnsvg/RNSVGConcreteShadowNode.h b/common/cpp/react/renderer/components/rnsvg/RNSVGConcreteShadowNode.h
index 0ab02986c..477d24e87 100644
--- a/common/cpp/react/renderer/components/rnsvg/RNSVGConcreteShadowNode.h
+++ b/common/cpp/react/renderer/components/rnsvg/RNSVGConcreteShadowNode.h
@@ -4,6 +4,7 @@
 #include <react/renderer/components/view/ViewProps.h>
 #include <react/renderer/core/ConcreteShadowNode.h>
 #include "RNSVGLayoutableShadowNode.h"
+#include "RNSVGLayoutableState.h"
 
 namespace facebook::react {
 
@@ -13,14 +14,14 @@ class RNSVGConcreteShadowNode : public ConcreteShadowNode<
                                     RNSVGLayoutableShadowNode,
                                     PropsT,
                                     ViewEventEmitter,
-                                    StateData> {
+                                    RNSVGLayoutableState> {
  public:
   using BaseShadowNode = ConcreteShadowNode<
       concreteComponentName,
       RNSVGLayoutableShadowNode,
       PropsT,
       ViewEventEmitter,
-      StateData>;
+      RNSVGLayoutableState>;
 
   using ConcreteViewProps = PropsT;
 
diff --git a/common/cpp/react/renderer/components/rnsvg/RNSVGLayoutableShadowNode.cpp b/common/cpp/react/renderer/components/rnsvg/RNSVGLayoutableShadowNode.cpp
index 11718dd86..f66a68b35 100644
--- a/common/cpp/react/renderer/components/rnsvg/RNSVGLayoutableShadowNode.cpp
+++ b/common/cpp/react/renderer/components/rnsvg/RNSVGLayoutableShadowNode.cpp
@@ -7,30 +7,21 @@ RNSVGLayoutableShadowNode::RNSVGLayoutableShadowNode(
     const ShadowNodeFragment &fragment,
     const ShadowNodeFamily::Shared &family,
     ShadowNodeTraits traits)
-    : YogaLayoutableShadowNode(fragment, family, traits) {
-  if (std::strcmp(this->getComponentName(), "RNSVGGroup") != 0) {
-    setZeroDimensions();
-  }
-}
+    : YogaLayoutableShadowNode(fragment, family, traits) {}
 
 RNSVGLayoutableShadowNode::RNSVGLayoutableShadowNode(
     const ShadowNode &sourceShadowNode,
     const ShadowNodeFragment &fragment)
-    : YogaLayoutableShadowNode(sourceShadowNode, fragment) {
-  if (std::strcmp(this->getComponentName(), "RNSVGGroup") != 0) {
-    setZeroDimensions();
-  }
-}
+    : YogaLayoutableShadowNode(sourceShadowNode, fragment) {}
 
-void RNSVGLayoutableShadowNode::setZeroDimensions() {
-  // SVG handles its layout manually on the native side and does not depend on
-  // the Yoga layout. Setting the dimensions to 0 eliminates randomly positioned
-  // views in the layout inspector when Yoga attempts to interpret SVG
-  // properties like width when viewBox scale is set.
-  auto style = yogaNode_.style();
-  style.setDimension(yoga::Dimension::Width, yoga::StyleSizeLength::points(0));
-  style.setDimension(yoga::Dimension::Height, yoga::StyleSizeLength::points(0));
-  yogaNode_.setStyle(style);
+void RNSVGLayoutableShadowNode::setShadowNodePosition(float x, float y) {
+    auto style = yogaNode_.style();
+  
+    style.setPositionType(yoga::PositionType::Absolute);
+    style.setPosition(yoga::Edge::Left, yoga::StyleLength::points(x));
+    style.setPosition(yoga::Edge::Top, yoga::StyleLength::points(y));
+  
+    yogaNode_.setStyle(style);
 }
 
 void RNSVGLayoutableShadowNode::layout(LayoutContext layoutContext) {
diff --git a/common/cpp/react/renderer/components/rnsvg/RNSVGLayoutableShadowNode.h b/common/cpp/react/renderer/components/rnsvg/RNSVGLayoutableShadowNode.h
index c93c3c1eb..f1572ea02 100644
--- a/common/cpp/react/renderer/components/rnsvg/RNSVGLayoutableShadowNode.h
+++ b/common/cpp/react/renderer/components/rnsvg/RNSVGLayoutableShadowNode.h
@@ -1,4 +1,5 @@
 #include <react/renderer/components/view/YogaLayoutableShadowNode.h>
+#include "RNSVGLayoutableState.h"
 
 namespace facebook::react {
 
@@ -14,9 +15,7 @@ class RNSVGLayoutableShadowNode : public YogaLayoutableShadowNode {
       const ShadowNodeFragment &fragment);
 
   void layout(LayoutContext layoutContext) override;
-
- private:
-  void setZeroDimensions();
+  void setShadowNodePosition(float x, float y);
 };
 
 } // namespace facebook::react
diff --git a/common/cpp/react/renderer/components/rnsvg/RNSVGLayoutableState.cpp b/common/cpp/react/renderer/components/rnsvg/RNSVGLayoutableState.cpp
new file mode 100644
index 000000000..6f993caf9
--- /dev/null
+++ b/common/cpp/react/renderer/components/rnsvg/RNSVGLayoutableState.cpp
@@ -0,0 +1,22 @@
+#include "RNSVGLayoutableState.h"
+
+namespace facebook::react {
+
+
+float RNSVGLayoutableState::getX() const {
+  return x_;
+}
+
+float RNSVGLayoutableState::getY() const {
+  return y_;
+}
+
+float RNSVGLayoutableState::getWidth() const {
+  return width_;
+}
+
+float RNSVGLayoutableState::getHeight() const {
+  return height_;
+}
+
+} // namespace facebook::react
diff --git a/common/cpp/react/renderer/components/rnsvg/RNSVGLayoutableState.h b/common/cpp/react/renderer/components/rnsvg/RNSVGLayoutableState.h
new file mode 100644
index 000000000..503e90c4f
--- /dev/null
+++ b/common/cpp/react/renderer/components/rnsvg/RNSVGLayoutableState.h
@@ -0,0 +1,41 @@
+#pragma once
+
+#ifdef ANDROID
+#include <folly/dynamic.h>
+#endif
+
+namespace facebook::react {
+
+class RNSVGLayoutableState {
+public:
+  RNSVGLayoutableState()
+    : x_(0), y_(0), width_(0), height_(0) {}
+
+  RNSVGLayoutableState(float x, float y, float width, float height)
+    : x_(x), y_(y), width_(width), height_(height) {}
+
+#ifdef ANDROID
+  RNSVGLayoutableState(RNSVGLayoutableState const &previousState, folly::dynamic data)
+    : x_((float)data["x"].getDouble()),
+      y_((float)data["y"].getDouble()),
+      width_((float)data["width"].getDouble()),
+      height_((float)data["height"].getDouble()){};
+      
+  folly::dynamic getDynamic() const {
+    return folly::dynamic::object("x", x_)("y", y_)("width", width_)("height", height_);
+  };
+#endif
+
+  float getX() const;
+  float getY() const;
+  float getWidth() const;
+  float getHeight() const;
+
+private:
+ float x_{};
+ float y_{};
+ float width_{};
+ float height_{};
+};
+
+} // namespace facebook::react
diff --git a/common/cpp/react/renderer/components/rnsvg/RNSVGShadowNodes.cpp b/common/cpp/react/renderer/components/rnsvg/RNSVGShadowNodes.cpp
index 70f1abd43..b5f1ad1ea 100644
--- a/common/cpp/react/renderer/components/rnsvg/RNSVGShadowNodes.cpp
+++ b/common/cpp/react/renderer/components/rnsvg/RNSVGShadowNodes.cpp
@@ -24,6 +24,7 @@ extern const char RNSVGPathComponentName[] = "RNSVGPath";
 extern const char RNSVGPatternComponentName[] = "RNSVGPattern";
 extern const char RNSVGRadialGradientComponentName[] = "RNSVGRadialGradient";
 extern const char RNSVGRectComponentName[] = "RNSVGRect";
+extern const char RNSVGRenderableComponentName[] = "RNSVGRenderable";
 extern const char RNSVGSymbolComponentName[] = "RNSVGSymbol";
 extern const char RNSVGTextComponentName[] = "RNSVGText";
 extern const char RNSVGTextPathComponentName[] = "RNSVGTextPath";
diff --git a/common/cpp/react/renderer/components/rnsvg/RNSVGShadowNodes.h b/common/cpp/react/renderer/components/rnsvg/RNSVGShadowNodes.h
index 71addc842..a7a2a8e2d 100644
--- a/common/cpp/react/renderer/components/rnsvg/RNSVGShadowNodes.h
+++ b/common/cpp/react/renderer/components/rnsvg/RNSVGShadowNodes.h
@@ -190,6 +190,14 @@ JSI_EXPORT extern const char RNSVGRectComponentName[];
 using RNSVGRectShadowNode =
     RNSVGConcreteShadowNode<RNSVGRectComponentName, RNSVGRectProps>;
 
+JSI_EXPORT extern const char RNSVGRenderableComponentName[];
+
+/*
+ * `ShadowNode` for <RNSVGRect> component.
+ */
+using RNSVGRenderableShadowNode =
+    RNSVGConcreteShadowNode<RNSVGRenderableComponentName>;
+
 JSI_EXPORT extern const char RNSVGSymbolComponentName[];
 
 /*