SVG path is not visible - svg

Question

I have the following generated test-SVG (excerpt).
<svg _ngcontent-dhk-c13=""><g _ngcontent-dhk-c13="" hccard="" _nghost-dhk-c12="" ng-reflect-card="[object Object]"><rect _ngcontent-dhk-c12="" id="8261337b-fb4b-4ac9-a213-0d86cc3dc604" width="100" height="100" x="750" y="450"></rect><g _ngcontent-dhk-c12="" hcedge="" _nghost-dhk-c11="" ng-reflect-edge="[object Object]"><path _ngcontent-dhk-c11="" stroke="black" stroke-width="2" d="M 750 450 L 750 600 Z"></path></g><g _ngcontent-dhk-c12="" hcedge="" _nghost-dhk-c11="" ng-reflect-edge="[object Object]"><path _ngcontent-dhk-c11="" stroke="black" stroke-width="2" d="M 750 450 L 750 600 Z"></path></g><!--bindings={
"ng-reflect-ng-for-of": "[object Object],[object Object"
}--></g><!--bindings={
"ng-reflect-ng-for-of": "[object Object],[object Object"
}--></svg>
There should be a <path> element going from 750/450 to 750/600. However nothing is visible. If i move the <path> element outside of its <g> container into the <g> container above that also holds the red <rect>, it is suddenly visible. Any other way to fix this, other than moving the <path> out of the inner <g>?

Answer 1

As #enxaneta said, the rect and path in your SVG are way outside its default viewport. A viewport is the area on your page that the SVG contents are rendered into.
If we use some CSS to make the viewport size visible (light brown area) and make overflow visible, we can see what's happening.
svg {
background-color: linen;
overflow: visible;
transform: scale(0.5);
}
<svg>
<g>
<rect width="100" height="100" x="750" y="450"></rect>
<g>
<path stroke="black" stroke-width="2" d="M 750 450 L 750 600 Z"></path>
</g>
<g>
<path stroke="black" stroke-width="2" d="M 750 450 L 750 600 Z"></path>
</g>
</g>
</svg>
If you want to fix that, you'll need to do one of two things:
Make the viewport bigger
In the example below, I have made the SVG width and height big enough so that the content is now visible. You may need to scroll down and right to see it.
svg {
background-color: linen;
}
<svg width="850" height="600">
<g>
<rect width="100" height="100" x="750" y="450"></rect>
<g>
<path stroke="black" stroke-width="2" d="M 750 450 L 750 600 Z"></path>
</g>
<g>
<path stroke="black" stroke-width="2" d="M 750 450 L 750 600 Z"></path>
</g>
</g>
</svg>
Tell the browser where in the SVG your elements are, so that it can draw them inside the viewport. You do this by adding a viewBox.
In the example below, I've chosen viewBox values that define the boundaries of the content. The browser is scaling and moving that content so that it fits in the viewport.
svg {
background-color: linen;
width: 400px;
height: 400px;
}
<svg viewBox="750 450 100 150">
<g>
<rect width="100" height="100" x="750" y="450"></rect>
<g>
<path stroke="black" stroke-width="2" d="M 750 450 L 750 600 Z"></path>
</g>
<g>
<path stroke="black" stroke-width="2" d="M 750 450 L 750 600 Z"></path>
</g>
</g>
</svg>