diff --git a/js/main.js b/js/main.js
index fe489be7d38..72a25577056 100644
--- a/js/main.js
+++ b/js/main.js
@@ -188,8 +188,13 @@ createRestaurantHTML = restaurant => {
   const imageWrapper = document.createElement('div');
   imageWrapper.className = 'restaurant-img-sizer';
 
-  const svgAspectRatio = document.createElement('svg');
-  svgAspectRatio.setAttribute('viewbox', '0 0 4 3');
+  // Create XML fragment, not HTML, otherwise setAttribute forces lowercase, though viewBox is case-sensitive
+  // @link https://stackoverflow.com/a/28734954/781824
+  const svgAspectRatio = document.createElementNS(
+    'http://www.w3.org/2000/svg',
+    'svg'
+  );
+  svgAspectRatio.setAttribute('viewBox', '0 0 4 3');
   imageWrapper.append(svgAspectRatio);
 
   const image = document.createElement('img');
diff --git a/restaurant.html b/restaurant.html
index dd60b96001e..e56fdbd78c5 100644
--- a/restaurant.html
+++ b/restaurant.html
@@ -40,7 +40,7 @@ <h2 id="restaurant-name"></h2>
       <!-- maintain aspect ratio of img, credit:
            @link https://codeburst.io/keeping-aspect-ratio-with-html-and-no-padding-tricks-40705656808b -->
       <div class="restaurant-img-sizer">
-        <svg viewbox="0 0 4 3"></svg>
+        <svg viewBox="0 0 4 3"></svg>
         <img alt="" id="restaurant-img">
       </div>
       <div id="restaurant-cuisine"></div>