diff --git a/.gitattributes b/.gitattributes
index 148178df..68517515 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -1,5 +1,4 @@
+/frontend/**/*.htmlf linguist-generated=true
 /frontend/docs/**/*.html linguist-generated=true
-/frontend/docs/**/*.htmlf linguist-generated=true
 /frontend/learn/**/*.html linguist-generated=true
-/frontend/learn/**/*.htmlf linguist-generated=true
 /frontend/learn/index.html linguist-generated=false
diff --git a/Makefile b/Makefile
index 82f8b9ae..3dd19791 100644
--- a/Makefile
+++ b/Makefile
@@ -202,7 +202,7 @@ FLAGS_frontend/lab/samples/ifs/img/grass.svg = --rand-seed=1
 FLAGS_frontend/lab/samples/forloops/img/bubble.svg = --rand-seed=1
 FLAGS_frontend/lab/samples/forloops/img/circle-rand.svg = --rand-seed=1
 %.svg: %.evy | $(NODELIB)
-	go run . run --svg-out "$@" $(FLAGS_$@) "$<"
+	go run . run --svg-width "200px" --svg-height "200px" --svg-out "$@" $(FLAGS_$@) "$<"
 	$(PRETTIER) --write "$@"
 
 %.htmlf: %.md | $(NODELIB)
diff --git a/build-tools/labsite-gen/main.go b/build-tools/labsite-gen/main.go
index a8a9a31c..25fb29bd 100644
--- a/build-tools/labsite-gen/main.go
+++ b/build-tools/labsite-gen/main.go
@@ -7,10 +7,13 @@ package main
 import (
 	"bytes"
 	"fmt"
+	"net/url"
 	"os"
+	"path/filepath"
 	"strings"
 	"unicode"
 
+	"evylang.dev/evy/pkg/md"
 	"rsc.io/markdown"
 )
 
@@ -39,6 +42,8 @@ func run(mdFile, htmlfFile string) error {
 		return err
 	}
 	doc := parse(string(md))
+	updateImgURL(doc, mdFile)
+	updateLabLinks(doc)
 	replaceNextButton(doc)
 	doc.Blocks = collapse(doc.Blocks)
 	html := markdown.ToHTML(doc)
@@ -51,6 +56,46 @@ func parse(md string) *markdown.Document {
 	return p.Parse(md)
 }
 
