Begin ssr

src/LayerCake.svelte

@@ -272,12 +272,13 @@
 </div>
 
 <style>
-	:global(.layercake-container),
-	:global(.layercake-container *) {
+	.layercake-container,
+	.layercake-container :global(*) {
 		box-sizing: border-box;
 	}
 	.layercake-container {
 		width: 100%;
 		height: 100%;
+		position: relative;
 	}
 </style>

src/Layouts/SvgSsr.svelte

@@ -0,0 +1,30 @@
+<script>
+	import { getContext } from 'svelte';
+
+	export let zIndex = undefined;
+	let zIndexStyle = '';
+
+	$: zIndexStyle = typeof zIndex !== 'undefined' ? `z-index:${zIndex};` : '';
+
+	const { padding } = getContext('LayerCake');
+</script>
+
+<svg
+	viewBox="0 0 100 100"
+	preserveAspectRatio="none"
+	style="top: {$padding.top}px; right:{$padding.right}px; bottom:{$padding.bottom}px; left:{$padding.left}px;{zIndexStyle}"
+>
+	<slot></slot>
+</svg>
+
+<style>
+	svg {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		overflow: visible;
+	}
+	svg :global(*) {
+		vector-effect: non-scaling-stroke;
+	}
+</style>

src/index.js

@@ -1,8 +1,9 @@
 export { default as LayerCake } from './LayerCake.svelte';
 export { default as Html } from './layouts/Html.svelte';
 export { default as Svg } from './layouts/Svg.svelte';
+export { default as SvgSsr } from './layouts/SvgSsr.svelte';
 export { default as Canvas } from './layouts/Canvas.svelte';
-export { default as WebGL } from './layouts/WebGL.svelte';
+export { default as WebGL } from './layouts/Webgl.svelte';
 
 export { default as scaleCanvas } from './lib/scaleCanvas.js';
 export { default as flatten } from './lib/flatten.js';