diff --git a/README.md b/README.md
index 546b253..af0f885 100644
--- a/README.md
+++ b/README.md
@@ -12,7 +12,7 @@
 [![stars](https://badgen.net/github/stars/mateuseap/pixelhub)](https://github.com/mateuseap/pixelhub/stargazers)
 [![visitors](https://visitor-badge.laobi.icu/badge?page_id=mateuseap.pixelhub)](https://github.com/mateuseap/pixelhub)
 
-<img src="docs/assets/preview.svg" width="720" alt="PixelHub: a walkable 2D pixel world with proximity chat" />
+<img src="docs/assets/preview.png" width="720" alt="PixelHub: a walkable 2D pixel world with proximity chat" />
 
 <br />
 
diff --git a/docs/assets/preview.png b/docs/assets/preview.png
new file mode 100644
index 0000000..6cdfd7d
Binary files /dev/null and b/docs/assets/preview.png differ
diff --git a/docs/assets/preview.svg b/docs/assets/preview.svg
deleted file mode 100644
index 5f23cea..0000000
--- a/docs/assets/preview.svg
+++ /dev/null
@@ -1,123 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="720" height="400" viewBox="0 0 720 400">
-  <title>PixelHub: a walkable 2D pixel world with proximity chat</title>
-  <defs>
-    <clipPath id="roomClip">
-      <rect x="40" y="30" width="640" height="340" rx="14"/>
-    </clipPath>
-    <pattern id="floorPattern" width="40" height="40" patternUnits="userSpaceOnUse">
-      <rect x="0" y="0" width="20" height="20" fill="#8c6a4f"/>
-      <rect x="20" y="0" width="20" height="20" fill="#84634a"/>
-      <rect x="0" y="20" width="20" height="20" fill="#84634a"/>
-      <rect x="20" y="20" width="20" height="20" fill="#8c6a4f"/>
-      <rect x="0" y="0" width="40" height="1" fill="#84634a" opacity="0.5"/>
-      <rect x="0" y="20" width="40" height="1" fill="#84634a" opacity="0.5"/>
-      <rect x="4" y="6" width="4" height="2" fill="#96755a"/>
-      <rect x="27" y="9" width="3" height="2" fill="#96755a"/>
-      <rect x="9" y="27" width="4" height="2" fill="#96755a"/>
-      <rect x="30" y="31" width="3" height="2" fill="#96755a"/>
-    </pattern>
-    <g id="plantIcon">
-      <ellipse cx="6" cy="-22" rx="7" ry="10" fill="#4c7d49"/>
-      <ellipse cx="-6" cy="-20" rx="7" ry="9" fill="#6fa864"/>
-      <ellipse cx="0" cy="-27" rx="6" ry="8" fill="#6fa864"/>
-      <ellipse cx="-2" cy="-15" rx="5" ry="6" fill="#4c7d49"/>
-      <polygon points="-9,-10 9,-10 6,2 -6,2" fill="#a06a48"/>
-      <rect x="-9" y="-11" width="18" height="3" fill="#84543a"/>
-    </g>
-    <g id="avatar">
-      <ellipse class="shadow" cx="0" cy="16" rx="11" ry="4" fill="#000000" opacity="0.25"/>
-      <rect x="-7" y="12" width="5" height="4" fill="#2a2233"/>
-      <rect x="2" y="12" width="5" height="4" fill="#2a2233"/>
-      <rect class="body" x="-8" y="-4" width="16" height="18" rx="7"/>
-      <circle cx="0" cy="-14" r="9" fill="#f2c9a2"/>
-      <path d="M -9,-14 A 9 9 0 0 1 9,-14 L 9,-17 A 9 6 0 0 0 -9,-17 Z" fill="#4a3628"/>
-      <circle cx="-3" cy="-13" r="1" fill="#2a2233"/>
-      <circle cx="3" cy="-13" r="1" fill="#2a2233"/>
-    </g>
-  </defs>
-
-  <!-- void: the space beyond the walkable room -->
-  <rect x="0" y="0" width="720" height="400" fill="#17131d"/>
-
-  <g clip-path="url(#roomClip)">
-    <!-- wall shell: flat top-down wall tiles all around the room -->
-    <rect x="40" y="30" width="640" height="340" fill="#6d5d7d"/>
-
-    <!-- back wall face + base edge (the wall row the floor sits south of) -->
-    <rect x="40" y="96" width="640" height="21" fill="#51445e"/>
-    <rect x="40" y="117" width="640" height="3" fill="#3a3145"/>
-    <rect x="98" y="101" width="3" height="7" fill="#3a3145"/>
-    <rect x="212" y="104" width="3" height="7" fill="#3a3145"/>
-    <rect x="356" y="101" width="3" height="7" fill="#3a3145"/>
-    <rect x="497" y="104" width="3" height="7" fill="#3a3145"/>
-    <rect x="601" y="101" width="3" height="7" fill="#3a3145"/>
-
-    <!-- floor -->
-    <rect x="60" y="120" width="600" height="230" fill="url(#floorPattern)"/>
-    <rect x="58" y="120" width="2" height="230" fill="#3a3145"/>
-    <rect x="660" y="120" width="2" height="230" fill="#3a3145"/>
-    <rect x="60" y="348" width="600" height="2" fill="#3a3145"/>
-
-    <!-- soft shadow cast by the back wall onto the floor -->
-    <rect x="60" y="120" width="600" height="8" fill="#2a2233" opacity="0.18"/>
-
-    <!-- rugs -->
-    <g>
-      <rect x="100" y="165" width="200" height="130" fill="#8f434b"/>
-      <rect x="106" y="171" width="188" height="118" fill="#a8545c"/>
-      <rect x="116" y="175" width="4" height="4" fill="#8f434b"/>
-      <rect x="140" y="175" width="4" height="4" fill="#8f434b"/>
-      <rect x="164" y="175" width="4" height="4" fill="#8f434b"/>
-      <rect x="188" y="175" width="4" height="4" fill="#8f434b"/>
-      <rect x="212" y="175" width="4" height="4" fill="#8f434b"/>
-      <rect x="236" y="175" width="4" height="4" fill="#8f434b"/>
-      <rect x="260" y="175" width="4" height="4" fill="#8f434b"/>
-      <rect x="116" y="281" width="4" height="4" fill="#8f434b"/>
-      <rect x="140" y="281" width="4" height="4" fill="#8f434b"/>
-      <rect x="164" y="281" width="4" height="4" fill="#8f434b"/>
-      <rect x="188" y="281" width="4" height="4" fill="#8f434b"/>
-      <rect x="212" y="281" width="4" height="4" fill="#8f434b"/>
-      <rect x="236" y="281" width="4" height="4" fill="#8f434b"/>
-      <rect x="260" y="281" width="4" height="4" fill="#8f434b"/>
-    </g>
-    <g>
-      <rect x="410" y="215" width="200" height="115" fill="#416a62"/>
-      <rect x="416" y="221" width="188" height="103" fill="#4f7d74"/>
-      <rect x="428" y="225" width="4" height="4" fill="#416a62"/>
-      <rect x="452" y="225" width="4" height="4" fill="#416a62"/>
-      <rect x="476" y="225" width="4" height="4" fill="#416a62"/>
-      <rect x="500" y="225" width="4" height="4" fill="#416a62"/>
-      <rect x="524" y="225" width="4" height="4" fill="#416a62"/>
-      <rect x="548" y="225" width="4" height="4" fill="#416a62"/>
-      <rect x="572" y="225" width="4" height="4" fill="#416a62"/>
-      <rect x="428" y="316" width="4" height="4" fill="#416a62"/>
-      <rect x="452" y="316" width="4" height="4" fill="#416a62"/>
-      <rect x="476" y="316" width="4" height="4" fill="#416a62"/>
-      <rect x="500" y="316" width="4" height="4" fill="#416a62"/>
-      <rect x="524" y="316" width="4" height="4" fill="#416a62"/>
-      <rect x="548" y="316" width="4" height="4" fill="#416a62"/>
-      <rect x="572" y="316" width="4" height="4" fill="#416a62"/>
-    </g>
-
-    <!-- potted plants -->
-    <use href="#plantIcon" transform="translate(80,320)"/>
-    <use href="#plantIcon" transform="translate(628,155)"/>
-
-    <!-- avatars -->
-    <use href="#avatar" transform="translate(185,258)" fill="#e0a458"/>
-
-    <!-- speaking avatar: green proximity-voice ring + speech bubble -->
-    <ellipse cx="345" cy="212" rx="14" ry="6" fill="#6fbf8f" fill-opacity="0.15" stroke="#6fbf8f" stroke-width="1.6" stroke-opacity="0.9"/>
-    <use href="#avatar" transform="translate(345,196)" fill="#5a8fc2"/>
-    <g transform="translate(345,196)">
-      <path d="M -5,-33 5,-33 0,-26 Z" fill="#efe6d2" stroke="#2a2233" stroke-width="1.5"/>
-      <rect x="-22" y="-59" width="44" height="26" rx="6" fill="#efe6d2" stroke="#2a2233" stroke-width="1.5"/>
-      <rect x="-9" y="-50" width="3" height="10" fill="#2a2233"/>
-      <rect x="-3" y="-53" width="3" height="16" fill="#2a2233"/>
-      <rect x="3" y="-48" width="3" height="8" fill="#2a2233"/>
-      <rect x="9" y="-51" width="3" height="14" fill="#2a2233"/>
-    </g>
-
-    <use href="#avatar" transform="translate(505,300)" fill="#9b7bc9"/>
-  </g>
-</svg>