diff --git a/src/pages/_includes/ui/map-vector.html b/src/pages/_includes/ui/map-vector.html
index db47ec735..2d2aab541 100644
--- a/src/pages/_includes/ui/map-vector.html
+++ b/src/pages/_includes/ui/map-vector.html
@@ -3,6 +3,11 @@
 {% assign color = include.color | default: data.color | default: 'green' %}
 
 {% if data %}
+	{% if jekyll.environment == 'development' %}
+<div class="ratio ratio-{{ include.ratio | default: '4x3' }}">
+		{% include ui/svg.html width="590" height="252" ratio=true border=true %}
+</div>
+	{% else %}
 	<div class="ratio ratio-{{ include.ratio | default: '4x3' }}">
 		<div>
 			<div id="map-{{ id }}" class="w-100 h-100"></div>
@@ -10,104 +15,105 @@
 	</div>
 
 	{% capture script %}
-	<script>
-		// @formatter:on
-		{% if jekyll.environment == 'development' %}window.tabler_map_vector = window.tabler_map_vector || {};{% endif %}
+		<script>
+			// @formatter:on
+			{% if jekyll.environment == 'development' %}window.tabler_map_vector = window.tabler_map_vector || {};{% endif %}
 
-		document.addEventListener("DOMContentLoaded", function() {
-			const map = {% if jekyll.environment == 'development' %}window.tabler_map_vector["map-{{ id }}"] = {% endif %}new jsVectorMap({
-				selector: '#map-{{ id }}',
-				map: '{{ data.map }}',
-				backgroundColor: 'transparent',
-				regionStyle: {
-					initial: {
-						{% unless data.filled %}
-						fill: tabler.getColor('body-bg'),
-						stroke: 'rgba(98, 105, 118, .16)',
-						strokeWidth: 1,
-						{% else %}
-						fill: tabler.getColor('body-bg'),
-						stroke: '#fff',
-						strokeWidth: 1,
-						{% endunless %}
-					}
-				},
-				zoomOnScroll: {% if data.zoom %}true{% else %}false{% endif %},
-				zoomButtons: {% if data.zoom %}true{% else %}false{% endif %},
-				{% if data.values %}
-				// -------- Series --------
-				visualizeData: {
-					scale: [tabler.getColor('card-bg'), tabler.getColor('{{ data.color }}')],
-					values: {{ data.values }},
-				},
-				{% endif %}
-				{% if data.markers %}
-				markers: [
-					{% for marker in data.markers %}
-					{
-						coords: [{{ marker.coords }}],
-						name: "{{ marker.name }}",
+			document.addEventListener("DOMContentLoaded", function() {
+				const map = {% if jekyll.environment == 'development' %}window.tabler_map_vector["map-{{ id }}"] = {% endif %}new jsVectorMap({
+					selector: '#map-{{ id }}',
+					map: '{{ data.map }}',
+					backgroundColor: 'transparent',
+					regionStyle: {
+						initial: {
+							{% unless data.filled %}
+							fill: tabler.getColor('body-bg'),
+							stroke: 'rgba(98, 105, 118, .16)',
+							strokeWidth: 1,
+							{% else %}
+							fill: tabler.getColor('body-bg'),
+							stroke: '#fff',
+							strokeWidth: 1,
+							{% endunless %}
+						}
 					},
-					{% endfor %}
-				],
-				markerStyle: {
-					initial: {
-						r: 4,
-						stroke: '#fff',
-						opacity: 1,
-						strokeWidth: 3,
-						stokeOpacity: .5,
-						fill: tabler.getColor('{{ color }}')
+					zoomOnScroll: {% if data.zoom %}true{% else %}false{% endif %},
+					zoomButtons: {% if data.zoom %}true{% else %}false{% endif %},
+					{% if data.values %}
+					// -------- Series --------
+					visualizeData: {
+						scale: [tabler.getColor('card-bg'), tabler.getColor('{{ data.color }}')],
+						values: {{ data.values }},
 					},
-					hover: {
-						fill: tabler.getColor('{{ color }}'),
-						stroke: tabler.getColor('{{ color }}')
-					}
-				},
-				markerLabelStyle: {
-					initial: {
-						fontSize: 10
+					{% endif %}
+					{% if data.markers %}
+					markers: [
+						{% for marker in data.markers %}
+						{
+							coords: [{{ marker.coords }}],
+							name: "{{ marker.name }}",
+						},
+						{% endfor %}
+					],
+					markerStyle: {
+						initial: {
+							r: 4,
+							stroke: '#fff',
+							opacity: 1,
+							strokeWidth: 3,
+							stokeOpacity: .5,
+							fill: tabler.getColor('{{ color }}')
+						},
+						hover: {
+							fill: tabler.getColor('{{ color }}'),
+							stroke: tabler.getColor('{{ color }}')
+						}
 					},
-				},
-				labels: {
-					markers: {
-						render: function(marker) {
-							return marker.name
+					markerLabelStyle: {
+						initial: {
+							fontSize: 10
 						},
 					},
-				},
-				{% endif %}
-				{% if data.lines %}
-				lines: [
-					{% for line in data.lines %}
-					{
-						from: "{{ line.from }}",
-						to: "{{ line.to }}"
+					labels: {
+						markers: {
+							render: function(marker) {
+								return marker.name
+							},
+						},
 					},
-					{% endfor %}
-				],
-				lineStyle: {
-					strokeDasharray:"4 4",
-					animation: true,
-					stroke: "rgba(98, 105, 118, .75)",
-					strokeWidth: .5,
-				},
-				{% endif %}
-			});
+					{% endif %}
+					{% if data.lines %}
+					lines: [
+						{% for line in data.lines %}
+						{
+							from: "{{ line.from }}",
+							to: "{{ line.to }}"
+						},
+						{% endfor %}
+					],
+					lineStyle: {
+						strokeDasharray:"4 4",
+						animation: true,
+						stroke: "rgba(98, 105, 118, .75)",
+						strokeWidth: .5,
+					},
+					{% endif %}
+				});
 
-			window.addEventListener("resize", () => {
-				map.updateSize();
+				window.addEventListener("resize", () => {
+					map.updateSize();
+				});
 			});
-		});
-		// @formatter:off
-	</script>
-	{% endcapture %}
+			// @formatter:off
+		</script>
+		{% endcapture %}
 
-	{% if include.show-scripts %}
-		{{ script }}
-	{% else %}
-		{% capture_global scripts %}
+		{% if include.show-scripts %}
 			{{ script }}
-		{% endcapture_global %}
+		{% else %}
+			{% capture_global scripts %}
+				{{ script }}
+			{% endcapture_global %}
+		{% endif %}
 	{% endif %}
 {% endif %}
diff --git a/src/pages/_includes/ui/svg.html b/src/pages/_includes/ui/svg.html
index c2799487a..3a05876ce 100644
--- a/src/pages/_includes/ui/svg.html
+++ b/src/pages/_includes/ui/svg.html
@@ -1,7 +1,7 @@
 {% assign width = include.width | default: include.size | default: 20 %}
 {% assign height = include.height | default: include.size | default: 20 %}
-<svg xmlns="http://www.w3.org/2000/svg"{% if include.class %} class="{{ include.class }}"{% endif %} preserveAspectRatio="{% if include.ratio %}xMidYMid meet{% else %}none{% endif %}" width="{{ width }}" height="{% if include.ratio %}auto{% else %}{{ height }}{% endif %}" viewBox="0 0 {{ width }} {{ height }}" stroke="var(--tblr-border-color, #b8cef1)">
-<!--	<rect x=".5" y=".5" width="{{ width | minus: 1 }}" height="{{ height | minus: 1 }}" fill="#fff" rx="2"></rect>-->
+<svg xmlns="http://www.w3.org/2000/svg"{% if include.class %} class="{{ include.class }}"{% endif %} preserveAspectRatio="{% if include.ratio %}xMidYMid meet{% else %}none{% endif %}" width="{{ width }}" height="{{ height }}" viewBox="0 0 {{ width }} {{ height }}" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)"{% if include.border %} style="width: 100%; height: auto"{% endif %}>
+	{% if include.border %}<rect x=".5" y=".5" width="{{ width | minus: 1 }}" height="{{ height | minus: 1 }}" rx="2"></rect>{% endif %}
 	<line x1="0" y1="0" x2="{{ width }}" y2="{{ height }}"></line>
 	<line x1="0" y1="{{ height }}" x2="{{ width }}" y2="0"></line>
 </svg>