diff --git a/docs_app/src/assets/images/marble-diagrams/bufferWhen.png b/docs_app/src/assets/images/marble-diagrams/bufferWhen.png
deleted file mode 100644
index 6165954d4d..0000000000
Binary files a/docs_app/src/assets/images/marble-diagrams/bufferWhen.png and /dev/null differ
diff --git a/docs_app/src/assets/images/marble-diagrams/bufferWhen.svg b/docs_app/src/assets/images/marble-diagrams/bufferWhen.svg
new file mode 100644
index 0000000000..faa0c3da80
--- /dev/null
+++ b/docs_app/src/assets/images/marble-diagrams/bufferWhen.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 830 430" width="830" height="430"><path fill="rgba(255, 255, 255, 0.0)" d="M0 0h830v430H0z"/><g stroke="#000" stroke-width="2"><path d="M25 65h770"/><path stroke-linecap="square" d="M795 59.226L805 65l-10 5.774z"/></g><path stroke="#000" stroke-width="2" d="M724 25v80"/><g transform="translate(612 25)"><circle cx="33" cy="40" fill="hsl(102, 60%, 80%)" stroke="#000" stroke-width="2" r="32"/><text font-family="Arial, Helvetica, sans-serif" font-size="18" dominant-baseline="middle" text-anchor="middle" transform="translate(33 40)">h</text></g><g transform="translate(532 25)"><circle cx="33" cy="40" fill="hsl(32, 60%, 80%)" stroke="#000" stroke-width="2" r="32"/><text font-family="Arial, Helvetica, sans-serif" font-size="18" dominant-baseline="middle" text-anchor="middle" transform="translate(33 40)">g</text></g><g transform="translate(452 25)"><circle cx="33" cy="40" fill="hsl(35, 60%, 80%)" stroke="#000" stroke-width="2" r="32"/><text font-family="Arial, Helvetica, sans-serif" font-size="18" dominant-baseline="middle" text-anchor="middle" transform="translate(33 40)">f</text></g><g transform="translate(372 25)"><circle cx="33" cy="40" fill="hsl(253, 60%, 80%)" stroke="#000" stroke-width="2" r="32"/><text font-family="Arial, Helvetica, sans-serif" font-size="18" dominant-baseline="middle" text-anchor="middle" transform="translate(33 40)">e</text></g><g transform="translate(292 25)"><circle cx="33" cy="40" fill="hsl(79, 60%, 80%)" stroke="#000" stroke-width="2" r="32"/><text font-family="Arial, Helvetica, sans-serif" font-size="18" dominant-baseline="middle" text-anchor="middle" transform="translate(33 40)">d</text></g><g transform="translate(212 25)"><circle cx="33" cy="40" fill="hsl(32, 60%, 80%)" stroke="#000" stroke-width="2" r="32"/><text font-family="Arial, Helvetica, sans-serif" font-size="18" dominant-baseline="middle" text-anchor="middle" transform="translate(33 40)">c</text></g><g transform="translate(132 25)"><circle cx="33" cy="40" fill="hsl(44, 60%, 80%)" stroke="#000" stroke-width="2" r="32"/><text font-family="Arial, Helvetica, sans-serif" font-size="18" dominant-baseline="middle" text-anchor="middle" transform="translate(33 40)">b</text></g><g transform="translate(52 25)"><circle cx="33" cy="40" fill="hsl(321, 60%, 80%)" stroke="#000" stroke-width="2" r="32"/><text font-family="Arial, Helvetica, sans-serif" font-size="18" dominant-baseline="middle" text-anchor="middle" transform="translate(33 40)">a</text></g><g><g stroke="#000" stroke-width="2"><path d="M25 165h330"/><path stroke-linecap="square" d="M355 159.226L365 165l-10 5.774z"/></g><g transform="translate(252 125)"><circle cx="33" cy="40" fill="hsl(103, 60%, 80%)" stroke="#000" stroke-width="2" r="32"/><text font-family="Arial, Helvetica, sans-serif" font-size="18" dominant-baseline="middle" text-anchor="middle" transform="translate(33 40)">s</text></g></g><g transform="translate(25 225)"><rect y="10" width="780" height="58" fill="rgba(255, 255, 255, 0.0)" stroke="#000" stroke-width="2" rx="0"/><text x="390" y="40" font-family="Arial, Helvetica, sans-serif" font-size="24" dominant-baseline="middle" text-anchor="middle">bufferWhen()</text></g><g><g stroke="#000" stroke-width="2"><path d="M25 365h770"/><path stroke-linecap="square" d="M795 359.226L805 365l-10 5.774z"/></g><path stroke="#000" stroke-width="2" d="M724 325v80"/><g transform="translate(692 325)"><circle cx="33" cy="40" fill="hsl(58, 60%, 80%)" stroke="#000" stroke-width="2" r="32"/><text font-family="Arial, Helvetica, sans-serif" font-size="18" dominant-baseline="middle" text-anchor="middle" transform="translate(33 40)">[g, h]</text></g><g transform="translate(512 325)"><circle cx="33" cy="40" fill="hsl(121, 60%, 80%)" stroke="#000" stroke-width="2" r="32"/><text font-family="Arial, Helvetica, sans-serif" font-size="18" dominant-baseline="middle" text-anchor="middle" transform="translate(33 40)">[d, e, f]</text></g><g transform="translate(252 325)"><circle cx="33" cy="40" fill="hsl(303, 60%, 80%)" stroke="#000" stroke-width="2" r="32"/><text font-family="Arial, Helvetica, sans-serif" font-size="18" dominant-baseline="middle" text-anchor="middle" transform="translate(33 40)">[a, b, c]</text></g></g></svg>
\ No newline at end of file
diff --git a/docs_app/src/assets/images/marble-diagrams/delay.png b/docs_app/src/assets/images/marble-diagrams/delay.png
deleted file mode 100644
index 4f296f32c0..0000000000
Binary files a/docs_app/src/assets/images/marble-diagrams/delay.png and /dev/null differ
diff --git a/docs_app/tools/marbles/diagrams/bufferWhen.txt b/docs_app/tools/marbles/diagrams/bufferWhen.txt
new file mode 100644
index 0000000000..65a73e61dc
--- /dev/null
+++ b/docs_app/tools/marbles/diagrams/bufferWhen.txt
@@ -0,0 +1,15 @@
+[styles]
+event_radius = 33
+operator_height = 60
+completion_height = 80
+
+---a---b---c---d---e---f---g---h---|
+
+-------------s
+
+> bufferWhen()
+
+-------------x------------y--------(z|)
+x := [a, b, c]
+y := [d, e, f]
+z := [g, h]
diff --git a/spec/operators/bufferWhen-spec.ts b/spec/operators/bufferWhen-spec.ts
index 34f5390c3f..b0a4a86ae5 100644
--- a/spec/operators/bufferWhen-spec.ts
+++ b/spec/operators/bufferWhen-spec.ts
@@ -1,6 +1,6 @@
 import { expect } from 'chai';
