         if not maneuvers?
           return "Missing maneuver info."
 
-        # first define the 3 arrowhead colors - these are global to all svg elements, so no need to redefine them each time an arrow is drawn
-        # however, there's no way to fill with the line color, so need one marker for each color
-        outTable = ""
-        outTable += $.trim '''
-          <svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
-            <defs>
-              <marker id='redarrowhead' orient='auto' markerWidth='4' markerHeight='4' refX='0.1' refY='2'>
-                <path d='M0,0 V4 L4,2 Z' fill='red' />
-              </marker>
-              <marker id='greenarrowhead' orient='auto' markerWidth='4' markerHeight='4' refX='0.1' refY='2'>
-                <path d='M0,0 V4 L4,2 Z' fill='green' />
-              </marker>
-              <marker id='whitearrowhead' orient='auto' markerWidth='4' markerHeight='4' refX='0.1' refY='2'>
-                <path d='M0,0 V4 L4,2 Z' fill='white' />
-              </marker>
-            </defs>
-          </svg>
-          <table><tbody>
-        '''
+        outTable = "<table><tbody>"
 
         viewWidth = 200
         viewHeight = 200

                            turnType = "C"
                            extraPoint = "60,-10 "

                    color = switch maneuvers[speed][turn]
                        when 1 then "white"
                        when 2 then "green"


                    outTable += $.trim """
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 #{viewWidth} #{viewHeight}">
                        <path d='M#{arrowStartx},#{arrowStarty} #{arrowMove} L#{arrowEndx},#{arrowEndy} Z' fill='#{color}' #{transform}/>
                        <path stroke-width='15' fill='none' stroke='#{color}' d='M#{startx},#{starty} #{turnType}#{smoothx},#{smoothy} #{extraPoint}#{endx},#{endy}' />
                      </svg>
                    """
                outTable += "</td>"
