diff --git a/Example/examples/G.js b/Example/examples/G.js
index a5b5a12d..c6aab772 100644
--- a/Example/examples/G.js
+++ b/Example/examples/G.js
@@ -23,10 +23,12 @@ class GExample extends Component{
                 stroke="pink"
                 strokeWidth="3"
             >
-                <Circle
-                    cx="25"
-                    cy="25"
-                />
+                <G>
+                    <Circle
+                        cx="25"
+                        cy="25"
+                    />
+                </G>
                 <Circle
                     cx="25"
                     cy="75"
diff --git a/Example/examples/Gradients.js b/Example/examples/Gradients.js
index 4ae689b8..94bb5b49 100644
--- a/Example/examples/Gradients.js
+++ b/Example/examples/Gradients.js
@@ -10,7 +10,8 @@ import Svg, {
     Ellipse,
     Circle,
     Text,
-    Rect
+    Rect,
+    G
 } from 'react-native-svg';
 
 class LinearGradientHorizontal extends Component{
@@ -32,7 +33,7 @@ class LinearGradientHorizontal extends Component{
 }
 
 class LinearGradientVertical  extends Component{
-    static title = 'Define an ellipse with a horizontal linear gradient from yellow to red';
+    static title = 'Define an ellipse with a vertical linear gradient from yellow to red';
     render() {
         return <Svg
             height="150"
@@ -44,7 +45,11 @@ class LinearGradientVertical  extends Component{
                     <Stop offset="100%" stopColor="red" stopOpacity="1" />
                 </LinearGradient>
             </Defs>
-            <Ellipse cx="150" cy="75" rx="85" ry="55" fill="url(#grad)" />
+            <G>
+                <G>
+                    <Ellipse cx="150" cy="75" rx="85" ry="55" fill="url(#grad)" />
+                </G>
+            </G>
         </Svg>;
     }
 }
diff --git a/elements/G.js b/elements/G.js
index 17e22912..05c5d76d 100644
--- a/elements/G.js
+++ b/elements/G.js
@@ -10,6 +10,11 @@ import extractProps from '../lib/extract/extractProps';
 class G extends Component{
     static displayName = 'G';
 
+    static contextTypes = {
+        svgId: numberProp,
+        ...contextProps
+    };
+
     static childContextTypes = {
         svgId: numberProp,
         isInGroup: PropTypes.bool,
@@ -17,13 +22,16 @@ class G extends Component{
     };
 
     getChildContext = () => {
-        return _.reduce(contextProps, (props, value, key) => {
-            props[key] = this.props[key];
+        let context = _.reduce(contextProps, (props, value, key) => {
+            if (!_.isNil(this.props[key])) {
+                props[key] = this.props[key];
+            }
             return props;
         }, {
-            svgId: this.props.svgId,
+            svgId: this.props.svgId || this.context.svgId,
             isInGroup: true
         });
+        return _.defaults({}, this.context, context);
     };
 
     render() {