-import { of, EMPTY, Observable } from 'rxjs';
-import { bufferWhen, mergeMap, takeWhile, take } from 'rxjs/operators';
+import { of } from 'rxjs';
+import { bufferWhen, mergeMap, takeWhile } from 'rxjs/operators';
 import { TestScheduler } from 'rxjs/testing';
 import { observableMatcher } from '../helpers/observableMatcher';
 
@@ -16,7 +16,7 @@ describe('bufferWhen operator', () => {
     testScheduler.run(({ hot, cold, expectObservable }) => {
       const e1 = hot('--a--^---b---c---d---e---f---g---------|   ');
       const e2 = cold('    --------------(s|)                    ');
-      //                                 --------------(s |)
+      //                                 --------------(s|)
       const expected = '   --------------x-------------y-----(z|)';
       const values = {
         x: ['b', 'c', 'd'],
diff --git a/src/internal/operators/bufferWhen.ts b/src/internal/operators/bufferWhen.ts
index 07dd7d280b..00e8c13544 100644
--- a/src/internal/operators/bufferWhen.ts
+++ b/src/internal/operators/bufferWhen.ts
@@ -13,7 +13,7 @@ import { innerFrom } from '../observable/innerFrom';
  * starts collecting values, it calls a function that returns an Observable that
  * tells when to close the buffer and restart collecting.</span>
  *
- * ![](bufferWhen.png)
+ * ![](bufferWhen.svg)
  *
  * Opens a buffer immediately, then closes the buffer when the observable
  * returned by calling `closingSelector` function emits a value. When it closes