diff --git a/content/waylandevaluation/compositors.md b/content/architecture/wayland_compositors.md
similarity index 87%
rename from content/waylandevaluation/compositors.md
rename to content/architecture/wayland_compositors.md
index edaa32aec97fdfb8c2e0656945896791366327b4..2c85f4218f115dee7ee3343d1568f94e23465d3e 100644
--- a/content/waylandevaluation/compositors.md
+++ b/content/architecture/wayland_compositors.md
@@ -15,9 +15,9 @@ intended as a reference, and not as an argument for or against using
 Wayland or Weston. It focuses on the graphics and composition side of
 Wayland, rather than the input handling side.
 
-## Architecture overview
+# Architecture overview
 
-![thumb|right|300px|Overview diagram of how Wayland, its clients, and the
+![Overview diagram of how Wayland, its clients, and the
 Linux kernel graphics infrastructure (DRM/DRI)
 interact.](/images/linux_graphics_drivers_dri_wayland.svg)
 
@@ -48,7 +48,7 @@ performs window management from within the same process. Weston is the
 reference, and most developed, implementation of a Wayland compositor.
 Mutter is another implementation.
 
-### Compositor terminology
+## Compositor terminology
 
 Although not necessarily the case for all compositors, Weston contains
 several components, which are ‘plugged together’ to support each
@@ -81,7 +81,7 @@ Some more general terminology:
   - GPU: Hardware which implements 3D acceleration and the GLES
     pipeline. Its output is fed into the display controller.
 
-## Client-side rendering
+# Client-side rendering
 
 In the Wayland architecture, all rendering of client UIs is performed by
 client code, typically by the graphics toolkit the client uses. This is
@@ -103,7 +103,7 @@ what is mutually supported by the clients and compositor:
     compositor. This prevents unnecessary and expensive copying of pixel
     data.
 
-## Compositing
+# Compositing
 
 Once the compositor has all the pixel data (or handles to GPU buffers
 containing it), it can composite a frame. As with [client-side
@@ -165,7 +165,7 @@ surface per overlay, and no GLES processing needs to be done. There is
 an article on [how the Weston Raspberry Pi backend uses planes to best
 advantage](http://ppaalanen.blogspot.co.uk/2013/05/weston-on-raspberry-pi-accelerated.html).
 
-## Journey of a pixel
+# Journey of a pixel
 
 As an illustration, consider the journey of a single UI element from
 being programmatically created in a client application, to appearing on
@@ -201,28 +201,40 @@ GLES, to form the final output frame.
     form the final output frame.
 8.  The output frame is sent to the user’s screen.
 
-<File:Wayland> compositors 1.svg|Step 1. The windows as the developer
-would like them to appear. <File:Wayland> compositors 2.svg|Step 2.
-Uploading textures to the graphics memory. <File:Wayland> compositors
-3.svg|Step 3. Client-side (e.g. Clutter) rendering of individual windows
-in GLES. <File:Wayland> compositors 4.svg|Step 4. Notifying Weston of
-the updated window. <File:Wayland> compositors 5.svg|Steps 5 and 6.
-Compositing surfaces within each overlay in GLES. <File:Wayland>
-compositors 6.svg|Steps 7 and 8. Compositing overlays to form the final
-output in the display controller.
 
-## External links
+## Example
+
+- The windows as the developer would like them to appear:
+
+  ![](/images/wayland_compositor_1.svg)
+
+- Uploading textures to the graphics memory.
+
+  ![](/images/wayland_compositor_2.svg)
+
+- Client-side (e.g. Clutter) rendering of individual windows in GLES.
+
+  ![](/images/wayland_compositor_3.svg)
+
+- Notifying Weston of the updated window.
+
+  ![](/images/wayland_compositor_4.svg)
+
+- Compositing surfaces within each overlay in GLES.
+
+  ![](/images/wayland_compositor_5.svg)
+
+- Compositing overlays to form the final output in the display controller.
+
+  ![](/images/wayland_compositor_6.svg)
+
+# External links
 
   - [Wayland home page](http://wayland.freedesktop.org/)
-  - [Wayland architecture
-    description](http://wayland.freedesktop.org/architecture.html)
+  - [Wayland architecture description](http://wayland.freedesktop.org/architecture.html)
     (focuses on differences from X11)
-  - [Wikipedia summary of
-    Wayland](http://en.wikipedia.org/wiki/Wayland_%28display_server_protocol%29)
-  - [Wikipedia page on
-    DRI](http://en.wikipedia.org/wiki/Direct_Rendering_Infrastructure)
+  - [Wikipedia summary of Wayland](http://en.wikipedia.org/wiki/Wayland_%28display_server_protocol%29)
+  - [Wikipedia page on DRI](http://en.wikipedia.org/wiki/Direct_Rendering_Infrastructure)
     (including architectural overview diagrams)
-  - [FOSDEM slides on using planes in
-    Weston](https://archive.fosdem.org/2013/schedule/event/westonoverlays/attachments/slides/245/export/events/attachments/westonoverlays/slides/245/FOSDEM2013_weston_planes.pdf)
-  - [Article on how Weston’s Raspberry Pi backend uses
-    planes](http://ppaalanen.blogspot.co.uk/2013/05/weston-on-raspberry-pi-accelerated.html)
+  - [FOSDEM slides on using planes in Weston](https://archive.fosdem.org/2013/schedule/event/westonoverlays/attachments/slides/245/export/events/attachments/westonoverlays/slides/245/FOSDEM2013_weston_planes.pdf)
+  - [Article on how Weston’s Raspberry Pi backend uses planes](http://ppaalanen.blogspot.co.uk/2013/05/weston-on-raspberry-pi-accelerated.html)
diff --git a/content/waylandevaluation/_index.md b/content/concepts/wayland_evaluation.md
similarity index 99%
rename from content/waylandevaluation/_index.md
rename to content/concepts/wayland_evaluation.md
index 8b8ef0712f63fc3f42e477dc040a9ea65a7a3785..10b63b8bc578bed79ca6c94df764ecca8c625c62 100644
--- a/content/waylandevaluation/_index.md
+++ b/content/concepts/wayland_evaluation.md
@@ -7,6 +7,9 @@ title = "Wayland Evaluation"
 aliases = [
     "/old-wiki/WaylandEvaluation"
 ]
+
+status = "Requires Update"
+statusDescription = "Target images have been using a wayland compositor for quite some time. No longer using the Vivante (proprietary) graphics stack."
 +++
 
 # Project Background
diff --git a/content/release/14.12/releasenotes.md b/content/release/14.12/releasenotes.md
index 2cafd270ce06087dc95ecddbc883affa0f8f9d6a..69bde5d9b49c8275e555f6d9096fc9eb39cf3b62 100644
--- a/content/release/14.12/releasenotes.md
+++ b/content/release/14.12/releasenotes.md
@@ -86,7 +86,7 @@ Repositories](https://git.secure-automotive-cloud.org).
 ## Wayland Evaluation
 
   - [Moving to Wayland (evaluation
-    document)]( {{< ref "/waylandevaluation/_index.md" >}} )
+    document)]( {{< ref "wayland_evaluation.md" >}} )
 
 ## Concept Designs
 
diff --git a/content/release/15.03/releasenotes.md b/content/release/15.03/releasenotes.md
index 57b36f7b3e5dfef63093ecff7a7d1f12d4d871d7..459d65edb57817f2aed3dfbdfbeaa5eea0679c97 100644
--- a/content/release/15.03/releasenotes.md
+++ b/content/release/15.03/releasenotes.md
@@ -116,7 +116,7 @@ be delivered in Q2.
 A document explaining the need for reasons for away from X11 and
 assessing the move to a wayland ased compositor system was written and
 discussed during 2015Q1
-([WaylandEvaluation]( {{< ref "/waylandevaluation/_index.md" >}} )). Its
+([WaylandEvaluation]( {{< ref "wayland_evaluation.md" >}} )). Its
 recommendations have been accepted and work is beginning to make the
 move a reality now, with a roadmap and a first alpha release to be
 delivered later this year.
diff --git a/static/images/wayland_compositor_1.svg b/static/images/wayland_compositor_1.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e31b82533cd168e537da3edb3b6cb0df981beb62
--- /dev/null
+++ b/static/images/wayland_compositor_1.svg
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/DTD/svg10.dtd">
+<svg width="36cm" height="20cm" viewBox="-601 -321 702 382" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g>
+    <g>
+      <rect style="fill: #ffc0cb" x="-200" y="-320" width="300" height="220"/>
+      <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x="-200" y="-320" width="300" height="220"/>
+    </g>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="-200" y1="-300" x2="100" y2="-300"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="80" y1="-300" x2="80" y2="-320"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="60" y1="-300" x2="60" y2="-320"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="40" y1="-300" x2="40" y2="-320"/>
+  </g>
+  <text font-size="56.4444" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="-50" y="-190.45">
+    <tspan x="-50" y="-190.45">3</tspan>
+  </text>
+  <g>
+    <g>
+      <rect style="fill: #e6e6fa" x="-400" y="-240" width="300" height="220"/>
+      <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x="-400" y="-240" width="300" height="220"/>
+    </g>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="-400" y1="-220" x2="-100" y2="-220"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="-120" y1="-220" x2="-120" y2="-240"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="-140" y1="-220" x2="-140" y2="-240"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="-160" y1="-220" x2="-160" y2="-240"/>
+  </g>
+  <text font-size="56.4444" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="-250" y="-110.45">
+    <tspan x="-250" y="-110.45">2</tspan>
+  </text>
+  <g>
+    <g>
+      <rect style="fill: #ffff84" x="-600" y="-160" width="300" height="220"/>
+      <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x="-600" y="-160" width="300" height="220"/>
+    </g>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="-600" y1="-140" x2="-300" y2="-140"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="-320" y1="-140" x2="-320" y2="-160"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="-340" y1="-140" x2="-340" y2="-160"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="-360" y1="-140" x2="-360" y2="-160"/>
+  </g>
+  <text font-size="56.4444" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="-450" y="-30.45">
+    <tspan x="-450" y="-30.45">1</tspan>
+  </text>
+  <g>
+    <rect style="fill: #e17de5" x="-420" y="-100" width="100" height="100"/>
+    <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x="-420" y="-100" width="100" height="100"/>
+  </g>
+  <text font-size="12.8" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="-370" y="-45.55">
+    <tspan x="-370" y="-45.55">Video</tspan>
+  </text>
+  <text font-size="12.8" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="-40" y="-200">
+    <tspan x="-40" y="-200"></tspan>
+  </text>
+</svg>
diff --git a/static/images/wayland_compositor_2.svg b/static/images/wayland_compositor_2.svg
new file mode 100644
index 0000000000000000000000000000000000000000..1b646659c531816aef89a554d24e04b6dc9a3c3b
--- /dev/null
+++ b/static/images/wayland_compositor_2.svg
@@ -0,0 +1,129 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/DTD/svg10.dtd">
+<svg width="53cm" height="27cm" viewBox="99 19 1043 523" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g>
+    <g>
+      <rect style="fill: #ffc0cb" x="140" y="20" width="300" height="220"/>
+      <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x="140" y="20" width="300" height="220"/>
+    </g>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="140" y1="40" x2="440" y2="40"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="420" y1="40" x2="420" y2="20"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="400" y1="40" x2="400" y2="20"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="380" y1="40" x2="380" y2="20"/>
+  </g>
+  <g>
+    <rect style="fill: #add8e6" x="540" y="120" width="380" height="100"/>
+    <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x="540" y="120" width="380" height="100"/>
+  </g>
+  <g>
+    <rect style="fill: #bfbfbf" x="540" y="280" width="160" height="100"/>
+    <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x="540" y="280" width="160" height="100"/>
+  </g>
+  <g>
+    <rect style="fill: #bfbfbf" x="760" y="280" width="160" height="100"/>
+    <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x="760" y="280" width="160" height="100"/>
+  </g>
+  <g>
+    <rect style="fill: #bfbfbf" x="980" y="280" width="160" height="100"/>
+    <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x="980" y="280" width="160" height="100"/>
+  </g>
+  <g>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #bfbfbf" x1="620" y1="224.472" x2="620" y2="275.528"/>
+    <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #bfbfbf" points="625,232.236 620,222.236 615,232.236 "/>
+    <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #bfbfbf" points="615,267.764 620,277.764 625,267.764 "/>
+  </g>
+  <g>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #bfbfbf" x1="840" y1="224.472" x2="840" y2="275.528"/>
+    <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #bfbfbf" points="845,232.236 840,222.236 835,232.236 "/>
+    <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #bfbfbf" points="835,267.764 840,277.764 845,267.764 "/>
+  </g>
+  <g>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #bfbfbf" x1="700" y1="330" x2="755.528" y2="330"/>
+    <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #bfbfbf" points="747.764,335 757.764,330 747.764,325 "/>
+  </g>
+  <g>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #bfbfbf" x1="920" y1="330" x2="975.528" y2="330"/>
+    <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #bfbfbf" points="967.764,335 977.764,330 967.764,325 "/>
+  </g>
+  <text font-size="12.8" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="1060" y="334.45">
+    <tspan x="1060" y="334.45">Screen</tspan>
+  </text>
+  <text font-size="12.8" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="840" y="334.45">
+    <tspan x="840" y="334.45">Display controller</tspan>
+  </text>
+  <text font-size="12.8" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="620" y="334.45">
+    <tspan x="620" y="334.45">GPU</tspan>
+  </text>
+  <text font-size="12.8" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="730" y="174.45">
+    <tspan x="730" y="174.45">Graphics memory</tspan>
+  </text>
+  <g>
+    <g>
+      <rect style="fill: #e6e6fa" x="120" y="60" width="300" height="220"/>
+      <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x="120" y="60" width="300" height="220"/>
+    </g>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="120" y1="80" x2="420" y2="80"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="400" y1="80" x2="400" y2="60"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="380" y1="80" x2="380" y2="60"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="360" y1="80" x2="360" y2="60"/>
+  </g>
+  <text font-size="56.4444" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="280" y="439.55">
+    <tspan x="280" y="439.55">2</tspan>
+  </text>
+  <g>
+    <g>
+      <rect style="fill: #ffff84" x="100" y="100" width="300" height="220"/>
+      <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x="100" y="100" width="300" height="220"/>
+    </g>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="100" y1="120" x2="400" y2="120"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="380" y1="120" x2="380" y2="100"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="360" y1="120" x2="360" y2="100"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="340" y1="120" x2="340" y2="100"/>
+  </g>
+  <text font-size="56.4444" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="240" y="379.55">
+    <tspan x="240" y="379.55">1</tspan>
+  </text>
+  <g>
+    <rect style="fill: #e17de5" x="380" y="440" width="100" height="100"/>
+    <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x="380" y="440" width="100" height="100"/>
+  </g>
+  <text font-size="12.8" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="430" y="494.45">
+    <tspan x="430" y="494.45">Video</tspan>
+  </text>
+  <g>
+    <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" d="M 400 210 C 460,190 460,200 530.884,173.419"/>
+    <polygon style="fill: #000000" points="537.906,170.785 530.299,178.978 530.884,173.419 526.787,169.615 "/>
+    <polygon style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="537.906,170.785 530.299,178.978 530.884,173.419 526.787,169.615 "/>
+  </g>
+  <g>
+    <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" d="M 530.489,157.963 A 191.679,191.679 0 0 0 420,170"/>
+    <polygon style="fill: #000000" points="537.826,159.476 526.933,161.996 530.535,157.72 529.275,152.274 "/>
+    <polygon style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="537.826,159.476 526.933,161.996 530.535,157.72 529.275,152.274 "/>
+  </g>
+  <g>
+    <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" d="M 260 360 C 400,380 480,280 534.991,188.349"/>
+    <polygon style="fill: #000000" points="538.85,181.917 537.992,193.065 534.991,188.349 529.417,187.92 "/>
+    <polygon style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="538.85,181.917 537.992,193.065 534.991,188.349 529.417,187.92 "/>
+  </g>
+  <g>
+    <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" d="M 300 420 C 379.68,420 480,300 534.991,208.349"/>
+    <polygon style="fill: #000000" points="538.85,201.917 537.992,213.065 534.991,208.349 529.417,207.92 "/>
+    <polygon style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="538.85,201.917 537.992,213.065 534.991,208.349 529.417,207.92 "/>
+  </g>
+  <g>
+    <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" d="M 430 440 C 470,380 500,300 535.646,228.708"/>
+    <polygon style="fill: #000000" points="539,222 539,233.18 535.646,228.708 530.056,228.708 "/>
+    <polygon style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="539,222 539,233.18 535.646,228.708 530.056,228.708 "/>
+  </g>
+  <text font-size="56.4444" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="340" y="479.55">
+    <tspan x="340" y="479.55">3</tspan>
+  </text>
+  <text font-size="12.8" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="340" y="460">
+    <tspan x="340" y="460"></tspan>
+  </text>
+  <g>
+    <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" d="M 360 440 C 420,400 480,300 534.158,227.789"/>
+    <polygon style="fill: #000000" points="538.658,221.789 536.658,232.789 534.158,227.789 528.658,226.789 "/>
+    <polygon style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="538.658,221.789 536.658,232.789 534.158,227.789 528.658,226.789 "/>
+  </g>
+</svg>
diff --git a/static/images/wayland_compositor_3.svg b/static/images/wayland_compositor_3.svg
new file mode 100644
index 0000000000000000000000000000000000000000..41536619d3f3b2854f20fa8c0b759cba202764fe
--- /dev/null
+++ b/static/images/wayland_compositor_3.svg
@@ -0,0 +1,106 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/DTD/svg10.dtd">
+<svg width="53cm" height="14cm" viewBox="99 118 1043 263" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g>
+    <rect style="fill: #add8e6" x="540" y="120" width="380" height="100"/>
+    <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x="540" y="120" width="380" height="100"/>
+  </g>
+  <g>
+    <rect style="fill: #f9cc6d" x="540" y="280" width="160" height="100"/>
+    <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x="540" y="280" width="160" height="100"/>
+  </g>
+  <g>
+    <rect style="fill: #bfbfbf" x="760" y="280" width="160" height="100"/>
+    <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x="760" y="280" width="160" height="100"/>
+  </g>
+  <g>
+    <rect style="fill: #bfbfbf" x="980" y="280" width="160" height="100"/>
+    <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x="980" y="280" width="160" height="100"/>
+  </g>
+  <g>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="620" y1="224.472" x2="620" y2="275.528"/>
+    <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="625,232.236 620,222.236 615,232.236 "/>
+    <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="615,267.764 620,277.764 625,267.764 "/>
+  </g>
+  <g>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #bfbfbf" x1="840" y1="224.472" x2="840" y2="275.528"/>
+    <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #bfbfbf" points="845,232.236 840,222.236 835,232.236 "/>
+    <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #bfbfbf" points="835,267.764 840,277.764 845,267.764 "/>
+  </g>
+  <g>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #bfbfbf" x1="700" y1="330" x2="755.528" y2="330"/>
+    <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #bfbfbf" points="747.764,335 757.764,330 747.764,325 "/>
+  </g>
+  <g>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #bfbfbf" x1="920" y1="330" x2="975.528" y2="330"/>
+    <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #bfbfbf" points="967.764,335 977.764,330 967.764,325 "/>
+  </g>
+  <text font-size="12.8" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="1060" y="334.45">
+    <tspan x="1060" y="334.45">Screen</tspan>
+  </text>
+  <text font-size="12.8" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="840" y="334.45">
+    <tspan x="840" y="334.45">Display controller</tspan>
+  </text>
+  <text font-size="12.8" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="620" y="334.45">
+    <tspan x="620" y="334.45">GPU</tspan>
+  </text>
+  <text font-size="12.8" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="730" y="174.45">
+    <tspan x="730" y="174.45">Graphics memory</tspan>
+  </text>
+  <text font-size="33.8667" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="280" y="261.7">
+    <tspan x="280" y="261.7">1</tspan>
+  </text>
+  <g>
+    <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" d="M 540 140 C 500,120 200,140 174.354,191.292"/>
+    <polygon style="fill: #000000" points="171,198 171,186.82 174.354,191.292 179.944,191.292 "/>
+    <polygon style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="171,198 171,186.82 174.354,191.292 179.944,191.292 "/>
+  </g>
+  <g>
+    <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" d="M 540 160 C 466.96,160 280,160 280,210.264"/>
+    <polygon style="fill: #000000" points="280,217.764 275,207.764 280,210.264 285,207.764 "/>
+    <polygon style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="280,217.764 275,207.764 280,210.264 285,207.764 "/>
+  </g>
+  <g>
+    <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" d="M 170 300 C 180,400 460.32,360 530.264,360"/>
+    <polygon style="fill: #000000" points="537.764,360 527.764,365 530.264,360 527.764,355 "/>
+    <polygon style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="537.764,360 527.764,365 530.264,360 527.764,355 "/>
+  </g>
+  <g>
+    <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" d="M 280 280 C 280,320 433.76,340 530.264,340"/>
+    <polygon style="fill: #000000" points="537.764,340 527.764,345 530.264,340 527.764,335 "/>
+    <polygon style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="537.764,340 527.764,345 530.264,340 527.764,335 "/>
+  </g>
+  <g>
+    <g>
+      <rect style="fill: #ffff84" x="100" y="200" width="140" height="100"/>
+      <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x="100" y="200" width="140" height="100"/>
+    </g>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="100" y1="220" x2="240" y2="220"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="220" y1="220" x2="220" y2="200"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="200" y1="220" x2="200" y2="200"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="180" y1="220" x2="180" y2="200"/>
+  </g>
+  <g>
+    <g>
+      <rect style="fill: #ffff84" x="360" y="200" width="140" height="100"/>
+      <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x="360" y="200" width="140" height="100"/>
+    </g>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="360" y1="220" x2="500" y2="220"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="480" y1="220" x2="480" y2="200"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="460" y1="220" x2="460" y2="200"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="440" y1="220" x2="440" y2="200"/>
+  </g>
+  <text font-size="33.8667" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="430" y="261.7">
+    <tspan x="430" y="261.7">1</tspan>
+  </text>
+  <g>
+    <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" d="M 540 320 C 503.48,320 440,320 434.354,308.708"/>
+    <polygon style="fill: #000000" points="431,302 439.944,308.708 434.354,308.708 431,313.18 "/>
+    <polygon style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="431,302 439.944,308.708 434.354,308.708 431,313.18 "/>
+  </g>
+  <g>
+    <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" d="M 430 200 C 440,160 503.48,180 530.264,180"/>
+    <polygon style="fill: #000000" points="537.764,180 527.764,185 530.264,180 527.764,175 "/>
+    <polygon style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="537.764,180 527.764,185 530.264,180 527.764,175 "/>
+  </g>
+</svg>
diff --git a/static/images/wayland_compositor_4.svg b/static/images/wayland_compositor_4.svg
new file mode 100644
index 0000000000000000000000000000000000000000..7a0f1cc2d44b6af98bf90272d22c417604b5fa85
--- /dev/null
+++ b/static/images/wayland_compositor_4.svg
@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/DTD/svg10.dtd">
+<svg width="43cm" height="14cm" viewBox="298 118 843 263" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g>
+    <rect style="fill: #add8e6" x="540" y="120" width="380" height="100"/>
+    <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x="540" y="120" width="380" height="100"/>
+  </g>
+  <g>
+    <rect style="fill: #f9cc6d" x="540" y="280" width="160" height="100"/>
+    <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x="540" y="280" width="160" height="100"/>
+  </g>
+  <g>
+    <rect style="fill: #bfbfbf" x="760" y="280" width="160" height="100"/>
+    <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x="760" y="280" width="160" height="100"/>
+  </g>
+  <g>
+    <rect style="fill: #bfbfbf" x="980" y="280" width="160" height="100"/>
+    <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x="980" y="280" width="160" height="100"/>
+  </g>
+  <g>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #bfbfbf" x1="620" y1="224.472" x2="620" y2="275.528"/>
+    <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #bfbfbf" points="625,232.236 620,222.236 615,232.236 "/>
+    <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #bfbfbf" points="615,267.764 620,277.764 625,267.764 "/>
+  </g>
+  <g>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #bfbfbf" x1="840" y1="224.472" x2="840" y2="275.528"/>
+    <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #bfbfbf" points="845,232.236 840,222.236 835,232.236 "/>
+    <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #bfbfbf" points="835,267.764 840,277.764 845,267.764 "/>
+  </g>
+  <g>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #bfbfbf" x1="700" y1="330" x2="755.528" y2="330"/>
+    <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #bfbfbf" points="747.764,335 757.764,330 747.764,325 "/>
+  </g>
+  <g>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #bfbfbf" x1="920" y1="330" x2="975.528" y2="330"/>
+    <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #bfbfbf" points="967.764,335 977.764,330 967.764,325 "/>
+  </g>
+  <text font-size="12.8" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="1060" y="334.45">
+    <tspan x="1060" y="334.45">Screen</tspan>
+  </text>
+  <text font-size="12.8" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="840" y="334.45">
+    <tspan x="840" y="334.45">Display controller</tspan>
+  </text>
+  <text font-size="12.8" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="620" y="334.45">
+    <tspan x="620" y="334.45">GPU</tspan>
+  </text>
+  <text font-size="12.8" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="730" y="174.45">
+    <tspan x="730" y="174.45">Graphics memory</tspan>
+  </text>
+  <g>
+    <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" d="M 540 330 C 503.48,330 390,330 384.354,318.708"/>
+    <polygon style="fill: #000000" points="381,312 389.944,318.708 384.354,318.708 381,323.18 "/>
+    <polygon style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="381,312 389.944,318.708 384.354,318.708 381,323.18 "/>
+  </g>
+  <g>
+    <rect style="fill: #a52a2a" x="300" y="210" width="160" height="100"/>
+    <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x="300" y="210" width="160" height="100"/>
+  </g>
+  <text font-size="12.8" style="fill: #ffffff;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="380" y="264.45">
+    <tspan x="380" y="264.45">Weston</tspan>
+  </text>
+  <text font-size="12.8" style="fill: #000000;text-anchor:end;font-family:sans-serif;font-style:normal;font-weight:normal" x="520" y="351.9">
+    <tspan x="520" y="351.9">GPU resource handle</tspan>
+  </text>
+</svg>
diff --git a/static/images/wayland_compositor_5.svg b/static/images/wayland_compositor_5.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e159b7171ce51b130db79e4cacbfa85a8e82acca
--- /dev/null
+++ b/static/images/wayland_compositor_5.svg
@@ -0,0 +1,127 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/DTD/svg10.dtd">
+<svg width="47cm" height="55cm" viewBox="39 -501 922 1082" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g>
+    <g>
+      <rect style="fill: #ffc0cb" x="80" y="-420" width="300" height="220"/>
+      <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x="80" y="-420" width="300" height="220"/>
+    </g>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="80" y1="-400" x2="380" y2="-400"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="360" y1="-400" x2="360" y2="-420"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="340" y1="-400" x2="340" y2="-420"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="320" y1="-400" x2="320" y2="-420"/>
+  </g>
+  <g>
+    <g>
+      <rect style="fill: #e6e6fa" x="40" y="-380" width="300" height="220"/>
+      <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x="40" y="-380" width="300" height="220"/>
+    </g>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="40" y1="-360" x2="340" y2="-360"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="320" y1="-360" x2="320" y2="-380"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="300" y1="-360" x2="300" y2="-380"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="280" y1="-360" x2="280" y2="-380"/>
+  </g>
+  <text font-size="56.4444" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="190" y="-250.45">
+    <tspan x="190" y="-250.45">2</tspan>
+  </text>
+  <g>
+    <g>
+      <rect style="fill: #ffff84" x="80" y="-50" width="300" height="220"/>
+      <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x="80" y="-50" width="300" height="220"/>
+    </g>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="80" y1="-30" x2="380" y2="-30"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="360" y1="-30" x2="360" y2="-50"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="340" y1="-30" x2="340" y2="-50"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="320" y1="-30" x2="320" y2="-50"/>
+  </g>
+  <text font-size="56.4444" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="230" y="79.55">
+    <tspan x="230" y="79.55">1</tspan>
+  </text>
+  <g>
+    <rect style="fill: #e17de5" x="280" y="370" width="100" height="100"/>
+    <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x="280" y="370" width="100" height="100"/>
+  </g>
+  <text font-size="12.8" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="330" y="424.45">
+    <tspan x="330" y="424.45">Video</tspan>
+  </text>
+  <g>
+    <rect style="fill: #ffffff" x="500" y="-100" width="460" height="320"/>
+    <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x="500" y="-100" width="460" height="320"/>
+  </g>
+  <g>
+    <rect style="fill: #ffffff" x="500" y="260" width="460" height="320"/>
+    <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x="500" y="260" width="460" height="320"/>
+  </g>
+  <g>
+    <rect style="fill: #ffffff" x="500" y="-460" width="460" height="320"/>
+    <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x="500" y="-460" width="460" height="320"/>
+  </g>
+  <g>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="380" y1="-300" x2="490.264" y2="-300"/>
+    <polygon style="fill: #000000" points="497.764,-300 487.764,-295 490.264,-300 487.764,-305 "/>
+    <polygon style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="497.764,-300 487.764,-295 490.264,-300 487.764,-305 "/>
+  </g>
+  <g>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="380" y1="60" x2="490.264" y2="60"/>
+    <polygon style="fill: #000000" points="497.764,60 487.764,65 490.264,60 487.764,55 "/>
+    <polygon style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="497.764,60 487.764,65 490.264,60 487.764,55 "/>
+  </g>
+  <g>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="380" y1="420" x2="490.264" y2="420"/>
+    <polygon style="fill: #000000" points="497.764,420 487.764,425 490.264,420 487.764,415 "/>
+    <polygon style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="497.764,420 487.764,425 490.264,420 487.764,415 "/>
+  </g>
+  <text font-size="22.5778" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="730" y="-480">
+    <tspan x="730" y="-480">Composited overlays</tspan>
+  </text>
+  <g>
+    <g>
+      <rect style="fill: #ffc0cb" x="640" y="-440" width="300" height="220"/>
+      <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x="640" y="-440" width="300" height="220"/>
+    </g>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="640" y1="-420" x2="940" y2="-420"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="920" y1="-420" x2="920" y2="-440"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="900" y1="-420" x2="900" y2="-440"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="880" y1="-420" x2="880" y2="-440"/>
+  </g>
+  <g>
+    <g>
+      <rect style="fill: #e6e6fa" x="600" y="-400" width="300" height="220"/>
+      <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x="600" y="-400" width="300" height="220"/>
+    </g>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="600" y1="-380" x2="900" y2="-380"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="880" y1="-380" x2="880" y2="-400"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="860" y1="-380" x2="860" y2="-400"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="840" y1="-380" x2="840" y2="-400"/>
+  </g>
+  <text font-size="56.4444" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="750" y="-270.45">
+    <tspan x="750" y="-270.45">2</tspan>
+  </text>
+  <g>
+    <g>
+      <rect style="fill: #ffff84" x="520" y="-70" width="300" height="220"/>
+      <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x="520" y="-70" width="300" height="220"/>
+    </g>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="520" y1="-50" x2="820" y2="-50"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="800" y1="-50" x2="800" y2="-70"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="780" y1="-50" x2="780" y2="-70"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="760" y1="-50" x2="760" y2="-70"/>
+  </g>
+  <text font-size="56.4444" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="670" y="59.55">
+    <tspan x="670" y="59.55">1</tspan>
+  </text>
+  <g>
+    <rect style="fill: #e17de5" x="700" y="350" width="100" height="100"/>
+    <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x="700" y="350" width="100" height="100"/>
+  </g>
+  <text font-size="12.8" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="750" y="404.45">
+    <tspan x="750" y="404.45">Video</tspan>
+  </text>
+  <text font-size="12.8" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="440" y="-339">
+    <tspan x="440" y="-339">Composited</tspan>
+    <tspan x="440" y="-323">in GPU</tspan>
+  </text>
+  <text font-size="12.8" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="420" y="-520">
+    <tspan x="420" y="-520"></tspan>
+  </text>
+</svg>
diff --git a/static/images/wayland_compositor_6.svg b/static/images/wayland_compositor_6.svg
new file mode 100644
index 0000000000000000000000000000000000000000..7a5082c65e3de7a380c3684c193f9e950082a2b2
--- /dev/null
+++ b/static/images/wayland_compositor_6.svg
@@ -0,0 +1,134 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/DTD/svg10.dtd">
+<svg width="54cm" height="55cm" viewBox="499 -501 1062 1082" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g>
+    <rect style="fill: #ffffff" x="500" y="-100" width="460" height="320"/>
+    <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x="500" y="-100" width="460" height="320"/>
+  </g>
+  <g>
+    <rect style="fill: #ffffff" x="500" y="260" width="460" height="320"/>
+    <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x="500" y="260" width="460" height="320"/>
+  </g>
+  <g>
+    <rect style="fill: #ffffff" x="500" y="-460" width="460" height="320"/>
+    <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x="500" y="-460" width="460" height="320"/>
+  </g>
+  <text font-size="22.5778" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="730" y="-480">
+    <tspan x="730" y="-480">Composited overlays</tspan>
+  </text>
+  <g>
+    <g>
+      <rect style="fill: #ffc0cb" x="640" y="-440" width="300" height="220"/>
+      <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x="640" y="-440" width="300" height="220"/>
+    </g>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="640" y1="-420" x2="940" y2="-420"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="920" y1="-420" x2="920" y2="-440"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="900" y1="-420" x2="900" y2="-440"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="880" y1="-420" x2="880" y2="-440"/>
+  </g>
+  <g>
+    <g>
+      <rect style="fill: #e6e6fa" x="600" y="-400" width="300" height="220"/>
+      <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x="600" y="-400" width="300" height="220"/>
+    </g>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="600" y1="-380" x2="900" y2="-380"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="880" y1="-380" x2="880" y2="-400"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="860" y1="-380" x2="860" y2="-400"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="840" y1="-380" x2="840" y2="-400"/>
+  </g>
+  <text font-size="56.4444" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="750" y="-270.45">
+    <tspan x="750" y="-270.45">2</tspan>
+  </text>
+  <g>
+    <g>
+      <rect style="fill: #ffff84" x="520" y="-70" width="300" height="220"/>
+      <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x="520" y="-70" width="300" height="220"/>
+    </g>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="520" y1="-50" x2="820" y2="-50"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="800" y1="-50" x2="800" y2="-70"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="780" y1="-50" x2="780" y2="-70"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="760" y1="-50" x2="760" y2="-70"/>
+  </g>
+  <text font-size="56.4444" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="670" y="59.55">
+    <tspan x="670" y="59.55">1</tspan>
+  </text>
+  <g>
+    <rect style="fill: #e17de5" x="700" y="350" width="100" height="100"/>
+    <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x="700" y="350" width="100" height="100"/>
+  </g>
+  <text font-size="12.8" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="750" y="404.45">
+    <tspan x="750" y="404.45">Video</tspan>
+  </text>
+  <g>
+    <rect style="fill: #ffffff" x="1100" y="-100" width="460" height="320"/>
+    <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x="1100" y="-100" width="460" height="320"/>
+  </g>
+  <text font-size="56.4444" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="1270" y="59.55">
+    <tspan x="1270" y="59.55">1</tspan>
+  </text>
+  <g>
+    <g>
+      <rect style="fill: #ffc0cb" x="1240" y="-80" width="300" height="220"/>
+      <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x="1240" y="-80" width="300" height="220"/>
+    </g>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="1240" y1="-60" x2="1540" y2="-60"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="1520" y1="-60" x2="1520" y2="-80"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="1500" y1="-60" x2="1500" y2="-80"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="1480" y1="-60" x2="1480" y2="-80"/>
+  </g>
+  <g>
+    <g>
+      <rect style="fill: #e6e6fa" x="1200" y="-40" width="300" height="220"/>
+      <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x="1200" y="-40" width="300" height="220"/>
+    </g>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="1200" y1="-20" x2="1500" y2="-20"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="1480" y1="-20" x2="1480" y2="-40"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="1460" y1="-20" x2="1460" y2="-40"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="1440" y1="-20" x2="1440" y2="-40"/>
+  </g>
+  <text font-size="56.4444" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="1350" y="89.55">
+    <tspan x="1350" y="89.55">2</tspan>
+  </text>
+  <g>
+    <g>
+      <rect style="fill: #ffff84" x="1120" y="-70" width="300" height="220"/>
+      <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x="1120" y="-70" width="300" height="220"/>
+    </g>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="1120" y1="-50" x2="1420" y2="-50"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="1400" y1="-50" x2="1400" y2="-70"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="1380" y1="-50" x2="1380" y2="-70"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="1360" y1="-50" x2="1360" y2="-70"/>
+  </g>
+  <text font-size="56.4444" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="1270" y="59.55">
+    <tspan x="1270" y="59.55">1</tspan>
+  </text>
+  <g>
+    <rect style="fill: #e17de5" x="1300" y="-10" width="100" height="100"/>
+    <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x="1300" y="-10" width="100" height="100"/>
+  </g>
+  <text font-size="12.8" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="1350" y="44.45">
+    <tspan x="1350" y="44.45">Video</tspan>
+  </text>
+  <text font-size="22.5778" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="1330" y="-120">
+    <tspan x="1330" y="-120">Final screen output</tspan>
+  </text>
+  <g>
+    <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="960" y1="60" x2="1090.26" y2="60"/>
+    <polygon style="fill: #000000" points="1097.76,60 1087.76,65 1090.26,60 1087.76,55 "/>
+    <polygon style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="1097.76,60 1087.76,65 1090.26,60 1087.76,55 "/>
+  </g>
+  <text font-size="12.8" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="1030" y="21">
+    <tspan x="1030" y="21">Composited in</tspan>
+    <tspan x="1030" y="37">display controller</tspan>
+  </text>
+  <g>
+    <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" d="M 960 -300 C 1060,-300 1000,-40 1090.26,-40"/>
+    <polygon style="fill: #000000" points="1097.76,-40 1087.76,-35 1090.26,-40 1087.76,-45 "/>
+    <polygon style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="1097.76,-40 1087.76,-35 1090.26,-40 1087.76,-45 "/>
+  </g>
+  <g>
+    <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" d="M 960 420 C 1060,420 1000,160 1090.26,160"/>
+    <polygon style="fill: #000000" points="1097.76,160 1087.76,165 1090.26,160 1087.76,155 "/>
+    <polygon style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="1097.76,160 1087.76,165 1090.26,160 1087.76,155 "/>
+  </g>
+</svg>