diff --git a/foundations-high-performance-react.org b/foundations-high-performance-react.org
index 88fb392..06c9fb9 100644
--- a/foundations-high-performance-react.org
+++ b/foundations-high-performance-react.org
@@ -792,7 +792,7 @@ only the start of your High-Performance React journey.
 :EXPORT_FILE_NAME: manuscript/image-test.markua
 :END:
 #+name: render-tree-basic
-#+begin_src dot :file "./images/render-tree-basic.svg" :exports results :cmdline -Tsvg
+#+begin_src dot :file "./images/render-tree-basic.png" :exports results :cmdline -Tsvg | inkscape -w 1024 -h 1024 --export-filename render-tree-basic.png
   digraph {
      rankdir=TB;
      node [fontname="DejaVu Sans"];
@@ -810,7 +810,7 @@ only the start of your High-Performance React journey.
 
 #+caption: Figure {{{n(FIGURE)}}}: Tree of components
 #+RESULTS: render-tree-basic
-[[file:./images/render-tree-basic.svg]]
+[[file:./images/render-tree-basic.png]]
 
 As you can see in Figure {{{n(FIGURE, -)}}} when stage changes in component ~A~
 component ~B~ will be re-rendered.
diff --git a/manuscript/image-test.markua b/manuscript/image-test.markua
index 89c9b1f..bb41cf8 100644
--- a/manuscript/image-test.markua
+++ b/manuscript/image-test.markua
@@ -1,7 +1,7 @@
 # Image Test
 
 {caption: "Figure 1: Tree of components"}
-![Figure 1: Tree of components](./images/render-tree-basic.svg) 
+![Figure 1: Tree of components](./images/render-tree-basic.png) 
 
 As you can see in Figure 1 when stage changes in component `A` component `B` will be re-rendered. 
 
diff --git a/manuscript/resources/images/render-tree-basic.png b/manuscript/resources/images/render-tree-basic.png
new file mode 100644
index 0000000..a9eef6f
Binary files /dev/null and b/manuscript/resources/images/render-tree-basic.png differ