M #- improved image quality (#433)

Signed-off-by: priscill <porue@opennebula.io>
(cherry picked from commit 9d8da69)

Author: prisorue

assets/images/one_deploy_arch_local.png

@@ -32,11 +32,10 @@ The basic procedure is as follows:
 
 Ansible is an agentless platform and uses SSH as the default transport for deployment. The control node must be able to communicate with the managed nodes via SSH.
 
-{{< image path=/images/one_deploy_basic_arch.png width=1080 height=669 >}}
+{{< image path="/images/one_deploy_basic_arch.svg" alt="OpenNebula Basic Architecture" align="center" width="50%" pb="20px" >}}
 
 <!-- ![image](/images/one_deploy_basic_arch.png)
 <br/> -->
-<p></p>
 
 It is worth noting that you can use the control node itself as a managed node. In the tutorials included in this documentation, the OpenNebula Front-end is installed on the Ansible control node and the Hypervisors on the managed nodes.
 

assets/images/one_deploy_arch_local.svg

@@ -20,9 +20,9 @@ In this tutorial, we’ll use [OneDeploy](https://github.com/OpenNebula/one-depl
 
 This sample architecture uses a basic network configuration, a flat (bridged) network, where each VM’s IP is part of the same network as the Hypervisors.
 
-![><](/images/one_deploy_arch_local.png)
+{{< image path="/images/one_deploy_arch_local.svg" alt="OneDeploy" align="center" width="50%" pb="20px" >}}
 
-Throughout the tutorial we’ll use three server machines, please be sure to replace these references to your own IP addresses:
+Throughout the tutorial you will use three server machines. Replace these references to your own IP addresses:
 
 > * OpenNebula Front-end: 172.20.0.2
 > * Hypervisor (Host) 1: 172.20.0.3

assets/images/one_deploy_basic_arch.png

@@ -1,5 +1,44 @@
-{{- with resources.Get (.Get "path") }}
-  {{- with .Process (printf "resize %dx wepb" ($.Get "width")) -}}
-    <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="{{ $.Get "alt" }}">
-  {{- end }}
-{{- end -}}
+{{ $path := .Get "path" }}
+{{ $alt := .Get "alt" | default "" }}
+{{ $width := .Get "width" }}
+{{ $class := .Get "class" | default "" }}
+{{ $align := .Get "align" | default "" }}
+{{ $pb := .Get "pb" | default "" }}
+{{ $src := resources.Get $path }}
+
+{{ if $src }}
+  {{ $isSVG := eq $src.MediaType.SubType "svg" }}
+
+  {{/* Build inline style for centering and size */}}
+  {{ $finalStyle := "" }}
+  {{ if eq $align "center" }}
+    {{ $finalStyle = printf "display: block; margin-left: auto; margin-right: auto;" }}
+  {{ end }}
+  {{ if $width }}
+    {{ $finalStyle = printf "%s width: %s;" $finalStyle $width }}
+  {{ end }}
+
+  {{ if $pb }}
+    {{ $finalStyle = printf "%s padding-bottom: %s;" $finalStyle $pb }}
+  {{ end }}
+
+  {{ if $isSVG }}
+    {{/* --- SVG HANDLING --- */}}
+    <img src="{{ $src.RelPermalink }}" alt="{{ $alt }}" 
+      {{ with $width }}width="{{ . }}"{{ end }}
+      {{ with $class }}class="{{ . }}"{{ end }}
+      {{ with $finalStyle }}style="{{ . | safeCSS }}"{{ end }}>
+      
+  {{ else }}
+    {{/* --- RASTER IMAGE PROCESSING (Original Logic) --- */}}
+    {{- with $src.Process (printf "resize %dx webp" $width) -}}
+      <img src="{{ .RelPermalink }}" alt="{{ $alt }}" 
+        width="{{ .Width }}" height="{{ .Height }}" 
+        {{ with $class }}class="{{ . }}"{{ end }}
+        {{ with $finalStyle }}style="{{ $finalStyle }}"{{ end }}>
+    {{- end }}
+  {{ end }}
+
+{{ else }}
+  <p style="color: red;">Image not found: {{ $path }}</p>
+{{ end }}