diff --git a/e2etests/report/main.go b/e2etests/report/main.go
index f71c7f1cd..632841700 100644
--- a/e2etests/report/main.go
+++ b/e2etests/report/main.go
@@ -100,7 +100,11 @@ func main() {
 				}
 
 				if matchTestSet && matchTestCase {
-					fullPath := filepath.Join(path, testFile.Name())
+					absPath, err := filepath.Abs(path)
+					if err != nil {
+						stdlog.Fatal(err)
+					}
+					fullPath := filepath.Join(absPath, testFile.Name())
 					hasGot := false
 					gotPath := strings.Replace(fullPath, "exp.svg", "got.svg", 1)
 					if _, err := os.Stat(gotPath); err == nil {
@@ -143,10 +147,6 @@ func main() {
 			panic(err)
 		}
 
-		tmplData := TemplateData{
-			Tests: tests,
-		}
-
 		path := os.Getenv("REPORT_OUTPUT")
 		if path == "" {
 			path = filepath.Join(testDir, "./out/e2e_report.html")
@@ -159,7 +159,34 @@ func main() {
 		if err != nil {
 			panic(fmt.Errorf("error creating file `%s`. %v", path, err))
 		}
-		if err := tmpl.Execute(f, tmplData); err != nil {
+		absReportDir, err := filepath.Abs(filepath.Dir(path))
+		if err != nil {
+			stdlog.Fatal(err)
+		}
+
+		// get the test path relative to the report
+		reportRelPath := func(testPath string) string {
+			absTestPath, err := filepath.Abs(testPath)
+			if err != nil {
+				stdlog.Fatal(err)
+			}
+			relTestPath, err := filepath.Rel(absReportDir, absTestPath)
+			if err != nil {
+				stdlog.Fatal(err)
+			}
+			return relTestPath
+		}
+
+		// update test paths to be relative to report file
+		for i := range tests {
+			testItem := &tests[i]
+			testItem.GotSVG = reportRelPath(testItem.GotSVG)
+			if testItem.ExpSVG != nil {
+				*testItem.ExpSVG = reportRelPath(*testItem.ExpSVG)
+			}
+		}
+
+		if err := tmpl.Execute(f, TemplateData{Tests: tests}); err != nil {
 			panic(err)
 		}
 	}
diff --git a/e2etests/report/template.html b/e2etests/report/template.html
index 28ed677ed..24a62582f 100644
--- a/e2etests/report/template.html
+++ b/e2etests/report/template.html
@@ -10,16 +10,16 @@
     <div class="cases">
       {{range .Tests}}
       <div class="case" id="{{.Name}}">
-        <h1><a href="../../{{.GotSVG}}">{{.Name}}</a></h1>
+        <h1><a href="{{.GotSVG}}">{{.Name}}</a></h1>
         {{ if .ExpSVG }}
         <h2 class="case-exp">Expected</h2>
         {{ end }}
         <h2 class="case-got">Got</h2>
         <div class="case-img-wrapper">
           {{ if .ExpSVG }}
-          <img src="../../{{.ExpSVG}}" width="100%" />
+          <img src="{{.ExpSVG}}" width="100%" />
           {{ end }}
-          <img src="../../{{.GotSVG}}" width="100%" />
+          <img src="{{.GotSVG}}" width="100%" />
         </div>
       </div>
       {{end}}
@@ -41,7 +41,7 @@
       .case img {
         width: 600px;
       }
-      .case-got {
+      .case-exp + .case-got {
         position: absolute;
         left: 600px;
       }