Replace Seat `<svg>` elements with `<use>`

Extract a separate <svg> nested within the map that is visually hidden. This <svg> element declares a <symbol> element with an id attribute named to represent a Seat‘s unselected icon.

Replace our Seat’s corresponding <svg> elements with <use> elements that reference our <symbol> elements by declaring xlink:href attribute which refers to the <symbol> element’s id attribute.


      app/views/seats/index.html.erb

diff --git a/app/views/seats/index.html.erb b/app/views/seats/index.html.erb
index 8da5260..50bbf62 100644
--- a/app/views/seats/index.html.erb
+++ b/app/views/seats/index.html.erb
@@ -19,6 +19,18 @@
       >
         <rect fill="none" x="0" y="0" width="1600" height="1600"></rect>
 
+        <svg style="display: none;">
+          <symbol
+            id="seat-icon-unselected"
+            width="24"
+            height="24"
+            viewbox="0 0 24 24"
+          >
+            <circle fill="#37b24d" r="12" cx="12" cy="12"></circle>
+            <circle fill="#ffffff" r="6" cx="12" cy="12"></circle>
+          </symbol>
+        </svg>
+
         <% sections.each do |section| %>
           <g>
             <% section.seats.each do |seat| %>
@@ -26,16 +38,14 @@
                 href="<%= venue_floor_seat_path(venue, floor, seat.row_number) %>"
                 aria-label="<%= seat.row_number %>"
               >
-                <svg
+                <use
+                  xlink:href="#seat-icon-unselected"
                   width="12px"
                   height="12px"
-                  viewBox="0 0 24 24"
                   x="<%= seat.x %>"
                   y="<%= seat.y %>"
                 >
-                  <circle fill="#37b24d" r="12" cx="12" cy="12"></circle>
-                  <circle fill="#ffffff" r="6" cx="12" cy="12"></circle>
-                </svg>
+                </use>
               </a>
             <% end %>
           </g>

Replace Seat <svg> elements with <use>

Replace Seat `<svg>` elements with `<use>`