+// Change relative links to work for frontend lab root which is where it will be
+// requested from on https://lab.evy.dev. The generated .htmlf files are loaded
+// as fragments and image links relative to these fragments do not work, they need
+// to be relative to the initially loaded frontend/lab/index.html site.
+func updateImgURL(doc *markdown.Document, mdFile string) {
+	md.Walk(doc, func(n md.Node) {
+		img, ok := n.(*markdown.Image)
+		if !ok {
+			return
+		}
+		u, err := url.Parse(img.URL)
+		if err != nil || u.IsAbs() {
+			return
+		}
+		// change img/circle.svg to samples/ifs/img/circle.svg
+		u.Path = updateIMGPath(mdFile, u.Path)
+		img.URL = u.String()
+	})
+}
+
+func updateIMGPath(mdPath, imgPath string) string {
+	labDir := filepath.Base(filepath.Dir(mdPath))
+	return "samples/" + labDir + "/" + imgPath
+}
+
+func updateLabLinks(doc *markdown.Document) {
+	md.Walk(doc, func(n md.Node) {
+		link, ok := n.(*markdown.Link)
+		if !ok {
+			return
+		}
+		u, err := url.Parse(link.URL)
+		if err != nil || u.IsAbs() || !strings.HasSuffix(u.Path, ".md") {
+			return
+		}
+		// change ../loops/hsl.md and hsl.md to #hsl
+		link.URL = "#" + strings.TrimSuffix(filepath.Base(u.Path), ".md")
+	})
+}
+
 func replaceNextButton(doc *markdown.Document) {
 	for i, block := range doc.Blocks {
 		if isNextButton(block) {
diff --git a/docs/usage.md b/docs/usage.md
index a7c4c42c..c7758b04 100644
--- a/docs/usage.md
+++ b/docs/usage.md
@@ -60,18 +60,21 @@ You can also get help for each subcommand by running it with the
       [<source>]    Source file. Default: stdin.
 
     Flags:
-      -h, --help                Show context-sensitive help.
-      -V, --version             Print version information
-
-          --skip-sleep          Skip evy sleep command ($EVY_SKIP_SLEEP).
-          --svg-out=FILE        Output drawing to SVG file. Stdout: -.
-          --svg-style=STYLE     Style of top-level SVG element.
-      -s, --no-test-summary     Do not print test summary, only report failed tests.
-          --fail-fast           Stop execution on first failed test.
-      -t, --txtar=MEMBER        Read source from txtar file and select select given
-                                filename
-          --rand-seed=INT-64    Seed for random number generation (0 means random
-                                seed).
+      -h, --help                 Show context-sensitive help.
+      -V, --version              Print version information
+
+          --skip-sleep           Skip evy sleep command ($EVY_SKIP_SLEEP).
+          --svg-out=FILE         Output drawing to SVG file. Stdout: -.
+          --svg-style=STYLE      Style of top-level SVG element.
+          --svg-width=WIDTH      Width of SVG file.
+          --svg-height=HEIGHT    Height of SVG file.
+      -s, --no-test-summary      Do not print test summary, only report failed
+                                 tests.
+          --fail-fast            Stop execution on first failed test.
+      -t, --txtar=MEMBER         Read source from txtar file and select select given
+                                 filename
+          --rand-seed=INT-64     Seed for random number generation (0 means random
+                                 seed).
 
 <!-- genend -->
 
diff --git a/frontend/docs/usage.html b/frontend/docs/usage.html
index 79135976..0c70e7f0 100644
--- a/frontend/docs/usage.html
+++ b/frontend/docs/usage.html
@@ -620,18 +620,21 @@ <h3><a id="evy-run-help" href="#evy-run-help" class="anchor">#</a>evy run --help
   [&lt;source&gt;]    Source file. Default: stdin.
 
 Flags:
-  -h, --help                Show context-sensitive help.
-  -V, --version             Print version information
+  -h, --help                 Show context-sensitive help.
+  -V, --version              Print version information
 
-      --skip-sleep          Skip evy sleep command ($EVY_SKIP_SLEEP).
-      --svg-out=FILE        Output drawing to SVG file. Stdout: -.
-      --svg-style=STYLE     Style of top-level SVG element.
-  -s, --no-test-summary     Do not print test summary, only report failed tests.
-      --fail-fast           Stop execution on first failed test.
-  -t, --txtar=MEMBER        Read source from txtar file and select select given
-                            filename
-      --rand-seed=INT-64    Seed for random number generation (0 means random
-                            seed).
+      --skip-sleep           Skip evy sleep command ($EVY_SKIP_SLEEP).
+      --svg-out=FILE         Output drawing to SVG file. Stdout: -.
+      --svg-style=STYLE      Style of top-level SVG element.
+      --svg-width=WIDTH      Width of SVG file.
+      --svg-height=HEIGHT    Height of SVG file.
+  -s, --no-test-summary      Do not print test summary, only report failed
+                             tests.
+      --fail-fast            Stop execution on first failed test.
+  -t, --txtar=MEMBER         Read source from txtar file and select select given
+                             filename
+      --rand-seed=INT-64     Seed for random number generation (0 means random
+                             seed).
 </code></pre>
         <!-- genend -->
         <h3><a id="evy-fmt-help" href="#evy-fmt-help" class="anchor">#</a>evy fmt --help</h3>
diff --git a/frontend/docs/usage.htmlf b/frontend/docs/usage.htmlf
index 211fc27d..b0042d78 100644
--- a/frontend/docs/usage.htmlf
+++ b/frontend/docs/usage.htmlf
@@ -50,18 +50,21 @@ Arguments:
   [&lt;source&gt;]    Source file. Default: stdin.
 
 Flags:
-  -h, --help                Show context-sensitive help.
-  -V, --version             Print version information
-
-      --skip-sleep          Skip evy sleep command ($EVY_SKIP_SLEEP).
-      --svg-out=FILE        Output drawing to SVG file. Stdout: -.
-      --svg-style=STYLE     Style of top-level SVG element.
-  -s, --no-test-summary     Do not print test summary, only report failed tests.
-      --fail-fast           Stop execution on first failed test.
-  -t, --txtar=MEMBER        Read source from txtar file and select select given
-                            filename
-      --rand-seed=INT-64    Seed for random number generation (0 means random
-                            seed).
+  -h, --help                 Show context-sensitive help.
+  -V, --version              Print version information
+
+      --skip-sleep           Skip evy sleep command ($EVY_SKIP_SLEEP).
+      --svg-out=FILE         Output drawing to SVG file. Stdout: -.
+      --svg-style=STYLE      Style of top-level SVG element.
+      --svg-width=WIDTH      Width of SVG file.
+      --svg-height=HEIGHT    Height of SVG file.
+  -s, --no-test-summary      Do not print test summary, only report failed
+                             tests.
+      --fail-fast            Stop execution on first failed test.
+  -t, --txtar=MEMBER         Read source from txtar file and select select given
+                             filename
+      --rand-seed=INT-64     Seed for random number generation (0 means random
+                             seed).
 </code></pre>
 <!-- genend -->
 <h3><a id="evy-fmt-help" href="#evy-fmt-help" class="anchor">#</a>evy fmt --help</h3>
diff --git a/frontend/lab/samples/forloops/bubble.md b/frontend/lab/samples/forloops/bubble.md
index 7a579f74..f4cab147 100644
--- a/frontend/lab/samples/forloops/bubble.md
+++ b/frontend/lab/samples/forloops/bubble.md
@@ -23,7 +23,7 @@ end
 
 Change the x-coordinate by a maximum of ± 2 of its previous value.
 
-![Animated bubble](samples/forloops/img/bubble.gif)
+![Animated bubble](img/bubble.gif)
 
 ## [>] Hint
 
diff --git a/frontend/lab/samples/forloops/forcircles.md b/frontend/lab/samples/forloops/forcircles.md
index b4a0335b..92beebe1 100644
--- a/frontend/lab/samples/forloops/forcircles.md
+++ b/frontend/lab/samples/forloops/forcircles.md
@@ -26,10 +26,10 @@ Use `for` loops and circles to create your own unique drawing.
 | -------------------------------- | ---------------------- |
 | ![Circle with random radius]     | ![Cat made of circles] |
 
-[Circle with different outline]: samples/forloops/img/circle-outline.svg "evy:edit"
-[Circle in wig shape]: samples/forloops/img/circle-wig.svg "evy:edit"
-[Circle with random radius]: samples/forloops/img/circle-rand.svg "evy:edit"
-[Cat made of circles]: samples/forloops/img/circle-cat.svg "evy:edit"
+[Circle with different outline]: img/circle-outline.svg "evy:edit"
+[Circle in wig shape]: img/circle-wig.svg "evy:edit"
+[Circle with random radius]: img/circle-rand.svg "evy:edit"
+[Cat made of circles]: img/circle-cat.svg "evy:edit"
 
 [Next]
 
@@ -37,7 +37,7 @@ Use `for` loops and circles to create your own unique drawing.
 
 Use the code from the cat sample above and make its eyes move:
 
-![Black cat with moving yellow eyes](samples/forloops/img/cat.gif)
+![Black cat with moving yellow eyes](img/cat.gif)
 
 ## [>] Hint
 
diff --git a/frontend/lab/samples/forloops/img/10-lines.svg b/frontend/lab/samples/forloops/img/10-lines.svg
index 91815a4e..115e02b6 100644
--- a/frontend/lab/samples/forloops/img/10-lines.svg
+++ b/frontend/lab/samples/forloops/img/10-lines.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/forloops/img/20-lines.svg b/frontend/lab/samples/forloops/img/20-lines.svg
index 6b321237..3fe0cbf1 100644
--- a/frontend/lab/samples/forloops/img/20-lines.svg
+++ b/frontend/lab/samples/forloops/img/20-lines.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/forloops/img/4-lines.svg b/frontend/lab/samples/forloops/img/4-lines.svg
index 879b9ddc..98025543 100644
--- a/frontend/lab/samples/forloops/img/4-lines.svg
+++ b/frontend/lab/samples/forloops/img/4-lines.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/forloops/img/50-lines.svg b/frontend/lab/samples/forloops/img/50-lines.svg
index afa55263..2f07b48b 100644
--- a/frontend/lab/samples/forloops/img/50-lines.svg
+++ b/frontend/lab/samples/forloops/img/50-lines.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/forloops/img/bubble.svg b/frontend/lab/samples/forloops/img/bubble.svg
index fb14abc5..a30a221c 100644
--- a/frontend/lab/samples/forloops/img/bubble.svg
+++ b/frontend/lab/samples/forloops/img/bubble.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/forloops/img/circle-cat.svg b/frontend/lab/samples/forloops/img/circle-cat.svg
index e6d1a2e8..a20515c5 100644
--- a/frontend/lab/samples/forloops/img/circle-cat.svg
+++ b/frontend/lab/samples/forloops/img/circle-cat.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/forloops/img/circle-outline.svg b/frontend/lab/samples/forloops/img/circle-outline.svg
index 34a6d5b8..b085fe47 100644
--- a/frontend/lab/samples/forloops/img/circle-outline.svg
+++ b/frontend/lab/samples/forloops/img/circle-outline.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/forloops/img/circle-rand.svg b/frontend/lab/samples/forloops/img/circle-rand.svg
index 479a99a7..58c5fd66 100644
--- a/frontend/lab/samples/forloops/img/circle-rand.svg
+++ b/frontend/lab/samples/forloops/img/circle-rand.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/forloops/img/circle-wig.svg b/frontend/lab/samples/forloops/img/circle-wig.svg
index ee4e0966..9b64acc4 100644
--- a/frontend/lab/samples/forloops/img/circle-wig.svg
+++ b/frontend/lab/samples/forloops/img/circle-wig.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/forloops/img/lines.svg b/frontend/lab/samples/forloops/img/lines.svg
index 4b26d106..eacd9e6c 100644
--- a/frontend/lab/samples/forloops/img/lines.svg
+++ b/frontend/lab/samples/forloops/img/lines.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/forloops/img/zebra.svg b/frontend/lab/samples/forloops/img/zebra.svg
index aacad438..f3eb6e1b 100644
--- a/frontend/lab/samples/forloops/img/zebra.svg
+++ b/frontend/lab/samples/forloops/img/zebra.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/forloops/lines-show.md b/frontend/lab/samples/forloops/lines-show.md
index 06b0d76d..8dede646 100644
--- a/frontend/lab/samples/forloops/lines-show.md
+++ b/frontend/lab/samples/forloops/lines-show.md
@@ -12,4 +12,4 @@ For this program we need two **nested** `for` loops.
 - Create a _static_ image with 10 lines (see picture below).
 - What needs to change to turn the static image into an animation?
 
-  ![Static lines](samples/forloops/img/10-lines.svg)
+  ![Static lines](img/10-lines.svg)
diff --git a/frontend/lab/samples/forloops/lines.md b/frontend/lab/samples/forloops/lines.md
index 67688dcb..d2ba50eb 100644
--- a/frontend/lab/samples/forloops/lines.md
+++ b/frontend/lab/samples/forloops/lines.md
@@ -2,7 +2,7 @@
 
 ⭐ Can you complete the program create this output?
 
-![Static lines](samples/forloops/img/lines.svg)
+![Static lines](img/lines.svg)
 
 [Next]
 
@@ -26,10 +26,10 @@ end
 | ----------- | ----------- |
 | ![20 Lines] | ![50 Lines] |
 
-[4 Lines]: samples/forloops/img/4-lines.svg "evy:edit"
-[10 Lines]: samples/forloops/img/10-lines.svg "evy:edit"
-[20 Lines]: samples/forloops/img/20-lines.svg "evy:edit"
-[50 Lines]: samples/forloops/img/50-lines.svg "evy:edit"
+[4 Lines]: img/4-lines.svg "evy:edit"
+[10 Lines]: img/10-lines.svg "evy:edit"
+[20 Lines]: img/20-lines.svg "evy:edit"
+[50 Lines]: img/50-lines.svg "evy:edit"
 
 [Next]
 
diff --git a/frontend/lab/samples/forloops/zebra.md b/frontend/lab/samples/forloops/zebra.md
index a0bf8043..a158c705 100644
--- a/frontend/lab/samples/forloops/zebra.md
+++ b/frontend/lab/samples/forloops/zebra.md
@@ -32,7 +32,7 @@ values?
 
 ⭐ Can you use `hsl` to create a green-to-red gradient animation like below?
 
-![Animate rainbow zebra crossing](samples/forloops/img/zebra.gif)
+![Animate rainbow zebra crossing](img/zebra.gif)
 
 ## [>] Hint
 
diff --git a/frontend/lab/samples/ifs/alpha.md b/frontend/lab/samples/ifs/alpha.md
index f3b5e48a..f0b02e6c 100644
--- a/frontend/lab/samples/ifs/alpha.md
+++ b/frontend/lab/samples/ifs/alpha.md
@@ -12,7 +12,7 @@
 
 Complete the code to create the following drawing:
 
-![simple drawing of circles and squares](samples/ifs/img/red-dot-two-squares.svg)
+![simple drawing of circles and squares](img/red-dot-two-squares.svg)
 
 [Next]
 
@@ -21,11 +21,11 @@ Complete the code to create the following drawing:
 Tweak the Alpha parameter to the [`hsl`] function, its fourth parameter, to make
 the bottom left quadrant grey:
 
-![simple drawing of circles and squares](samples/ifs/img/red-dot-two-squares-alpha.svg)
+![simple drawing of circles and squares](img/red-dot-two-squares-alpha.svg)
 
 ## [>] Docs
 
-In the interactive [`hsl`] function [color explorer](#hsl) we learned how hsl
+In the interactive [`hsl`] function [color explorer](../loops/hsl.md) we learned how hsl
 takes three values: hue, saturation, lightness values to create a color.
 
 There is an optional fourth value called **alpha** that controls the
diff --git a/frontend/lab/samples/ifs/bounce-show.md b/frontend/lab/samples/ifs/bounce-show.md
index e7dbb333..5f816ec8 100644
--- a/frontend/lab/samples/ifs/bounce-show.md
+++ b/frontend/lab/samples/ifs/bounce-show.md
@@ -9,4 +9,4 @@ Hit **Run** and watch the ball bounce!
 - How is the fading effect created?
 - What concepts from previous labs are being used here?
 
-Let's explore further in the interactive [Bounce Challenge](#bounce).
+Let's explore further in the interactive [Bounce Challenge](bounce.md).
diff --git a/frontend/lab/samples/ifs/bounce.md b/frontend/lab/samples/ifs/bounce.md
index 80121b77..5caae7a6 100644
--- a/frontend/lab/samples/ifs/bounce.md
+++ b/frontend/lab/samples/ifs/bounce.md
@@ -2,15 +2,14 @@
 
 ⭐ **Your Challenge:** Can you create a bouncing ball animation?
 
-Check out the [bouncing ball page 🏓📺](#bounce-show) or observe the
+Check out the [bouncing ball page 🏓📺](bounce-show.md) or observe the
 animation below.
 
 ## Demo
 
-<details>
-  <summary>Animation demo</summary>
-  <p><img src="samples/ifs/img/bounce.gif" alt="small centered circle" /></p>
-</details>
+### [>] Animation demo
+
+![small centered circle](img/bounce.gif)
 
 ## Animation notes 🗒
 
@@ -24,10 +23,10 @@ animation below.
 ⭐ Start by making a single green circle at position `0 50`.
 
 ⭐ Move the ball horizontally across the screen, like in the
-[🟣🚚 Move challenge](#move) in the Introduction lab, don't worry about the bounce yet.
+[🟣🚚 Move challenge](../intro/move.md) in the Introduction lab, don't worry about the bounce yet.
 
 ⭐ Finally, to change direction at the edges use the reversible increment trick
-from the [Pulse challenge](#pulse).
+from the [Pulse challenge](pulse.md).
 
 ### [>] Hint
 
diff --git a/frontend/lab/samples/ifs/img/2-squares.svg b/frontend/lab/samples/ifs/img/2-squares.svg
index 0cddd03d..ffb49bce 100644
--- a/frontend/lab/samples/ifs/img/2-squares.svg
+++ b/frontend/lab/samples/ifs/img/2-squares.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/ifs/img/apartments.svg b/frontend/lab/samples/ifs/img/apartments.svg
index 65f67935..f811d16b 100644
--- a/frontend/lab/samples/ifs/img/apartments.svg
+++ b/frontend/lab/samples/ifs/img/apartments.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/ifs/img/bauhaus.svg b/frontend/lab/samples/ifs/img/bauhaus.svg
index a3e9f2b4..084c9fdb 100644
--- a/frontend/lab/samples/ifs/img/bauhaus.svg
+++ b/frontend/lab/samples/ifs/img/bauhaus.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/ifs/img/blue-pattern.svg b/frontend/lab/samples/ifs/img/blue-pattern.svg
index 4f6b3182..a98f4c5f 100644
--- a/frontend/lab/samples/ifs/img/blue-pattern.svg
+++ b/frontend/lab/samples/ifs/img/blue-pattern.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/ifs/img/bwrect.svg b/frontend/lab/samples/ifs/img/bwrect.svg
index 88eaf77d..5d64909c 100644
--- a/frontend/lab/samples/ifs/img/bwrect.svg
+++ b/frontend/lab/samples/ifs/img/bwrect.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/ifs/img/grass.svg b/frontend/lab/samples/ifs/img/grass.svg
index eab13807..ea0ba9ff 100644
--- a/frontend/lab/samples/ifs/img/grass.svg
+++ b/frontend/lab/samples/ifs/img/grass.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/ifs/img/house.svg b/frontend/lab/samples/ifs/img/house.svg
index f4209ed3..da2e8424 100644
--- a/frontend/lab/samples/ifs/img/house.svg
+++ b/frontend/lab/samples/ifs/img/house.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/ifs/img/mondrian.svg b/frontend/lab/samples/ifs/img/mondrian.svg
index 432c76ff..bf8abcab 100644
--- a/frontend/lab/samples/ifs/img/mondrian.svg
+++ b/frontend/lab/samples/ifs/img/mondrian.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/ifs/img/monster.svg b/frontend/lab/samples/ifs/img/monster.svg
index 880aebd2..eaf47142 100644
--- a/frontend/lab/samples/ifs/img/monster.svg
+++ b/frontend/lab/samples/ifs/img/monster.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/ifs/img/perspective.svg b/frontend/lab/samples/ifs/img/perspective.svg
index 6065e00f..87d8b8b8 100644
--- a/frontend/lab/samples/ifs/img/perspective.svg
+++ b/frontend/lab/samples/ifs/img/perspective.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/ifs/img/pulse-step-1.svg b/frontend/lab/samples/ifs/img/pulse-step-1.svg
index 901b781b..dd907f06 100644
--- a/frontend/lab/samples/ifs/img/pulse-step-1.svg
+++ b/frontend/lab/samples/ifs/img/pulse-step-1.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/ifs/img/pulse-step-2.svg b/frontend/lab/samples/ifs/img/pulse-step-2.svg
index 2d041418..cebbadb3 100644
--- a/frontend/lab/samples/ifs/img/pulse-step-2.svg
+++ b/frontend/lab/samples/ifs/img/pulse-step-2.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/ifs/img/quarter-circle-triangle.svg b/frontend/lab/samples/ifs/img/quarter-circle-triangle.svg
index 9d9fc466..54ad6b7e 100644
--- a/frontend/lab/samples/ifs/img/quarter-circle-triangle.svg
+++ b/frontend/lab/samples/ifs/img/quarter-circle-triangle.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/ifs/img/quarter-circle.svg b/frontend/lab/samples/ifs/img/quarter-circle.svg
index 6b59f664..963ecb6c 100644
--- a/frontend/lab/samples/ifs/img/quarter-circle.svg
+++ b/frontend/lab/samples/ifs/img/quarter-circle.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/ifs/img/randrect.svg b/frontend/lab/samples/ifs/img/randrect.svg
index 1a556a13..4533d72c 100644
--- a/frontend/lab/samples/ifs/img/randrect.svg
+++ b/frontend/lab/samples/ifs/img/randrect.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/ifs/img/red-dot-two-squares-alpha.svg b/frontend/lab/samples/ifs/img/red-dot-two-squares-alpha.svg
index 1629bb93..c376b616 100644
--- a/frontend/lab/samples/ifs/img/red-dot-two-squares-alpha.svg
+++ b/frontend/lab/samples/ifs/img/red-dot-two-squares-alpha.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/ifs/img/red-dot-two-squares.svg b/frontend/lab/samples/ifs/img/red-dot-two-squares.svg
index 2c48c893..5398d0fd 100644
--- a/frontend/lab/samples/ifs/img/red-dot-two-squares.svg
+++ b/frontend/lab/samples/ifs/img/red-dot-two-squares.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/ifs/img/red-green-squares.svg b/frontend/lab/samples/ifs/img/red-green-squares.svg
index 7ab019b8..3d1b5a49 100644
--- a/frontend/lab/samples/ifs/img/red-green-squares.svg
+++ b/frontend/lab/samples/ifs/img/red-green-squares.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/ifs/img/stripes.svg b/frontend/lab/samples/ifs/img/stripes.svg
index bf19930e..62c146d2 100644
--- a/frontend/lab/samples/ifs/img/stripes.svg
+++ b/frontend/lab/samples/ifs/img/stripes.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/ifs/img/target-blue.svg b/frontend/lab/samples/ifs/img/target-blue.svg
index 2d041418..cebbadb3 100644
--- a/frontend/lab/samples/ifs/img/target-blue.svg
+++ b/frontend/lab/samples/ifs/img/target-blue.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/ifs/img/tetris.svg b/frontend/lab/samples/ifs/img/tetris.svg
index 0108f53c..2495d115 100644
--- a/frontend/lab/samples/ifs/img/tetris.svg
+++ b/frontend/lab/samples/ifs/img/tetris.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/ifs/img/warm-squares.svg b/frontend/lab/samples/ifs/img/warm-squares.svg
index e6ab9ad6..b0c588fc 100644
--- a/frontend/lab/samples/ifs/img/warm-squares.svg
+++ b/frontend/lab/samples/ifs/img/warm-squares.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/ifs/img/window.svg b/frontend/lab/samples/ifs/img/window.svg
index a2fa9e94..614e6581 100644
--- a/frontend/lab/samples/ifs/img/window.svg
+++ b/frontend/lab/samples/ifs/img/window.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/ifs/pi.md b/frontend/lab/samples/ifs/pi.md
index e1a5e7c2..e408a39c 100644
--- a/frontend/lab/samples/ifs/pi.md
+++ b/frontend/lab/samples/ifs/pi.md
@@ -20,7 +20,7 @@ answer.
 
 ## ⭐ Quarter circle
 
-![quarter circle](samples/ifs/img/quarter-circle.svg)
+![quarter circle](img/quarter-circle.svg)
 
 What's the **area** of the red **quarter-circle** if the radius is `1`? Can
 you estimate it to the nearest tenth?
@@ -72,7 +72,7 @@ using the Pythagorean theorem `a² + b² = c²`:
 c := sqrt a*a+b*b
 ```
 
-![quarter circle](samples/ifs/img/quarter-circle-triangle.svg)
+![quarter circle](img/quarter-circle-triangle.svg)
 
 If this distance is less than or equal to `1`, the point lies within the
 quarter-circle and should be colored red. (Remember, we're scaling `x` and `y`
diff --git a/frontend/lab/samples/ifs/pulse.md b/frontend/lab/samples/ifs/pulse.md
index 359f32f1..5afaba67 100644
--- a/frontend/lab/samples/ifs/pulse.md
+++ b/frontend/lab/samples/ifs/pulse.md
@@ -4,7 +4,7 @@
 
 Write a program that draws:
 
-![small centered circle](samples/ifs/img/pulse-step-1.svg)
+![small centered circle](img/pulse-step-1.svg)
 
 - Background: `"black"`
 - Outline width: `1`
@@ -30,7 +30,7 @@ circle ❓
 
 Extend your program to draw:
 
-![many concentric circles](samples/ifs/img/pulse-step-2.svg)
+![many concentric circles](img/pulse-step-2.svg)
 
 Use a variable `r` for the circle radius, starting at `1`.
 
@@ -60,7 +60,7 @@ animation.
 
 ### [>] Demo
 
-![small centered circle](samples/ifs/img/pulse-step-3.gif)
+![small centered circle](img/pulse-step-3.gif)
 
 ### [>] Hint
 
@@ -83,7 +83,7 @@ Use `clear` with `hsl 0 0 0 15`.
 
 ### [>] Demo
 
-![small centered circle](samples/ifs/img/pulse-step-4.gif)
+![small centered circle](img/pulse-step-4.gif)
 
 ### [>] Hint
 
@@ -108,7 +108,7 @@ Reduce the
 
 ### [>] Demo
 
-![small centered circle](samples/ifs/img/pulse-step-5.gif)
+![small centered circle](img/pulse-step-5.gif)
 
 ### [>] Hint
 
diff --git a/frontend/lab/samples/ifs/rectangles.md b/frontend/lab/samples/ifs/rectangles.md
index 71339b45..d32781f9 100644
--- a/frontend/lab/samples/ifs/rectangles.md
+++ b/frontend/lab/samples/ifs/rectangles.md
@@ -20,8 +20,8 @@ Need ideas? **Click** on the images below for their Evy code.
 
 Be inspired by culture and art
 
-[Perspective]: samples/ifs/img/perspective.svg "evy:edit"
-[2 Squares]: samples/ifs/img/2-squares.svg "evy:edit"
+[Perspective]: img/perspective.svg "evy:edit"
+[2 Squares]: img/2-squares.svg "evy:edit"
 
 ### [>] Samples
 
@@ -29,10 +29,10 @@ Be inspired by culture and art
 | ---------- | ----------- |
 | ![Monster] | ![Tetris]   |
 
-[Bauhaus]: samples/ifs/img/bauhaus.svg "evy:edit"
-[Mondrian]: samples/ifs/img/mondrian.svg "evy:edit"
-[Monster]: samples/ifs/img/monster.svg "evy:edit"
-[Tetris]: samples/ifs/img/tetris.svg "evy:edit"
+[Bauhaus]: img/bauhaus.svg "evy:edit"
+[Mondrian]: img/mondrian.svg "evy:edit"
+[Monster]: img/monster.svg "evy:edit"
+[Tetris]: img/tetris.svg "evy:edit"
 
 #### [>] More
 
@@ -42,10 +42,10 @@ Be inspired by culture and art
 
 [Next]
 
-[Window]: samples/ifs/img/window.svg "evy:edit"
-[Apartments]: samples/ifs/img/apartments.svg "evy:edit"
-[Black and White Rectangles]: samples/ifs/img/bwrect.svg "evy:edit"
-[Red Green Squares]: samples/ifs/img/red-green-squares.svg "evy:edit"
+[Window]: img/window.svg "evy:edit"
+[Apartments]: img/apartments.svg "evy:edit"
+[Black and White Rectangles]: img/bwrect.svg "evy:edit"
+[Red Green Squares]: img/red-green-squares.svg "evy:edit"
 
 ## ⭐ Use Loops and Randomness
 
@@ -68,7 +68,7 @@ end
 | ---------- | --------------------------- |
 | ![Stripes] | ![Warm Squares]             |
 
-[Grass]: samples/ifs/img/grass.svg "evy:edit"
-[Random Purple Rectangles]: samples/ifs/img/randrect.svg "evy:edit"
-[Warm Squares]: samples/ifs/img/warm-squares.svg "evy:edit"
-[Stripes]: samples/ifs/img/stripes.svg "evy:edit"
+[Grass]: img/grass.svg "evy:edit"
+[Random Purple Rectangles]: img/randrect.svg "evy:edit"
+[Warm Squares]: img/warm-squares.svg "evy:edit"
+[Stripes]: img/stripes.svg "evy:edit"
diff --git a/frontend/lab/samples/intro/circles.md b/frontend/lab/samples/intro/circles.md
index c64e7870..204347e2 100644
--- a/frontend/lab/samples/intro/circles.md
+++ b/frontend/lab/samples/intro/circles.md
@@ -18,10 +18,10 @@ Can you move the circle center to each corner?
 | ----------------------------- | ------------------------------ |
 | ![Quarter circle bottom left] | ![Quarter circle bottom right] |
 
-[Quarter circle top left]: samples/intro/img/circles-top-left.svg
-[Quarter circle top right]: samples/intro/img/circles-top-right.svg
-[Quarter circle bottom left]: samples/intro/img/circles-bottom-left.svg
-[Quarter circle bottom right]: samples/intro/img/circles-bottom-right.svg
+[Quarter circle top left]: img/circles-top-left.svg
+[Quarter circle top right]: img/circles-top-right.svg
+[Quarter circle bottom left]: img/circles-bottom-left.svg
+[Quarter circle bottom right]: img/circles-bottom-right.svg
 
 [Next]
 
@@ -36,10 +36,10 @@ fully or partially visible.
 | ----------------------------- | ------------------------------------------------- |
 | ![Overlapping circles]        | ![Cloud made from circles]                        |
 
-[Three circles of same size]: samples/intro/img/circles-anika.svg
-[Three large overlapping circles in warm colors]: samples/intro/img/circles-mali.svg
-[Overlapping circles]: samples/intro/img/circles-camh.svg
-[Cloud made from circles]: samples/intro/img/circles-kathi.svg
+[Three circles of same size]: img/circles-anika.svg
+[Three large overlapping circles in warm colors]: img/circles-mali.svg
+[Overlapping circles]: img/circles-camh.svg
+[Cloud made from circles]: img/circles-kathi.svg
 
 [Next]
 
diff --git a/frontend/lab/samples/intro/coords.md b/frontend/lab/samples/intro/coords.md
index 8121f3e3..fd61ed9c 100644
--- a/frontend/lab/samples/intro/coords.md
+++ b/frontend/lab/samples/intro/coords.md
@@ -23,7 +23,7 @@ Imagine the canvas as a grid. Each point on this grid is identified by two numbe
 
 You write these coordinates together like this: `x y`.
 
-![Coordinates 30 60 on the Evy Canvas](samples/intro/img/coords-30-60.svg)
+![Coordinates 30 60 on the Evy Canvas](img/coords-30-60.svg)
 [Image Source]
 
 [Image Source]: https://play.evy.dev/#content=H4sIAAAAAAAAA2WRQW6DMBBF9z7Fl9cFbIidmG2lXgKxoOAQqwRHhpDQqnevDIaq6mpmnv/M99hJglb32lWjRm2ta4YoY5Fk8TC1eJjxQpIEeprh7j2iaJjayN7H/9I/QE8zqTtdOdDHxYyaktaZhtS2sw70vavqD0oephkvYPGBkM70GgycMXK1k0/ZyjjzKbnZbkaxFCUKdQKPxZr4euVBtEzxMBZQp9KDEDwn6/xsN8gYJNv85W6VMQhVokgVxLFEkfEQFx5EqYL0VukxiI+QvNw48Q836ue4L8rJ2fYjvgbzqfMDztXVdHNO34yr8Gob/YKr7e1wq2pNv8NNlQAnfgrok66IQ4mA5h1tIkZDYyog0wCXJbeDjCNVW3/+yzmDkJtVnnke/svphu7vJhmpjas7DU5+AAOGBlk8AgAA
diff --git a/frontend/lab/samples/intro/img/circles-anika.svg b/frontend/lab/samples/intro/img/circles-anika.svg
index e9fc1ebf..d656af3a 100644
--- a/frontend/lab/samples/intro/img/circles-anika.svg
+++ b/frontend/lab/samples/intro/img/circles-anika.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/intro/img/circles-bottom-left.svg b/frontend/lab/samples/intro/img/circles-bottom-left.svg
index 7c146a01..bbb2374a 100644
--- a/frontend/lab/samples/intro/img/circles-bottom-left.svg
+++ b/frontend/lab/samples/intro/img/circles-bottom-left.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/intro/img/circles-bottom-right.svg b/frontend/lab/samples/intro/img/circles-bottom-right.svg
index 4b5bfa48..9f093127 100644
--- a/frontend/lab/samples/intro/img/circles-bottom-right.svg
+++ b/frontend/lab/samples/intro/img/circles-bottom-right.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/intro/img/circles-camh.svg b/frontend/lab/samples/intro/img/circles-camh.svg
index 29e43395..7d490055 100644
--- a/frontend/lab/samples/intro/img/circles-camh.svg
+++ b/frontend/lab/samples/intro/img/circles-camh.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/intro/img/circles-kathi.svg b/frontend/lab/samples/intro/img/circles-kathi.svg
index 1381b74a..57c10c63 100644
--- a/frontend/lab/samples/intro/img/circles-kathi.svg
+++ b/frontend/lab/samples/intro/img/circles-kathi.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/intro/img/circles-mali.svg b/frontend/lab/samples/intro/img/circles-mali.svg
index 1330de67..e732e426 100644
--- a/frontend/lab/samples/intro/img/circles-mali.svg
+++ b/frontend/lab/samples/intro/img/circles-mali.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/intro/img/circles-top-left.svg b/frontend/lab/samples/intro/img/circles-top-left.svg
index 4e27349a..1435b1b7 100644
--- a/frontend/lab/samples/intro/img/circles-top-left.svg
+++ b/frontend/lab/samples/intro/img/circles-top-left.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/intro/img/circles-top-right.svg b/frontend/lab/samples/intro/img/circles-top-right.svg
index 329cd620..eca82cc1 100644
--- a/frontend/lab/samples/intro/img/circles-top-right.svg
+++ b/frontend/lab/samples/intro/img/circles-top-right.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/intro/img/coords-30-60.svg b/frontend/lab/samples/intro/img/coords-30-60.svg
index 4759321e..ce3e5bb9 100644
--- a/frontend/lab/samples/intro/img/coords-30-60.svg
+++ b/frontend/lab/samples/intro/img/coords-30-60.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/intro/img/move-6circles.svg b/frontend/lab/samples/intro/img/move-6circles.svg
index 7d454185..57b49a24 100644
--- a/frontend/lab/samples/intro/img/move-6circles.svg
+++ b/frontend/lab/samples/intro/img/move-6circles.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/intro/move.md b/frontend/lab/samples/intro/move.md
index 639760ac..136da2fe 100644
--- a/frontend/lab/samples/intro/move.md
+++ b/frontend/lab/samples/intro/move.md
@@ -7,7 +7,7 @@ Can you draw 6 purple circles at x coordinates `0`, `20`, `40`, `60`, `80`, and
 
 ### [>] Demo
 
-![6 circles on horizontally center aligned](samples/intro/img/move-6circles.svg)
+![6 circles on horizontally center aligned](img/move-6circles.svg)
 
 [Next]
 
@@ -47,7 +47,7 @@ Can you change the program to make the circle move from left to right, using the
 
 ### [>] Demo
 
-![one horizontally jumping circle](samples/intro/img/1-jumpy-circle.gif)
+![one horizontally jumping circle](img/1-jumpy-circle.gif)
 
 ### [>] Hint
 
@@ -71,7 +71,7 @@ Reduce the `x` increment and the `sleep` time.
 
 ### [>] Demo
 
-![one horizontally moving circle](samples/intro/img/1-circle.gif)
+![one horizontally moving circle](img/1-circle.gif)
 
 ### [>] Hint
 
@@ -92,7 +92,7 @@ Make 2 circles move in opposite direction.
 
 ### [>] Demo
 
-![two horizontally moving circles](samples/intro/img/2-circles.gif)
+![two horizontally moving circles](img/2-circles.gif)
 
 ### [>] Hint
 
@@ -110,7 +110,7 @@ circle 10
 
 ### [>] Demo
 
-![four moving circles](samples/intro/img/4-circles.gif)
+![four moving circles](img/4-circles.gif)
 
 ### [>] Hint
 
diff --git a/frontend/lab/samples/loops/gradient-show.md b/frontend/lab/samples/loops/gradient-show.md
index 167ca0df..847a9fa1 100644
--- a/frontend/lab/samples/loops/gradient-show.md
+++ b/frontend/lab/samples/loops/gradient-show.md
@@ -13,7 +13,7 @@ How would you go about writing this program?
 
 - Break down the problem into smaller bits.
 - Create a static image with line `width 10`:
-  ![thick vertical lines](samples/loops/img/gradient-thick.svg)
+  ![thick vertical lines](img/gradient-thick.svg)
 - Animate the lines with the `sleep` command.
 - Reduce the line width, move, sleep and loop increment.
 
@@ -29,4 +29,4 @@ line 80 50
 
 Output:
 
-![Line from 10 20 to 80 50](samples/loops/img/gradient-line.svg)
+![Line from 10 20 to 80 50](img/gradient-line.svg)
diff --git a/frontend/lab/samples/loops/img/gradient-line.svg b/frontend/lab/samples/loops/img/gradient-line.svg
index 03cabd3d..b304ac00 100644
--- a/frontend/lab/samples/loops/img/gradient-line.svg
+++ b/frontend/lab/samples/loops/img/gradient-line.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/loops/img/gradient-thick.svg b/frontend/lab/samples/loops/img/gradient-thick.svg
index e5cf92a7..a74db87a 100644
--- a/frontend/lab/samples/loops/img/gradient-thick.svg
+++ b/frontend/lab/samples/loops/img/gradient-thick.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/loops/img/target.svg b/frontend/lab/samples/loops/img/target.svg
index f299131a..cef5aac6 100644
--- a/frontend/lab/samples/loops/img/target.svg
+++ b/frontend/lab/samples/loops/img/target.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/loops/target-show.md b/frontend/lab/samples/loops/target-show.md
index 00ecb8bb..01f85b89 100644
--- a/frontend/lab/samples/loops/target-show.md
+++ b/frontend/lab/samples/loops/target-show.md
@@ -8,6 +8,6 @@ How would you go about writing this program?
 
 - Break down the problem into smaller bits.
 - Create a static image that fits on the canvas:
-  ![target board](samples/loops/img/target.svg)
+  ![target board](img/target.svg)
 - Animate the circles with the <code>sleep</code> command.
 - Increase the starting radius to cover the whole canvas.
diff --git a/frontend/lab/samples/loops/target.md b/frontend/lab/samples/loops/target.md
index fd00b660..cd95533b 100644
--- a/frontend/lab/samples/loops/target.md
+++ b/frontend/lab/samples/loops/target.md
@@ -3,7 +3,7 @@
 ## ⭐ Draw a target board
 
 Draw a target board with concentric circles.
-![Target board](samples/loops/img/target.svg)
+![Target board](img/target.svg)
 
 ## [>] Hint
 
diff --git a/learn/pkg/learn/renderer.go b/learn/pkg/learn/renderer.go
index 7724f905..4adc2a38 100644
--- a/learn/pkg/learn/renderer.go
+++ b/learn/pkg/learn/renderer.go
@@ -346,7 +346,7 @@ func runEvy(source string, t ResultType) string {
 		cli.WithSkipSleep(true),
 		cli.WithOutputWriter(textWriter),
 		cli.WithCls(textWriter.Reset),
-		cli.WithSVG("" /* root style */),
+		cli.WithSVG("", "", "" /* root style, width, height */),
 	}
 	rt := cli.NewRuntime(opts...)
 	eval := evaluator.NewEvaluator(rt)
diff --git a/main.go b/main.go
index bd0a82d2..4441e9b6 100644
--- a/main.go
+++ b/main.go
@@ -136,6 +136,8 @@ type runCmd struct {
 	SkipSleep     bool   `help:"Skip evy sleep command." env:"EVY_SKIP_SLEEP"`
 	SVGOut        string `help:"Output drawing to SVG file. Stdout: -." placeholder:"FILE"`
 	SVGStyle      string `help:"Style of top-level SVG element." placeholder:"STYLE"`
+	SVGWidth      string `help:"Width of SVG file." placeholder:"WIDTH"`
+	SVGHeight     string `help:"Height of SVG file." placeholder:"HEIGHT"`
 	NoTestSummary bool   `short:"s" help:"Do not print test summary, only report failed tests."`
 	FailFast      bool   `help:"Stop execution on first failed test."`
 	Txtar         string `short:"t" help:"Read source from txtar file and select select given filename" placeholder:"MEMBER"`
@@ -222,7 +224,7 @@ func (c *runCmd) fileBytes() ([]byte, error) {
 func (c *runCmd) runtimeOptions() []cli.Option {
 	opts := []cli.Option{cli.WithSkipSleep(c.SkipSleep)}
 	if c.SVGOut != "" {
-		opts = append(opts, cli.WithSVG(c.SVGStyle))
+		opts = append(opts, cli.WithSVG(c.SVGStyle, c.SVGWidth, c.SVGHeight))
 	}
 	return opts
 }
diff --git a/pkg/cli/runtime.go b/pkg/cli/runtime.go
index c18801f5..3166e11c 100644
--- a/pkg/cli/runtime.go
+++ b/pkg/cli/runtime.go
@@ -38,10 +38,12 @@ func WithSkipSleep(skipSleep bool) Option {
 
 // WithSVG sets up an SVG graphics runtime and writes its output to the
 // given writer.
-func WithSVG(svgStyle string) Option {
+func WithSVG(svgStyle string, svgWidth string, svgHeight string) Option {
 	return func(rt *Runtime) {
 		svgRT := svg.NewGraphicsRuntime()
 		svgRT.SVG.Style = svgStyle
+		svgRT.SVG.Width = svgWidth
+		svgRT.SVG.Height = svgHeight
 		rt.GraphicsRuntime = svgRT
 	}
 }
diff --git a/pkg/cli/runtime_test.go b/pkg/cli/runtime_test.go
index a9df568f..14d89b3a 100644
--- a/pkg/cli/runtime_test.go
+++ b/pkg/cli/runtime_test.go
@@ -22,7 +22,7 @@ func TestGraphics(t *testing.T) {
 		t.Run(name, func(t *testing.T) {
 			style := "border: 1px solid red; width: 400px; height: 400px"
 			svgWriter := &bytes.Buffer{}
-			rt := NewRuntime(WithSVG(style), WithSkipSleep(true))
+			rt := NewRuntime(WithSVG(style, "", ""), WithSkipSleep(true))
 
 			eval := evaluator.NewEvaluator(rt)
 			evyFilename := strings.TrimSuffix(file, filepath.Ext(file)) + ".evy"