diff --git a/packages/core/configuration/util.ts b/packages/core/configuration/util.ts
index f42accafdc..642b5de9c2 100644
--- a/packages/core/configuration/util.ts
+++ b/packages/core/configuration/util.ts
@@ -93,10 +93,7 @@ export function readConfObject(
     ) {
       subConf = confObject.get(slotName)
     }
-    if (!subConf) {
-      return undefined
-    }
-    return readConfObject(subConf, newPath, args)
+    return subConf ? readConfObject(subConf, newPath, args) : undefined
   }
   return readConfObject(confObject, slotName, args)
 }
diff --git a/packages/core/util/index.ts b/packages/core/util/index.ts
index bc44ef4669..5bb7414091 100644
--- a/packages/core/util/index.ts
+++ b/packages/core/util/index.ts
@@ -504,21 +504,22 @@ function roundToNearestPointOne(num: number): number {
  */
 export function bpToPx(
   bp: number,
-  region: { start: number; end: number; reversed?: boolean },
+  {
+    reversed,
+    end = 0,
+    start = 0,
+  }: { start?: number; end?: number; reversed?: boolean },
   bpPerPx: number,
-): number {
-  if (region.reversed) {
-    return roundToNearestPointOne((region.end - bp) / bpPerPx)
-  }
-  return roundToNearestPointOne((bp - region.start) / bpPerPx)
+) {
+  return roundToNearestPointOne((reversed ? end - bp : bp - start) / bpPerPx)
 }
 
 const oneEightyOverPi = 180.0 / Math.PI
 const piOverOneEighty = Math.PI / 180.0
-export function radToDeg(radians: number): number {
+export function radToDeg(radians: number) {
   return (radians * oneEightyOverPi) % 360
 }
-export function degToRad(degrees: number): number {
+export function degToRad(degrees: number) {
   return (degrees * piOverOneEighty) % (2 * Math.PI)
 }
 
diff --git a/packages/core/util/simpleFeature.ts b/packages/core/util/simpleFeature.ts
index 160b5a4d8b..8adb45363b 100644
--- a/packages/core/util/simpleFeature.ts
+++ b/packages/core/util/simpleFeature.ts
@@ -9,6 +9,7 @@ export interface Feature {
   get(name: 'refName'): string
   get(name: 'start'): number
   get(name: 'end'): number
+  get(name: 'subfeatures'): Feature[] | undefined
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   get(name: string): any
 
diff --git a/plugins/linear-genome-view/src/BaseLinearDisplay/components/BaseLinearDisplay.tsx b/plugins/linear-genome-view/src/BaseLinearDisplay/components/BaseLinearDisplay.tsx
index 5e0632781f..96ee3b13fc 100644
--- a/plugins/linear-genome-view/src/BaseLinearDisplay/components/BaseLinearDisplay.tsx
+++ b/plugins/linear-genome-view/src/BaseLinearDisplay/components/BaseLinearDisplay.tsx
@@ -1,8 +1,8 @@
 import React, { useState, useRef, useMemo } from 'react'
+import { observer } from 'mobx-react'
 import { Portal, alpha, useTheme, makeStyles } from '@material-ui/core'
 import { getConf } from '@jbrowse/core/configuration'
 import { Menu } from '@jbrowse/core/ui'
-import { observer } from 'mobx-react'
 import { usePopper } from 'react-popper'
 
 // locals
@@ -56,7 +56,6 @@ const Tooltip = observer(
     const classes = useStyles()
     const { featureUnderMouse } = model
     const [width, setWidth] = useState(0)
-
     const [popperElt, setPopperElt] = useState<HTMLDivElement | null>(null)
 
     // must be memoized a la https://github.com/popperjs/react-popper/issues/391
@@ -111,7 +110,7 @@ const BaseLinearDisplay = observer(
     const classes = useStyles()
     const theme = useTheme()
     const ref = useRef<HTMLDivElement>(null)
-    const [clientRect, setClientRect] = useState<ClientRect>()
+    const [clientRect, setClientRect] = useState<DOMRect>()
     const [offsetMouseCoord, setOffsetMouseCoord] = useState<Coord>([0, 0])
     const [clientMouseCoord, setClientMouseCoord] = useState<Coord>([0, 0])
     const [contextCoord, setContextCoord] = useState<Coord>()
@@ -139,17 +138,15 @@ const BaseLinearDisplay = observer(
           }
         }}
         onMouseMove={event => {
-          if (ref.current) {
-            const rect = ref.current.getBoundingClientRect()
-            setOffsetMouseCoord([
-              event.clientX - rect.left,
-              event.clientY - rect.top,
-            ])
-            setClientMouseCoord([event.clientX, event.clientY])
-            setClientRect(rect)
+          if (!ref.current) {
+            return
           }
+          const rect = ref.current.getBoundingClientRect()
+          const { left, top } = rect
+          setOffsetMouseCoord([event.clientX - left, event.clientY - top])
+          setClientMouseCoord([event.clientX, event.clientY])
+          setClientRect(rect)
         }}
-        role="presentation"
       >
         {DisplayMessageComponent ? (
           <DisplayMessageComponent model={model} />
diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.js.snap b/plugins/linear-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.js.snap
index fe41b14ebc..25bd03a446 100644
--- a/plugins/linear-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.js.snap
+++ b/plugins/linear-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.js.snap
@@ -541,7 +541,6 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
           <div
             class="makeStyles-display"
             data-testid="display-testConfig-LinearBareDisplay"
-            role="presentation"
           >
             <div
               class="makeStyles-linearBlocks"
@@ -1434,7 +1433,6 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
           <div
             class="makeStyles-display"
             data-testid="display-testConfig-LinearBareDisplay"
-            role="presentation"
           >
             <div
               class="makeStyles-linearBlocks"
@@ -1449,17 +1447,12 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
                 class="makeStyles-contentBlock"
                 style="width: 100px;"
               >
-                <div
-                  style="position: relative;"
-                >
-                  <svg
-                    class="SvgFeatureRendering"
-                    data-testid="svgfeatures"
-                    height="100"
-                    style="display: block;"
-                    width="100"
-                  />
-                </div>
+                <svg
+                  class="SvgFeatureRendering"
+                  data-testid="svgfeatures"
+                  height="100"
+                  width="100"
+                />
               </div>
               <div
                 class="makeStyles-interRegionPaddingBlock"
@@ -1469,17 +1462,12 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
                 class="makeStyles-contentBlock"
                 style="width: 1000px;"
               >
-                <div
-                  style="position: relative;"
-                >
-                  <svg
-                    class="SvgFeatureRendering"
-                    data-testid="svgfeatures"
-                    height="100"
-                    style="display: block;"
-                    width="1000"
-                  />
-                </div>
+                <svg
+                  class="SvgFeatureRendering"
+                  data-testid="svgfeatures"
+                  height="100"
+                  width="1000"
+                />
               </div>
               <div
                 class="makeStyles-boundaryPaddingBlock"
@@ -1589,7 +1577,6 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
           <div
             class="makeStyles-display"
             data-testid="display-testConfig2-LinearBareDisplay"
-            role="presentation"
           >
             <div
               class="makeStyles-linearBlocks"
@@ -1604,17 +1591,12 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
                 class="makeStyles-contentBlock"
                 style="width: 100px;"
               >
-                <div
-                  style="position: relative;"
-                >
-                  <svg
-                    class="SvgFeatureRendering"
-                    data-testid="svgfeatures"
-                    height="100"
-                    style="display: block;"
-                    width="100"
-                  />
-                </div>
+                <svg
+                  class="SvgFeatureRendering"
+                  data-testid="svgfeatures"
+                  height="100"
+                  width="100"
+                />
               </div>
               <div
                 class="makeStyles-interRegionPaddingBlock"
@@ -1624,17 +1606,12 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
                 class="makeStyles-contentBlock"
                 style="width: 1000px;"
               >
-                <div
-                  style="position: relative;"
-                >
-                  <svg
-                    class="SvgFeatureRendering"
-                    data-testid="svgfeatures"
-                    height="100"
-                    style="display: block;"
-                    width="1000"
-                  />
-                </div>
+                <svg
+                  class="SvgFeatureRendering"
+                  data-testid="svgfeatures"
+                  height="100"
+                  width="1000"
+                />
               </div>
               <div
                 class="makeStyles-boundaryPaddingBlock"
diff --git a/plugins/svg/src/SvgFeatureRenderer/components/Arrow.tsx b/plugins/svg/src/SvgFeatureRenderer/components/Arrow.tsx
new file mode 100644
index 0000000000..532c9f036d
--- /dev/null
+++ b/plugins/svg/src/SvgFeatureRenderer/components/Arrow.tsx
@@ -0,0 +1,43 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+
+import {
+  AnyConfigurationModel,
+  readConfObject,
+} from '@jbrowse/core/configuration'
+import { Feature } from '@jbrowse/core/util/simpleFeature'
+import { SceneGraph } from '@jbrowse/core/util/layouts'
+
+const Arrow = ({
+  feature,
+  featureLayout,
+  config,
+}: {
+  feature: Feature
+  featureLayout: SceneGraph
+  config: AnyConfigurationModel
+}) => {
+  const strand = feature.get('strand')
+  const size = 5
+  const offset = 7 * strand
+  const { left = 0, top = 0, width = 0, height = 0 } = featureLayout.absolute
+  const color2 = readConfObject(config, 'color2', { feature })
+  const p = strand === -1 ? left : strand === 1 ? left + width : null
+  const y = top + height / 2
+
+  return p ? (
+    <>
+      <line x1={p} x2={p + offset} y1={y} y2={y} stroke={color2} />
+      <polygon
+        points={[
+          [p + offset / 2, y - size / 2],
+          [p + offset / 2, y + size / 2],
+          [p + offset, y],
+        ].toString()}
+        stroke={color2}
+      />
+    </>
+  ) : null
+}
+
+export default observer(Arrow)
diff --git a/plugins/svg/src/SvgFeatureRenderer/components/Box.js b/plugins/svg/src/SvgFeatureRenderer/components/Box.js
deleted file mode 100644
index beacfcee48..0000000000
--- a/plugins/svg/src/SvgFeatureRenderer/components/Box.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import { readConfObject } from '@jbrowse/core/configuration'
-import { PropTypes as CommonPropTypes } from '@jbrowse/core/util/types/mst'
-import { emphasize } from '@jbrowse/core/util/color'
-import { observer } from 'mobx-react'
-import ReactPropTypes from 'prop-types'
-import React from 'react'
-
-function Box(props) {
-  const { feature, region, config, featureLayout, selected, bpPerPx } = props
-  const screenWidth = (region.end - region.start) / bpPerPx
-
-  const color1 = readConfObject(config, 'color1', { feature })
-  let emphasizedColor1
-  try {
-    emphasizedColor1 = emphasize(color1, 0.3)
-  } catch (error) {
-    emphasizedColor1 = color1
-  }
-  const color2 = readConfObject(config, 'color2', { feature })
-
-  const { left, top, width, height } = featureLayout.absolute
-
-  if (left + width < 0) {
-    return null
-  }
-  const leftWithinBlock = Math.max(left, 0)
-  const diff = leftWithinBlock - left
-  const widthWithinBlock = Math.max(1, Math.min(width - diff, screenWidth))
-
-  return (
-    <rect
-      data-testid={`box-${feature.id()}`}
-      x={leftWithinBlock}
-      y={top}
-      width={widthWithinBlock}
-      height={height}
-      fill={selected ? emphasizedColor1 : color1}
-      stroke={selected ? color2 : undefined}
-    />
-  )
-}
-
-Box.propTypes = {
-  feature: ReactPropTypes.shape({
-    get: ReactPropTypes.func.isRequired,
-    id: ReactPropTypes.func.isRequired,
-  }).isRequired,
-  region: CommonPropTypes.Region.isRequired,
-  bpPerPx: ReactPropTypes.number.isRequired,
-  featureLayout: ReactPropTypes.shape({
-    absolute: ReactPropTypes.shape({
-      top: ReactPropTypes.number.isRequired,
-      left: ReactPropTypes.number.isRequired,
-      width: ReactPropTypes.number.isRequired,
-      height: ReactPropTypes.number.isRequired,
-    }),
-  }).isRequired,
-  selected: ReactPropTypes.bool,
-  config: CommonPropTypes.ConfigSchema.isRequired,
-}
-
-Box.defaultProps = {
-  selected: false,
-}
-
-export default observer(Box)
diff --git a/plugins/svg/src/SvgFeatureRenderer/components/Box.tsx b/plugins/svg/src/SvgFeatureRenderer/components/Box.tsx
new file mode 100644
index 0000000000..ac8a066f6d
--- /dev/null
+++ b/plugins/svg/src/SvgFeatureRenderer/components/Box.tsx
@@ -0,0 +1,63 @@
+import React from 'react'
+import {
+  AnyConfigurationModel,
+  readConfObject,
+} from '@jbrowse/core/configuration'
+import { Region } from '@jbrowse/core/util/types'
+import { Feature } from '@jbrowse/core/util/simpleFeature'
+import { observer } from 'mobx-react'
+import { isUTR } from './util'
+import Arrow from './Arrow'
+import { SceneGraph } from '@jbrowse/core/util/layouts'
+
+const utrHeightFraction = 0.65
+
+function Box(props: {
+  feature: Feature
+  region: Region
+  config: AnyConfigurationModel
+  featureLayout: SceneGraph
+  bpPerPx: number
+  selected?: boolean
+  topLevel?: boolean
+  children?: React.ReactNode
+}) {
+  const { feature, region, config, featureLayout, bpPerPx, topLevel } = props
+  const { start, end } = region
+  const screenWidth = (end - start) / bpPerPx
+  const { left = 0, width = 0 } = featureLayout.absolute
+  let { top = 0, height = 0 } = featureLayout.absolute
+
+  if (left + width < 0) {
+    return null
+  }
+
+  if (isUTR(feature)) {
+    top += ((1 - utrHeightFraction) / 2) * height
+    height *= utrHeightFraction
+  }
+  const leftWithinBlock = Math.max(left, 0)
+  const diff = leftWithinBlock - left
+  const widthWithinBlock = Math.max(1, Math.min(width - diff, screenWidth))
+
+  return (
+    <>
+      {topLevel ? <Arrow {...props} /> : null}
+      <rect
+        data-testid={`box-${feature.id()}`}
+        x={leftWithinBlock}
+        y={top}
+        width={widthWithinBlock}
+        height={height}
+        fill={
+          isUTR(feature)
+            ? readConfObject(config, 'color3', { feature })
+            : readConfObject(config, 'color1', { feature })
+        }
+        stroke={readConfObject(config, 'outline', { feature }) as string}
+      />
+    </>
+  )
+}
+
+export default observer(Box)
diff --git a/plugins/svg/src/SvgFeatureRenderer/components/Chevron.js b/plugins/svg/src/SvgFeatureRenderer/components/Chevron.js
deleted file mode 100644
index 59b9f06f3f..0000000000
--- a/plugins/svg/src/SvgFeatureRenderer/components/Chevron.js
+++ /dev/null
@@ -1,113 +0,0 @@
-import { readConfObject } from '@jbrowse/core/configuration'
-import { PropTypes as CommonPropTypes } from '@jbrowse/core/util/types/mst'
-import { emphasize } from '@jbrowse/core/util/color'
-import { observer } from 'mobx-react'
-import ReactPropTypes from 'prop-types'
-import React from 'react'
-import { isUTR } from './util'
-
-const utrHeightFraction = 0.65
-
-function Chevron(props) {
-  const {
-    feature,
-    bpPerPx,
-    region,
-    config,
-    featureLayout,
-    selected,
-    reversed,
-  } = props
-
-  const screenWidth = (region.end - region.start) / bpPerPx
-  const width = Math.max(featureLayout.absolute.width, 1)
-  const { left } = featureLayout.absolute
-  let { top, height } = featureLayout.absolute
-  if (isUTR(feature)) {
-    top += ((1 - utrHeightFraction) / 2) * height
-    height *= utrHeightFraction
-  }
-
-  const strand = feature.get('strand')
-  const direction = strand * (reversed ? -1 : 1)
-  const color = isUTR(feature)
-    ? readConfObject(config, 'color3', { feature })
-    : readConfObject(config, 'color1', { feature })
-  let emphasizedColor
-  try {
-    emphasizedColor = emphasize(color, 0.3)
-  } catch (error) {
-    emphasizedColor = color
-  }
-  const color2 = readConfObject(config, 'color2', { feature })
-
-  if (left + width < 0) {
-    return null
-  }
-  const leftWithinBlock = Math.max(left, 0)
-  const diff = leftWithinBlock - left
-  const widthWithinBlock = Math.max(1, Math.min(width - diff, screenWidth))
-
-  return (
-    <>
-      <rect
-        data-testid={feature.id()}
-        stroke={selected ? color2 : undefined}
-        fill={selected ? emphasizedColor : color}
-        x={leftWithinBlock}
-        y={top}
-        width={widthWithinBlock}
-        height={height}
-      />
-      {direction < 0 && diff === 0 ? (
-        <polygon
-          stroke={selected ? color2 : undefined}
-          fill={selected ? emphasizedColor : color}
-          points={[
-            [left, top],
-            [left - height / 2, top + height / 2],
-            [left, top + height],
-          ]}
-        />
-      ) : null}
-      {direction > 0 && leftWithinBlock + widthWithinBlock < screenWidth ? (
-        <polygon
-          stroke={selected ? color2 : undefined}
-          fill={selected ? emphasizedColor : color}
-          points={[
-            [leftWithinBlock + widthWithinBlock, top],
-            [leftWithinBlock + widthWithinBlock + height / 2, top + height / 2],
-            [leftWithinBlock + widthWithinBlock, top + height],
-          ]}
-        />
-      ) : null}
-    </>
-  )
-}
-
-Chevron.propTypes = {
-  feature: ReactPropTypes.shape({
-    id: ReactPropTypes.func.isRequired,
-    get: ReactPropTypes.func.isRequired,
-  }).isRequired,
-  region: CommonPropTypes.Region.isRequired,
-  bpPerPx: ReactPropTypes.number.isRequired,
-  featureLayout: ReactPropTypes.shape({
-    absolute: ReactPropTypes.shape({
-      top: ReactPropTypes.number.isRequired,
-      left: ReactPropTypes.number.isRequired,
-      width: ReactPropTypes.number.isRequired,
-      height: ReactPropTypes.number.isRequired,
-    }),
-  }).isRequired,
-  selected: ReactPropTypes.bool,
-  config: CommonPropTypes.ConfigSchema.isRequired,
-  reversed: ReactPropTypes.bool,
-}
-
-Chevron.defaultProps = {
-  selected: false,
-  reversed: false,
-}
-
-export default observer(Chevron)
diff --git a/plugins/svg/src/SvgFeatureRenderer/components/FeatureGlyph.js b/plugins/svg/src/SvgFeatureRenderer/components/FeatureGlyph.js
deleted file mode 100644
index e23bf6cd4c..0000000000
--- a/plugins/svg/src/SvgFeatureRenderer/components/FeatureGlyph.js
+++ /dev/null
@@ -1,111 +0,0 @@
-import { readConfObject } from '@jbrowse/core/configuration'
-import { PropTypes as CommonPropTypes } from '@jbrowse/core/util/types/mst'
-import { observer } from 'mobx-react'
-import PropTypes from 'prop-types'
-import React from 'react'
-import FeatureLabel from './FeatureLabel'
-
-function FeatureGlyph(props) {
-  const {
-    feature,
-    rootLayout,
-    selected,
-    config,
-    name,
-    shouldShowName,
-    description,
-    shouldShowDescription,
-    fontHeight,
-    allowedWidthExpansion,
-    reversed,
-  } = props
-
-  const featureLayout = rootLayout.getSubRecord(String(feature.id()))
-  const { GlyphComponent } = featureLayout.data
-
-  const glyphComponents = [
-    <GlyphComponent
-      key={`glyph-${feature.id()}`}
-      {...props}
-      feature={feature}
-      featureLayout={featureLayout}
-      selected={selected}
-    />,
-  ]
-
-  if (shouldShowName) {
-    glyphComponents.push(
-      <FeatureLabel
-        key={`glyph-name-${feature.id()}`}
-        text={name}
-        x={rootLayout.getSubRecord('nameLabel').absolute.left}
-        y={rootLayout.getSubRecord('nameLabel').absolute.top}
-        color={readConfObject(config, ['labels', 'nameColor'], { feature })}
-        fontHeight={fontHeight}
-        reversed={reversed}
-        featureWidth={featureLayout.width}
-        allowedWidthExpansion={allowedWidthExpansion}
-      />,
-    )
-  }
-
-  if (shouldShowDescription) {
-    glyphComponents.push(
-      <FeatureLabel
-        key={`glyph-description-${feature.id()}`}
-        text={description}
-        x={rootLayout.getSubRecord('descriptionLabel').absolute.left}
-        y={rootLayout.getSubRecord('descriptionLabel').absolute.top}
-        color={readConfObject(config, ['labels', 'descriptionColor'], {
-          feature,
-        })}
-        fontHeight={fontHeight}
-        featureWidth={featureLayout.width}
-        reversed={reversed}
-        allowedWidthExpansion={allowedWidthExpansion}
-      />,
-    )
-  }
-
-  return <g>{glyphComponents}</g>
-}
-
-FeatureGlyph.propTypes = {
-  feature: PropTypes.shape({
-    id: PropTypes.func.isRequired,
-    get: PropTypes.func.isRequired,
-  }).isRequired,
-  layout: PropTypes.shape({
-    addRect: PropTypes.func.isRequired,
-    getTotalHeight: PropTypes.func.isRequired,
-  }).isRequired,
-  rootLayout: PropTypes.shape({
-    addChild: PropTypes.func.isRequired,
-    getSubRecord: PropTypes.func.isRequired,
-  }).isRequired,
-  region: CommonPropTypes.Region.isRequired,
-  bpPerPx: PropTypes.number.isRequired,
-  reversed: PropTypes.bool,
-  selected: PropTypes.bool,
-  config: CommonPropTypes.ConfigSchema.isRequired,
-  name: PropTypes.string,
-  shouldShowName: PropTypes.bool,
-  description: PropTypes.string,
-  shouldShowDescription: PropTypes.bool,
-  fontHeight: PropTypes.number,
-  allowedWidthExpansion: PropTypes.number,
-  movedDuringLastMouseDown: PropTypes.bool.isRequired,
-}
-
-FeatureGlyph.defaultProps = {
-  reversed: false,
-  selected: false,
-  name: '',
-  shouldShowName: false,
-  description: '',
-  shouldShowDescription: false,
-  fontHeight: undefined,
-  allowedWidthExpansion: undefined,
-}
-
-export default observer(FeatureGlyph)
diff --git a/plugins/svg/src/SvgFeatureRenderer/components/FeatureGlyph.tsx b/plugins/svg/src/SvgFeatureRenderer/components/FeatureGlyph.tsx
new file mode 100644
index 0000000000..45b956782a
--- /dev/null
+++ b/plugins/svg/src/SvgFeatureRenderer/components/FeatureGlyph.tsx
@@ -0,0 +1,83 @@
+import React from 'react'
+import {
+  AnyConfigurationModel,
+  readConfObject,
+} from '@jbrowse/core/configuration'
+import { observer } from 'mobx-react'
+import FeatureLabel from './FeatureLabel'
+import { Feature } from '@jbrowse/core/util/simpleFeature'
+import { SceneGraph } from '@jbrowse/core/util/layouts'
+
+function FeatureGlyph(props: {
+  feature: Feature
+  rootLayout: SceneGraph
+  config: AnyConfigurationModel
+  name: string
+  description: string
+  shouldShowName: boolean
+  shouldShowDescription: boolean
+  fontHeight: number
+  allowedWidthExpansion: number
+  selected?: boolean
+  reversed?: boolean
+  topLevel?: boolean
+}) {
+  const {
+    feature,
+    rootLayout,
+    selected,
+    config,
+    name,
+    description,
+    shouldShowName,
+    shouldShowDescription,
+    fontHeight,
+    allowedWidthExpansion,
+    reversed,
+  } = props
+
+  const featureLayout = rootLayout.getSubRecord(String(feature.id()))
+  if (!featureLayout) {
+    return null
+  }
+  const { GlyphComponent } = featureLayout.data || {}
+
+  return (
+    <g>
+      <GlyphComponent
+        key={`glyph-${feature.id()}`}
+        featureLayout={featureLayout}
+        selected={selected}
+        {...props}
+      />
+      {shouldShowName ? (
+        <FeatureLabel
+          text={name}
+          x={rootLayout.getSubRecord('nameLabel')?.absolute.left || 0}
+          y={rootLayout.getSubRecord('nameLabel')?.absolute.top || 0}
+          color={readConfObject(config, ['labels', 'nameColor'], { feature })}
+          fontHeight={fontHeight}
+          reversed={reversed}
+          featureWidth={featureLayout.width}
+          allowedWidthExpansion={allowedWidthExpansion}
+        />
+      ) : null}
+      {shouldShowDescription ? (
+        <FeatureLabel
+          text={description}
+          x={rootLayout.getSubRecord('descriptionLabel')?.absolute.left || 0}
+          y={rootLayout.getSubRecord('descriptionLabel')?.absolute.top || 0}
+          color={readConfObject(config, ['labels', 'descriptionColor'], {
+            feature,
+          })}
+          fontHeight={fontHeight}
+          featureWidth={featureLayout.width}
+          reversed={reversed}
+          allowedWidthExpansion={allowedWidthExpansion}
+        />
+      ) : null}
+    </g>
+  )
+}
+
+export default observer(FeatureGlyph)
diff --git a/plugins/svg/src/SvgFeatureRenderer/components/ProcessedTranscript.js b/plugins/svg/src/SvgFeatureRenderer/components/ProcessedTranscript.tsx
similarity index 75%
rename from plugins/svg/src/SvgFeatureRenderer/components/ProcessedTranscript.js
rename to plugins/svg/src/SvgFeatureRenderer/components/ProcessedTranscript.tsx
index dbd42a3831..5682b25757 100644
--- a/plugins/svg/src/SvgFeatureRenderer/components/ProcessedTranscript.js
+++ b/plugins/svg/src/SvgFeatureRenderer/components/ProcessedTranscript.tsx
@@ -1,12 +1,23 @@
-import { observer } from 'mobx-react'
 import React from 'react'
-import SimpleFeature from '@jbrowse/core/util/simpleFeature'
-import { readConfObject } from '@jbrowse/core/configuration'
-import Segments from './Segments'
-import { layOutFeature, layOutSubfeatures } from './util'
+import { observer } from 'mobx-react'
+import SimpleFeature, { Feature } from '@jbrowse/core/util/simpleFeature'
+import {
+  AnyConfigurationModel,
+  readConfObject,
+} from '@jbrowse/core/configuration'
 
-function ProcessedTranscript(props) {
-  // eslint-disable-next-line react/prop-types
+import Segments from './Segments'
+import { ExtraGlyphValidator, layOutFeature, layOutSubfeatures } from './util'
+import { SceneGraph } from '@jbrowse/core/util/layouts'
+
+function ProcessedTranscript(props: {
+  feature: Feature
+  config: AnyConfigurationModel
+  featureLayout: SceneGraph
+  selected?: boolean
+  reversed?: boolean
+  [key: string]: unknown
+}) {
   const { feature, config } = props
   const subfeatures = getSubparts(feature, config)
 
@@ -14,39 +25,36 @@ function ProcessedTranscript(props) {
   return <Segments {...props} subfeatures={subfeatures} />
 }
 
-// make a function that will filter features features according to the
+// returns a callback that will filter features features according to the
 // subParts conf var
-function makeSubpartsFilter(confKey = 'subParts', config) {
-  let filter = readConfObject(config, confKey)
+function makeSubpartsFilter(
+  confKey = 'subParts',
+  config: AnyConfigurationModel,
+) {
+  let filter = readConfObject(config, confKey) as string[] | string
 
   if (typeof filter == 'string') {
     // convert to array
     filter = filter.split(/\s*,\s*/)
   }
 
-  if (Array.isArray(filter)) {
-    const typeNames = filter.map(typeName => typeName.toLowerCase())
-    return feature => {
-      return typeNames.includes(feature.get('type').toLowerCase())
-    }
-  }
-  if (typeof filter === 'function') {
-    return filter
-  }
-  return () => true
+  return (feature: Feature) =>
+    (filter as string[])
+      .map(typeName => typeName.toLowerCase())
+      .includes(feature.get('type').toLowerCase())
 }
 
-function filterSubpart(feature, config) {
+function filterSubpart(feature: Feature, config: AnyConfigurationModel) {
   return makeSubpartsFilter('subParts', config)(feature)
 }
 
-function isUTR(feature) {
+function isUTR(feature: Feature) {
   return /(\bUTR|_UTR|untranslated[_\s]region)\b/.test(
     feature.get('type') || '',
   )
 }
 
-function makeUTRs(parent, subs) {
+function makeUTRs(parent: Feature, subs: Feature[]) {
   // based on Lincoln's UTR-making code in Bio::Graphics::Glyph::processed_transcript
   const subparts = [...subs]
 
@@ -129,7 +137,7 @@ function makeUTRs(parent, subs) {
   return subparts
 }
 
-function getSubparts(f, config) {
+function getSubparts(f: Feature, config: AnyConfigurationModel) {
   let c = f.get('subfeatures')
   if (!c || !c.length) {
     return []
@@ -154,6 +162,13 @@ ProcessedTranscript.layOut = ({
   reversed,
   config,
   extraGlyphs,
+}: {
+  layout: SceneGraph
+  feature: Feature
+  bpPerPx: number
+  reversed: boolean
+  config: AnyConfigurationModel
+  extraGlyphs: ExtraGlyphValidator[]
 }) => {
   const subLayout = layOutFeature({
     layout,
diff --git a/plugins/svg/src/SvgFeatureRenderer/components/Segments.js b/plugins/svg/src/SvgFeatureRenderer/components/Segments.js
deleted file mode 100644
index 548841d126..0000000000
--- a/plugins/svg/src/SvgFeatureRenderer/components/Segments.js
+++ /dev/null
@@ -1,101 +0,0 @@
-import { readConfObject } from '@jbrowse/core/configuration'
-import { PropTypes as CommonPropTypes } from '@jbrowse/core/util/types/mst'
-import { emphasize } from '@jbrowse/core/util/color'
-import { observer } from 'mobx-react'
-import PropTypes from 'prop-types'
-import React from 'react'
-
-function Segments(props) {
-  const {
-    feature,
-    featureLayout,
-    selected,
-    config,
-    reversed,
-    // some subfeatures may be computed e.g. makeUTRs,
-    // so these are passed as a prop
-    // eslint-disable-next-line react/prop-types
-    subfeatures: subfeaturesProp,
-  } = props
-
-  const subfeatures = subfeaturesProp || feature.get('subfeatures')
-  const color2 = readConfObject(config, 'color2', { feature })
-  let emphasizedColor2
-  try {
-    emphasizedColor2 = emphasize(color2, 0.3)
-  } catch (error) {
-    emphasizedColor2 = color2
-  }
-  const { left, top, width, height } = featureLayout.absolute
-  const points = [
-    [left, top + height / 2],
-    [left + width, top + height / 2],
-  ]
-  const strand = feature.get('strand')
-  if (strand) {
-    points.push(
-      [left + width - height / 4, top + height / 4],
-      [left + width - height / 4, top + 3 * (height / 4)],
-      [left + width, top + height / 2],
-    )
-  }
-
-  return (
-    <>
-      <polyline
-        data-testid={feature.id()}
-        transform={
-          strand && ((!reversed && strand < 0) || (reversed && strand > 0))
-            ? `rotate(180,${left + width / 2},${top + height / 2})`
-            : undefined
-        }
-        points={points}
-        stroke={selected ? emphasizedColor2 : color2}
-      />
-      {subfeatures.map(subfeature => {
-        const subfeatureId = String(subfeature.id())
-        const subfeatureLayout = featureLayout.getSubRecord(subfeatureId)
-        // This subfeature got filtered out
-        if (!subfeatureLayout) {
-          return null
-        }
-        const { GlyphComponent } = subfeatureLayout.data
-        return (
-          <GlyphComponent
-            key={`glyph-${subfeatureId}`}
-            {...props}
-            feature={subfeature}
-            featureLayout={subfeatureLayout}
-            selected={selected}
-          />
-        )
-      })}
-    </>
-  )
-}
-
-Segments.propTypes = {
-  feature: PropTypes.shape({
-    id: PropTypes.func.isRequired,
-    get: PropTypes.func.isRequired,
-  }).isRequired,
-  featureLayout: PropTypes.shape({
-    absolute: PropTypes.shape({
-      top: PropTypes.number.isRequired,
-      left: PropTypes.number.isRequired,
-      width: PropTypes.number.isRequired,
-      height: PropTypes.number.isRequired,
-    }),
-    getSubRecord: PropTypes.func.isRequired,
-  }).isRequired,
-  selected: PropTypes.bool,
-  config: CommonPropTypes.ConfigSchema.isRequired,
-  reversed: PropTypes.bool,
-}
-
-Segments.defaultProps = {
-  selected: false,
-  reversed: false,
-}
-
-export default observer(Segments)
diff --git a/plugins/svg/src/SvgFeatureRenderer/components/Segments.tsx b/plugins/svg/src/SvgFeatureRenderer/components/Segments.tsx
new file mode 100644
index 0000000000..ac79f69899
--- /dev/null
+++ b/plugins/svg/src/SvgFeatureRenderer/components/Segments.tsx
@@ -0,0 +1,69 @@
+import React from 'react'
+import {
+  AnyConfigurationModel,
+  readConfObject,
+} from '@jbrowse/core/configuration'
+import { observer } from 'mobx-react'
+import { Feature } from '@jbrowse/core/util/simpleFeature'
+import Arrow from './Arrow'
+import { SceneGraph } from '@jbrowse/core/util/layouts'
+
+function Segments(props: {
+  feature: Feature
+  featureLayout: SceneGraph
+  config: AnyConfigurationModel
+  selected?: boolean
+  reversed?: boolean
+  subfeatures?: Feature[]
+  children?: React.ReactNode
+}) {
+  const {
+    feature,
+    featureLayout,
+    selected,
+    config,
+    // some subfeatures may be computed e.g. makeUTRs,
+    // so these are passed as a prop, or feature.get('subfeatures') by default
+    subfeatures = feature.get('subfeatures'),
+  } = props
+
+  const color2 = readConfObject(config, 'color2', { feature })
+
+  const { left = 0, top = 0, width = 0, height = 0 } = featureLayout.absolute
+
+  const y = top + height / 2
+  return (
+    <>
+      <line
+        data-testid={feature.id()}
+        x1={left}
+        y1={y}
+        y2={y}
+        x2={left + width}
+        stroke={color2}
+      />
+      {subfeatures?.map(subfeature => {
+        const subfeatureId = String(subfeature.id())
+        const subfeatureLayout = featureLayout.getSubRecord(subfeatureId)
+        // This subfeature got filtered out
+        if (!subfeatureLayout) {
+          return null
+        }
+        const { GlyphComponent } = subfeatureLayout.data || {}
+        return (
+          <GlyphComponent
+            key={`glyph-${subfeatureId}`}
+            {...props}
+            feature={subfeature}
+            topLevel={false}
+            featureLayout={subfeatureLayout}
+            selected={selected}
+          />
+        )
+      })}
+      <Arrow {...props} />
+    </>
+  )
+}
+
+export default observer(Segments)
diff --git a/plugins/svg/src/SvgFeatureRenderer/components/Subfeatures.js b/plugins/svg/src/SvgFeatureRenderer/components/Subfeatures.tsx
similarity index 66%
rename from plugins/svg/src/SvgFeatureRenderer/components/Subfeatures.js
rename to plugins/svg/src/SvgFeatureRenderer/components/Subfeatures.tsx
index 7da78e1279..ddf75efa3b 100644
--- a/plugins/svg/src/SvgFeatureRenderer/components/Subfeatures.js
+++ b/plugins/svg/src/SvgFeatureRenderer/components/Subfeatures.tsx
@@ -1,18 +1,34 @@
-import { readConfObject } from '@jbrowse/core/configuration'
-import { observer } from 'mobx-react'
-import PropTypes from 'prop-types'
 import React from 'react'
-import { chooseGlyphComponent, layOut, layOutFeature } from './util'
+import {
+  AnyConfigurationModel,
+  readConfObject,
+} from '@jbrowse/core/configuration'
+import { observer } from 'mobx-react'
+import {
+  chooseGlyphComponent,
+  ExtraGlyphValidator,
+  layOut,
+  layOutFeature,
+} from './util'
+import { Feature } from '@jbrowse/core/util/simpleFeature'
+import { SceneGraph } from '@jbrowse/core/util/layouts'
 
-function Subfeatures(props) {
+function Subfeatures(props: {
+  feature: Feature
+  featureLayout: SceneGraph
+  selected?: boolean
+}) {
   const { feature, featureLayout, selected } = props
 
   return (
     <>
-      {feature.get('subfeatures').map(subfeature => {
+      {feature.get('subfeatures')?.map(subfeature => {
         const subfeatureId = String(subfeature.id())
         const subfeatureLayout = featureLayout.getSubRecord(subfeatureId)
-        const { GlyphComponent } = subfeatureLayout.data
+        if (!subfeatureLayout) {
+          return null
+        }
+        const { GlyphComponent } = subfeatureLayout.data || {}
         return (
           <GlyphComponent
             key={`glyph-${subfeatureId}`}
@@ -27,20 +43,6 @@ function Subfeatures(props) {
   )
 }
 
-Subfeatures.propTypes = {
-  feature: PropTypes.shape({ get: PropTypes.func.isRequired }).isRequired,
-  featureLayout: PropTypes.shape({
-    getSubRecord: PropTypes.func.isRequired,
-  }).isRequired,
-  selected: PropTypes.bool,
-  reversed: PropTypes.bool,
-}
-
-Subfeatures.defaultProps = {
-  selected: false,
-  reversed: false,
-}
-
 Subfeatures.layOut = ({
   layout,
   feature,
@@ -48,6 +50,13 @@ Subfeatures.layOut = ({
   reversed,
   config,
   extraGlyphs,
+}: {
+  layout: SceneGraph
+  feature: Feature
+  bpPerPx: number
+  reversed: boolean
+  config: AnyConfigurationModel
+  extraGlyphs: ExtraGlyphValidator[]
 }) => {
   const subLayout = layOutFeature({
     layout,
@@ -59,16 +68,15 @@ Subfeatures.layOut = ({
   })
   const displayMode = readConfObject(config, 'displayMode')
   if (displayMode !== 'reducedRepresentation') {
-    const subfeatures = feature.get('subfeatures') || []
     let topOffset = 0
-    subfeatures.forEach(subfeature => {
+    feature.get('subfeatures')?.forEach(subfeature => {
       const SubfeatureGlyphComponent = chooseGlyphComponent(
         subfeature,
         extraGlyphs,
       )
       const subfeatureHeight = readConfObject(config, 'height', {
         feature: subfeature,
-      })
+      }) as number
 
       const subSubLayout = (SubfeatureGlyphComponent.layOut || layOut)({
         layout: subLayout,
diff --git a/plugins/svg/src/SvgFeatureRenderer/components/SvgFeatureRendering.js b/plugins/svg/src/SvgFeatureRenderer/components/SvgFeatureRendering.js
deleted file mode 100644
index 338c3814ea..0000000000
--- a/plugins/svg/src/SvgFeatureRenderer/components/SvgFeatureRendering.js
+++ /dev/null
@@ -1,456 +0,0 @@
-import { readConfObject } from '@jbrowse/core/configuration'
-import { PropTypes as CommonPropTypes } from '@jbrowse/core/util/types/mst'
-import { bpToPx, measureText } from '@jbrowse/core/util'
-import SceneGraph from '@jbrowse/core/util/layouts/SceneGraph'
-import { observer } from 'mobx-react'
-import ReactPropTypes from 'prop-types'
-import React, { useEffect, useRef, useState, useCallback } from 'react'
-import FeatureGlyph from './FeatureGlyph'
-import SvgOverlay from './SvgOverlay'
-import { chooseGlyphComponent, layOut } from './util'
-
-const renderingStyle = {
-  position: 'relative',
-}
-
-// used to make features have a little padding for their labels
-const nameWidthPadding = 2
-const textVerticalPadding = 2
-
-// used so that user can click-away-from-feature below the laid out features
-// (issue #1248)
-const svgHeightPadding = 100
-
-function RenderedFeatureGlyph(props) {
-  const { feature, bpPerPx, region, config, displayMode, layout, extraGlyphs } =
-    props
-  const { reversed } = region
-  const start = feature.get(reversed ? 'end' : 'start')
-  const startPx = bpToPx(start, region, bpPerPx)
-  const labelsAllowed = displayMode !== 'compact' && displayMode !== 'collapsed'
-
-  const rootLayout = new SceneGraph('root', 0, 0, 0, 0)
-  const GlyphComponent = chooseGlyphComponent(feature, extraGlyphs)
-  const featureLayout = (GlyphComponent.layOut || layOut)({
-    layout: rootLayout,
-    feature,
-    bpPerPx,
-    reversed,
-    config,
-    extraGlyphs,
-  })
-  let shouldShowName
-  let shouldShowDescription
-  let name
-  let description
-  let fontHeight
-  let expansion
-  if (labelsAllowed) {
-    const showLabels = readConfObject(config, 'showLabels')
-    const showDescriptions = readConfObject(config, 'showDescriptions')
-    fontHeight = readConfObject(config, ['labels', 'fontSize'], { feature })
-    expansion = readConfObject(config, 'maxFeatureGlyphExpansion') || 0
-    name = readConfObject(config, ['labels', 'name'], { feature }) || ''
-    shouldShowName = /\S/.test(name) && showLabels
-
-    description =
-      readConfObject(config, ['labels', 'description'], { feature }) || ''
-    shouldShowDescription =
-      /\S/.test(description) && showLabels && showDescriptions
-
-    let nameWidth = 0
-    if (shouldShowName) {
-      nameWidth =
-        Math.round(
-          Math.min(measureText(name, fontHeight), rootLayout.width + expansion),
-        ) + nameWidthPadding
-      rootLayout.addChild(
-        'nameLabel',
-        0,
-        featureLayout.bottom + textVerticalPadding,
-        nameWidth,
-        fontHeight,
-      )
-    }
-
-    let descriptionWidth = 0
-    if (shouldShowDescription) {
-      const aboveLayout = shouldShowName
-        ? rootLayout.getSubRecord('nameLabel')
-        : featureLayout
-      descriptionWidth =
-        Math.round(
-          Math.min(
-            measureText(description, fontHeight),
-            rootLayout.width + expansion,
-          ),
-        ) + nameWidthPadding
-      rootLayout.addChild(
-        'descriptionLabel',
-        0,
-        aboveLayout.bottom + textVerticalPadding,
-        descriptionWidth,
-        fontHeight,
-      )
-    }
-  }
-
-  const topPx = layout.addRect(
-    feature.id(),
-    feature.get('start'),
-    feature.get('start') + rootLayout.width * bpPerPx,
-    rootLayout.height,
-  )
-  if (topPx === null) {
-    return null
-  }
-  rootLayout.move(startPx, topPx)
-
-  return (
-    <FeatureGlyph
-      key={`svg-feature-${feature.id()}`}
-      feature={feature}
-      layout={layout}
-      rootLayout={rootLayout}
-      bpPerPx={bpPerPx}
-      config={config}
-      name={String(name)}
-      shouldShowName={shouldShowName}
-      description={String(description)}
-      shouldShowDescription={shouldShowDescription}
-      fontHeight={fontHeight}
-      allowedWidthExpansion={expansion}
-      reversed={region.reversed}
-      {...props}
-    />
-  )
-}
-
-RenderedFeatureGlyph.propTypes = {
-  layout: ReactPropTypes.shape({
-    addRect: ReactPropTypes.func.isRequired,
-    getTotalHeight: ReactPropTypes.func.isRequired,
-  }).isRequired,
-
-  displayMode: ReactPropTypes.string.isRequired,
-  region: CommonPropTypes.Region.isRequired,
-  bpPerPx: ReactPropTypes.number.isRequired,
-  feature: ReactPropTypes.shape({
-    id: ReactPropTypes.func.isRequired,
-    get: ReactPropTypes.func.isRequired,
-  }).isRequired,
-  config: CommonPropTypes.ConfigSchema.isRequired,
-  extraGlyphs: ReactPropTypes.arrayOf(
-    ReactPropTypes.shape({
-      glyph: ReactPropTypes.elementType.isRequired,
-      validator: ReactPropTypes.func.isRequired,
-    }),
-  ),
-}
-
-const RenderedFeatures = observer(props => {
-  const { features, isFeatureDisplayed } = props
-  const featuresRendered = []
-  for (const feature of features.values()) {
-    if (isFeatureDisplayed(feature)) {
-      featuresRendered.push(
-        <RenderedFeatureGlyph
-          key={feature.id()}
-          feature={feature}
-          {...props}
-        />,
-      )
-    }
-  }
-  return <>{featuresRendered}</>
-})
-RenderedFeatures.propTypes = {
-  features: ReactPropTypes.oneOfType([
-    ReactPropTypes.instanceOf(Map),
-    ReactPropTypes.arrayOf(ReactPropTypes.shape()),
-  ]),
-  layout: ReactPropTypes.shape({
-    addRect: ReactPropTypes.func.isRequired,
-    getTotalHeight: ReactPropTypes.func.isRequired,
-  }).isRequired,
-  extraGlyphs: ReactPropTypes.arrayOf(
-    ReactPropTypes.shape({
-      glyph: ReactPropTypes.elementType.isRequired,
-      validator: ReactPropTypes.func.isRequired,
-    }),
-  ),
-  isFeatureDisplayed: ReactPropTypes.func,
-}
-
-RenderedFeatures.defaultProps = {
-  features: [],
-  extraGlyphs: [],
-  isFeatureDisplayed: () => true,
-}
-
-function SvgFeatureRendering(props) {
-  const {
-    layout,
-    blockKey,
-    regions,
-    bpPerPx,
-    features,
-    config,
-    displayModel,
-    exportSVG,
-    featureDisplayHandler,
-  } = props
-  const [region] = regions || []
-  const width = (region.end - region.start) / bpPerPx
-  const displayMode = readConfObject(config, 'displayMode')
-
-  const ref = useRef()
-  const [mouseIsDown, setMouseIsDown] = useState(false)
-  const [movedDuringLastMouseDown, setMovedDuringLastMouseDown] =
-    useState(false)
-  const [height, setHeight] = useState(0)
-  const {
-    onMouseOut,
-    onMouseDown,
-    onMouseLeave,
-    onMouseEnter,
-    onMouseOver,
-    onMouseMove,
-    onMouseUp,
-    onClick,
-  } = props
-
-  const mouseDown = useCallback(
-    event => {
-      setMouseIsDown(true)
-      setMovedDuringLastMouseDown(false)
-      const handler = onMouseDown
-      if (!handler) {
-        return undefined
-      }
-      return handler(event)
-    },
-    [onMouseDown],
-  )
-
-  const mouseUp = useCallback(
-    event => {
-      setMouseIsDown(false)
-      const handler = onMouseUp
-      if (!handler) {
-        return undefined
-      }
-      return handler(event)
-    },
-    [onMouseUp],
-  )
-
-  const mouseEnter = useCallback(
-    event => {
-      const handler = onMouseEnter
-      if (!handler) {
-        return undefined
-      }
-      return handler(event)
-    },
-    [onMouseEnter],
-  )
-
-  const mouseLeave = useCallback(
-    event => {
-      const handler = onMouseLeave
-      if (!handler) {
-        return undefined
-      }
-      return handler(event)
-    },
-    [onMouseLeave],
-  )
-
-  const mouseOver = useCallback(
-    event => {
-      const handler = onMouseOver
-      if (!handler) {
-        return undefined
-      }
-      return handler(event)
-    },
-    [onMouseOver],
-  )
-
-  const mouseOut = useCallback(
-    event => {
-      const handler = onMouseOut
-      if (!handler) {
-        return undefined
-      }
-      return handler(event)
-    },
-    [onMouseOut],
-  )
-
-  const mouseMove = useCallback(
-    event => {
-      if (mouseIsDown) {
-        setMovedDuringLastMouseDown(true)
-      }
-      let offsetX = 0
-      let offsetY = 0
-      if (ref.current) {
-        offsetX = ref.current.getBoundingClientRect().left
-        offsetY = ref.current.getBoundingClientRect().top
-      }
-      offsetX = event.clientX - offsetX
-      offsetY = event.clientY - offsetY
-      const px = region.reversed ? width - offsetX : offsetX
-      const clientBp = region.start + bpPerPx * px
-
-      const featureIdCurrentlyUnderMouse = displayModel.getFeatureOverlapping(
-        blockKey,
-        clientBp,
-        offsetY,
-      )
-
-      if (onMouseMove) {
-        onMouseMove(event, featureIdCurrentlyUnderMouse)
-      }
-    },
-    [
-      blockKey,
-      bpPerPx,
-      mouseIsDown,
-      onMouseMove,
-      region.reversed,
-      region.start,
-      displayModel,
-      width,
-    ],
-  )
-
-  const click = useCallback(
-    event => {
-      // don't select a feature if we are clicking and dragging
-      if (movedDuringLastMouseDown) {
-        return
-      }
-      if (onClick) {
-        onClick(event)
-      }
-    },
-    [movedDuringLastMouseDown, onClick],
-  )
-
-  useEffect(() => {
-    setHeight(layout.getTotalHeight())
-  }, [layout])
-
-  if (exportSVG) {
-    return (
-      <RenderedFeatures
-        features={features}
-        displayMode={displayMode}
-        isFeatureDisplayed={featureDisplayHandler}
-        {...props}
-        region={region}
-      />
-    )
-  }
-  return (
-    <div style={renderingStyle}>
-      <svg
-        ref={ref}
-        className="SvgFeatureRendering"
-        data-testid="svgfeatures"
-        width={width}
-        height={height + svgHeightPadding}
-        onMouseDown={mouseDown}
-        onMouseUp={mouseUp}
-        onMouseEnter={mouseEnter}
-        onMouseLeave={mouseLeave}
-        onMouseOver={mouseOver}
-        onMouseOut={mouseOut}
-        onMouseMove={mouseMove}
-        onFocus={mouseEnter}
-        onBlur={mouseLeave}
-        onClick={click}
-        style={{ display: 'block' }}
-      >
-        <RenderedFeatures
-          features={features}
-          displayMode={displayMode}
-          {...props}
-          region={region}
-          movedDuringLastMouseDown={movedDuringLastMouseDown}
-          isFeatureDisplayed={featureDisplayHandler}
-        />
-        <SvgOverlay {...props} region={region} />
-      </svg>
-    </div>
-  )
-}
-
-SvgFeatureRendering.propTypes = {
-  layout: ReactPropTypes.shape({
-    addRect: ReactPropTypes.func.isRequired,
-    getTotalHeight: ReactPropTypes.func.isRequired,
-  }).isRequired,
-
-  regions: ReactPropTypes.arrayOf(CommonPropTypes.Region).isRequired,
-  bpPerPx: ReactPropTypes.number.isRequired,
-  features: ReactPropTypes.oneOfType([
-    ReactPropTypes.instanceOf(Map),
-    ReactPropTypes.arrayOf(ReactPropTypes.shape()),
-  ]),
-  config: CommonPropTypes.ConfigSchema.isRequired,
-  displayModel: ReactPropTypes.shape({
-    configuration: ReactPropTypes.shape({}),
-    getFeatureOverlapping: ReactPropTypes.func,
-    selectedFeatureId: ReactPropTypes.string,
-    featureIdUnderMouse: ReactPropTypes.string,
-  }),
-
-  onMouseDown: ReactPropTypes.func,
-  onMouseUp: ReactPropTypes.func,
-  onMouseEnter: ReactPropTypes.func,
-  onMouseLeave: ReactPropTypes.func,
-  onMouseOver: ReactPropTypes.func,
-  onMouseOut: ReactPropTypes.func,
-  onMouseMove: ReactPropTypes.func,
-  onClick: ReactPropTypes.func,
-  onContextMenu: ReactPropTypes.func,
-  onFeatureClick: ReactPropTypes.func,
-  onFeatureContextMenu: ReactPropTypes.func,
-  blockKey: ReactPropTypes.string,
-  exportSVG: ReactPropTypes.shape({}),
-  extraGlyphs: ReactPropTypes.arrayOf(
-    ReactPropTypes.shape({
-      glyph: ReactPropTypes.elementType.isRequired,
-      validator: ReactPropTypes.func.isRequired,
-    }),
-  ),
-  featureDisplayHandler: ReactPropTypes.func,
-}
-
-SvgFeatureRendering.defaultProps = {
-  displayModel: {},
-  exportSVG: undefined,
-
-  features: new Map(),
-  blockKey: undefined,
-
-  onMouseDown: undefined,
-  onMouseUp: undefined,
-  onMouseEnter: undefined,
-  onMouseLeave: undefined,
-  onMouseOver: undefined,
-  onMouseOut: undefined,
-  onMouseMove: undefined,
-  onClick: undefined,
-  onContextMenu: undefined,
-  onFeatureClick: undefined,
-  onFeatureContextMenu: undefined,
-  extraGlyphs: [],
-  featureDisplayHandler: () => true,
-}
-
-export default observer(SvgFeatureRendering)
diff --git a/plugins/svg/src/SvgFeatureRenderer/components/SvgFeatureRendering.tsx b/plugins/svg/src/SvgFeatureRenderer/components/SvgFeatureRendering.tsx
new file mode 100644
index 0000000000..e5ea87d51f
--- /dev/null
+++ b/plugins/svg/src/SvgFeatureRenderer/components/SvgFeatureRendering.tsx
@@ -0,0 +1,332 @@
+import React, { useEffect, useRef, useState, useCallback } from 'react'
+import {
+  AnyConfigurationModel,
+  readConfObject,
+} from '@jbrowse/core/configuration'
+import { bpToPx, measureText } from '@jbrowse/core/util'
+import { Region } from '@jbrowse/core/util/types'
+import SceneGraph from '@jbrowse/core/util/layouts/SceneGraph'
+import { observer } from 'mobx-react'
+
+import FeatureGlyph from './FeatureGlyph'
+import SvgOverlay from './SvgOverlay'
+import { chooseGlyphComponent, layOut } from './util'
+import { Feature } from '@jbrowse/core/util/simpleFeature'
+import { BaseLayout } from '@jbrowse/core/util/layouts'
+import { ExtraGlyphValidator } from './util'
+
+// used to make features have a little padding for their labels
+const namePadding = 2
+const textPadding = 2
+
+// used so that user can click-away-from-feature below the laid out features
+// (issue #1248)
+const svgHeightPadding = 100
+
+function RenderedFeatureGlyph(props: {
+  feature: Feature
+  bpPerPx: number
+  region: Region
+  config: AnyConfigurationModel
+  displayMode: string
+  layout: BaseLayout<unknown>
+  extraGlyphs: ExtraGlyphValidator[]
+  [key: string]: unknown
+}) {
+  const { feature, bpPerPx, region, config, displayMode, layout, extraGlyphs } =
+    props
+  const { reversed } = region
+  const start = feature.get(reversed ? 'end' : 'start')
+  const startPx = bpToPx(start, region, bpPerPx)
+  const labelsAllowed = displayMode !== 'compact' && displayMode !== 'collapsed'
+
+  const rootLayout = new SceneGraph('root', 0, 0, 0, 0)
+  const GlyphComponent = chooseGlyphComponent(feature, extraGlyphs)
+  const featureLayout = (GlyphComponent.layOut || layOut)({
+    layout: rootLayout,
+    feature,
+    bpPerPx,
+    reversed,
+    config,
+    extraGlyphs,
+  })
+  let shouldShowName = false
+  let shouldShowDescription = false
+  let name = ''
+  let description = ''
+  let fontHeight = 0
+  let expansion = 0
+  if (labelsAllowed) {
+    const showLabels = readConfObject(config, 'showLabels')
+    const showDescriptions = readConfObject(config, 'showDescriptions')
+    fontHeight = readConfObject(config, ['labels', 'fontSize'], { feature })
+    expansion = readConfObject(config, 'maxFeatureGlyphExpansion') || 0
+    name = String(readConfObject(config, ['labels', 'name'], { feature }) || '')
+    shouldShowName = /\S/.test(name) && showLabels
+
+    const getWidth = (text: string) => {
+      const glyphWidth = rootLayout.width + expansion
+      const textWidth = measureText(text, fontHeight)
+      return Math.round(Math.min(textWidth, glyphWidth)) + namePadding
+    }
+
+    description = String(
+      readConfObject(config, ['labels', 'description'], { feature }) || '',
+    )
+    shouldShowDescription =
+      /\S/.test(description) && showLabels && showDescriptions
+
+    if (shouldShowName) {
+      rootLayout.addChild(
+        'nameLabel',
+        0,
+        featureLayout.bottom + textPadding,
+        getWidth(name),
+        fontHeight,
+      )
+    }
+
+    if (shouldShowDescription) {
+      const aboveLayout = shouldShowName
+        ? rootLayout.getSubRecord('nameLabel')
+        : featureLayout
+
+      rootLayout.addChild(
+        'descriptionLabel',
+        0,
+        aboveLayout.bottom + textPadding,
+        getWidth(description),
+        fontHeight,
+      )
+    }
+  }
+
+  const topPx = layout.addRect(
+    feature.id(),
+    feature.get('start'),
+    feature.get('start') + rootLayout.width * bpPerPx,
+    rootLayout.height,
+  )
+  if (topPx === null) {
+    return null
+  }
+  rootLayout.move(startPx, topPx)
+
+  return (
+    <FeatureGlyph
+      rootLayout={rootLayout}
+      name={name}
+      shouldShowName={shouldShowName}
+      description={description}
+      shouldShowDescription={shouldShowDescription}
+      fontHeight={fontHeight}
+      allowedWidthExpansion={expansion}
+      reversed={region.reversed}
+      topLevel={true}
+      {...props}
+    />
+  )
+}
+
+const RenderedFeatures = observer(
+  (props: {
+    features: Map<string, Feature>
+    isFeatureDisplayed: (f: Feature) => boolean
+    bpPerPx: number
+    config: AnyConfigurationModel
+    displayMode: string
+    region: Region
+    extraGlyphs: ExtraGlyphValidator[]
+    layout: BaseLayout<unknown>
+    [key: string]: unknown
+  }) => {
+    const { features = new Map(), isFeatureDisplayed } = props
+
+    return (
+      <>
+        {[...features.values()]
+          .filter(feature => isFeatureDisplayed(feature))
+          .map(feature => (
+            <RenderedFeatureGlyph
+              key={feature.id()}
+              feature={feature}
+              {...props}
+            />
+          ))}
+      </>
+    )
+  },
+)
+
+type LayoutRecord = [number, number, number, number]
+
+function SvgFeatureRendering(props: {
+  layout: BaseLayout<unknown>
+  blockKey: string
+  regions: Region[]
+  bpPerPx: number
+  config: AnyConfigurationModel
+  features: Map<string, Feature>
+  displayModel: {
+    getFeatureByID?: (arg0: string, arg1: string) => LayoutRecord
+    getFeatureOverlapping?: (
+      blockKey: string,
+      bp: number,
+      y: number,
+    ) => string | undefined
+    selectedFeatureId?: string
+    featureIdUnderMouse?: string
+    contextMenuFeature?: Feature
+  }
+  exportSVG: boolean
+  featureDisplayHandler: (f: Feature) => boolean
+  extraGlyphs: ExtraGlyphValidator[]
+  onMouseOut?: React.MouseEventHandler
+  onMouseDown?: React.MouseEventHandler
+  onMouseLeave?: React.MouseEventHandler
+  onMouseEnter?: React.MouseEventHandler
+  onMouseOver?: React.MouseEventHandler
+  onMouseMove?: (event: React.MouseEvent, featureId?: string) => void
+  onMouseUp?: React.MouseEventHandler
+  onClick?: React.MouseEventHandler
+}) {
+  const {
+    layout,
+    blockKey,
+    regions,
+    bpPerPx,
+    config,
+    displayModel = {},
+    exportSVG,
+    featureDisplayHandler = () => true,
+    onMouseOut,
+    onMouseDown,
+    onMouseLeave,
+    onMouseEnter,
+    onMouseOver,
+    onMouseMove,
+    onMouseUp,
+    onClick,
+  } = props
+  const [region] = regions || []
+  const width = (region.end - region.start) / bpPerPx
+  const displayMode = readConfObject(config, 'displayMode') as string
+
+  const ref = useRef<SVGSVGElement>(null)
+  const [mouseIsDown, setMouseIsDown] = useState(false)
+  const [height, setHeight] = useState(0)
+  const [movedDuringLastMouseDown, setMovedDuringLastMouseDown] =
+    useState(false)
+  const mouseDown = useCallback(
+    event => {
+      setMouseIsDown(true)
+      setMovedDuringLastMouseDown(false)
+      return onMouseDown?.(event)
+    },
+    [onMouseDown],
+  )
+
+  const mouseUp = useCallback(
+    event => {
+      setMouseIsDown(false)
+      return onMouseUp?.(event)
+    },
+    [onMouseUp],
+  )
+
+  const mouseMove = useCallback(
+    event => {
+      if (!ref.current) {
+        return
+      }
+      if (mouseIsDown) {
+        setMovedDuringLastMouseDown(true)
+      }
+      const { left, top } = ref.current.getBoundingClientRect()
+      const offsetX = event.clientX - left
+      const offsetY = event.clientY - top
+      const px = region.reversed ? width - offsetX : offsetX
+      const clientBp = region.start + bpPerPx * px
+
+      const featureIdCurrentlyUnderMouse = displayModel.getFeatureOverlapping?.(
+        blockKey,
+        clientBp,
+        offsetY,
+      )
+
+      if (onMouseMove) {
+        onMouseMove(event, featureIdCurrentlyUnderMouse)
+      }
+    },
+    [
+      blockKey,
+      bpPerPx,
+      mouseIsDown,
+      onMouseMove,
+      region.reversed,
+      region.start,
+      displayModel,
+      width,
+    ],
+  )
+
+  const click = useCallback(
+    event => {
+      // don't select a feature if we are clicking and dragging
+      if (movedDuringLastMouseDown) {
+        return
+      }
+      if (onClick) {
+        onClick(event)
+      }
+    },
+    [movedDuringLastMouseDown, onClick],
+  )
+
+  useEffect(() => {
+    setHeight(layout.getTotalHeight())
+  }, [layout])
+
+  if (exportSVG) {
+    return (
+      <RenderedFeatures
+        displayMode={displayMode}
+        isFeatureDisplayed={featureDisplayHandler}
+        region={region}
+        {...props}
+      />
+    )
+  }
+  return (
+    <svg
+      ref={ref}
+      className="SvgFeatureRendering"
+      data-testid="svgfeatures"
+      width={width}
+      height={height + svgHeightPadding}
+      onMouseDown={mouseDown}
+      onMouseUp={mouseUp}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      onMouseOver={onMouseOver}
+      onMouseOut={onMouseOut}
+      onMouseMove={mouseMove}
+      onClick={click}
+    >
+      <RenderedFeatures
+        displayMode={displayMode}
+        region={region}
+        movedDuringLastMouseDown={movedDuringLastMouseDown}
+        isFeatureDisplayed={featureDisplayHandler}
+        {...props}
+      />
+      <SvgOverlay
+        {...props}
+        region={region}
+        movedDuringLastMouseDown={movedDuringLastMouseDown}
+      />
+    </svg>
+  )
+}
+
+export default observer(SvgFeatureRendering)
diff --git a/plugins/svg/src/SvgFeatureRenderer/components/SvgOverlay.tsx b/plugins/svg/src/SvgFeatureRenderer/components/SvgOverlay.tsx
index 469d2f7ecf..358e4ce472 100644
--- a/plugins/svg/src/SvgFeatureRenderer/components/SvgOverlay.tsx
+++ b/plugins/svg/src/SvgFeatureRenderer/components/SvgOverlay.tsx
@@ -1,17 +1,17 @@
+import React from 'react'
 import { bpSpanPx } from '@jbrowse/core/util'
-import SimpleFeature from '@jbrowse/core/util/simpleFeature'
+import { Feature } from '@jbrowse/core/util/simpleFeature'
 import { Region } from '@jbrowse/core/util/types'
 import { observer } from 'mobx-react'
-import React from 'react'
 
 type LayoutRecord = [number, number, number, number]
 interface SvgOverlayProps {
   region: Region
   displayModel: {
-    getFeatureByID: (arg0: string, arg1: string) => LayoutRecord
+    getFeatureByID?: (arg0: string, arg1: string) => LayoutRecord
     selectedFeatureId?: string
     featureIdUnderMouse?: string
-    contextMenuFeature?: SimpleFeature
+    contextMenuFeature?: Feature
   }
   bpPerPx: number
   blockKey: string
@@ -100,7 +100,7 @@ function OverlayRect({
 }
 
 function SvgOverlay({
-  displayModel,
+  displayModel = {},
   blockKey,
   region,
   bpPerPx,
diff --git a/plugins/svg/src/SvgFeatureRenderer/components/__snapshots__/SvgFeatureRendering.test.js.snap b/plugins/svg/src/SvgFeatureRenderer/components/__snapshots__/SvgFeatureRendering.test.js.snap
index 0f5b823809..c020d977d5 100644
--- a/plugins/svg/src/SvgFeatureRenderer/components/__snapshots__/SvgFeatureRendering.test.js.snap
+++ b/plugins/svg/src/SvgFeatureRenderer/components/__snapshots__/SvgFeatureRendering.test.js.snap
@@ -1,571 +1,564 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`no features 1`] = `
-<div
-  style="position: relative;"
->
-  <svg
-    class="SvgFeatureRendering"
-    data-testid="svgfeatures"
-    height="120"
-    style="display: block;"
-    width="100"
-  />
-</div>
+<svg
+  class="SvgFeatureRendering"
+  data-testid="svgfeatures"
+  height="120"
+  width="100"
+/>
 `;
 
 exports[`one feature (compact mode) 1`] = `
-<div
-  style="position: relative;"
+<svg
+  class="SvgFeatureRendering"
+  data-testid="svgfeatures"
+  height="105"
+  width="333.3333333333333"
 >
-  <svg
-    class="SvgFeatureRendering"
-    data-testid="svgfeatures"
-    height="105"
-    style="display: block;"
-    width="333.3333333333333"
-  >
-    <g>
-      <polyline
-        data-testid="one"
-        points="1991.7,2.5,3248.0333333333333,2.5,3246.7833333333333,1.25,3246.7833333333333,3.75,3248.0333333333333,2.5"
-        stroke="black"
-      />
-      <rect
-        data-testid="one-0"
-        fill="#357089"
-        height="3.25"
-        width="44.666666666666664"
-        x="1991.7"
-        y="0.875"
-      />
-      <rect
-        data-testid="one-2"
-        fill="goldenrod"
-        height="5"
-        width="12.666666666666666"
-        x="2036.7"
-        y="0"
-      />
-      <rect
-        data-testid="one-3"
-        fill="goldenrod"
-        height="5"
-        width="22.666666666666668"
-        x="2205.0333333333333"
-        y="0"
-      />
-      <rect
-        data-testid="one-4"
-        fill="goldenrod"
-        height="5"
-        width="94"
-        x="2252.7"
-        y="0"
-      />
-      <rect
-        data-testid="one-5"
-        fill="goldenrod"
-        height="5"
-        width="59"
-        x="2380.7"
-        y="0"
-      />
-      <rect
-        data-testid="one-6"
-        fill="goldenrod"
-        height="5"
-        width="92"
-        x="2470.366666666667"
-        y="0"
-      />
-      <rect
-        data-testid="one-7"
-        fill="goldenrod"
-        height="5"
-        width="34"
-        x="2582.7"
-        y="0"
-      />
-      <rect
-        data-testid="one-8"
-        fill="goldenrod"
-        height="5"
-        width="48.333333333333336"
-        x="2651.0333333333333"
-        y="0"
-      />
-      <rect
-        data-testid="one-9"
-        fill="goldenrod"
-        height="5"
-        width="51.333333333333336"
-        x="2722.0333333333333"
-        y="0"
-      />
-      <rect
-        data-testid="one-10"
-        fill="goldenrod"
-        height="5"
-        width="65"
-        x="2806.366666666667"
-        y="0"
-      />
-      <rect
-        data-testid="one-11"
-        fill="goldenrod"
-        height="5"
-        width="34.333333333333336"
-        x="2902.7"
-        y="0"
-      />
-      <rect
-        data-testid="one-12"
-        fill="goldenrod"
-        height="5"
-        width="104"
-        x="2975.7"
-        y="0"
-      />
-      <rect
-        data-testid="one-13"
-        fill="goldenrod"
-        height="5"
-        width="26.666666666666668"
-        x="3138.0333333333333"
-        y="0"
-      />
-      <rect
-        data-testid="one-15"
-        fill="#357089"
-        height="3.25"
-        width="83"
-        x="3165.0333333333333"
-        y="0.875"
-      />
-    </g>
-  </svg>
-</div>
+  <g>
+    <line
+      data-testid="one"
+      stroke="black"
+      x1="1991.7"
+      x2="3248.0333333333333"
+      y1="2.5"
+      y2="2.5"
+    />
+    <rect
+      data-testid="box-one-0"
+      fill="#357089"
+      height="3.25"
+      stroke=""
+      width="44.666666666666664"
+      x="1991.7"
+      y="0.875"
+    />
+    <rect
+      data-testid="box-one-2"
+      fill="goldenrod"
+      height="5"
+      stroke=""
+      width="12.666666666666666"
+      x="2036.7"
+      y="0"
+    />
+    <rect
+      data-testid="box-one-3"
+      fill="goldenrod"
+      height="5"
+      stroke=""
+      width="22.666666666666668"
+      x="2205.0333333333333"
+      y="0"
+    />
+    <rect
+      data-testid="box-one-4"
+      fill="goldenrod"
+      height="5"
+      stroke=""
+      width="94"
+      x="2252.7"
+      y="0"
+    />
+    <rect
+      data-testid="box-one-5"
+      fill="goldenrod"
+      height="5"
+      stroke=""
+      width="59"
+      x="2380.7"
+      y="0"
+    />
+    <rect
+      data-testid="box-one-6"
+      fill="goldenrod"
+      height="5"
+      stroke=""
+      width="92"
+      x="2470.366666666667"
+      y="0"
+    />
+    <rect
+      data-testid="box-one-7"
+      fill="goldenrod"
+      height="5"
+      stroke=""
+      width="34"
+      x="2582.7"
+      y="0"
+    />
+    <rect
+      data-testid="box-one-8"
+      fill="goldenrod"
+      height="5"
+      stroke=""
+      width="48.333333333333336"
+      x="2651.0333333333333"
+      y="0"
+    />
+    <rect
+      data-testid="box-one-9"
+      fill="goldenrod"
+      height="5"
+      stroke=""
+      width="51.333333333333336"
+      x="2722.0333333333333"
+      y="0"
+    />
+    <rect
+      data-testid="box-one-10"
+      fill="goldenrod"
+      height="5"
+      stroke=""
+      width="65"
+      x="2806.366666666667"
+      y="0"
+    />
+    <rect
+      data-testid="box-one-11"
+      fill="goldenrod"
+      height="5"
+      stroke=""
+      width="34.333333333333336"
+      x="2902.7"
+      y="0"
+    />
+    <rect
+      data-testid="box-one-12"
+      fill="goldenrod"
+      height="5"
+      stroke=""
+      width="104"
+      x="2975.7"
+      y="0"
+    />
+    <rect
+      data-testid="box-one-13"
+      fill="goldenrod"
+      height="5"
+      stroke=""
+      width="26.666666666666668"
+      x="3138.0333333333333"
+      y="0"
+    />
+    <rect
+      data-testid="box-one-15"
+      fill="#357089"
+      height="3.25"
+      stroke=""
+      width="83"
+      x="3165.0333333333333"
+      y="0.875"
+    />
+    <line
+      stroke="black"
+      x1="3248.0333333333333"
+      x2="3255.0333333333333"
+      y1="2.5"
+      y2="2.5"
+    />
+    <polygon
+      points="3251.5333333333333,0,3251.5333333333333,5,3255.0333333333333,2.5"
+      stroke="black"
+    />
+  </g>
+</svg>
 `;
 
 exports[`one feature 1`] = `
-<div
-  style="position: relative;"
+<svg
+  class="SvgFeatureRendering"
+  data-testid="svgfeatures"
+  height="110"
+  width="333.3333333333333"
 >
-  <svg
-    class="SvgFeatureRendering"
-    data-testid="svgfeatures"
-    height="110"
-    style="display: block;"
-    width="333.3333333333333"
-  >
-    <g>
-      <rect
-        data-testid="box-one"
-        fill="goldenrod"
-        height="10"
-        width="1"
-        x="0.3"
-        y="0"
-      />
-    </g>
-  </svg>
-</div>
+  <g>
+    <rect
+      data-testid="box-one"
+      fill="goldenrod"
+      height="10"
+      stroke=""
+      width="1"
+      x="0.3"
+      y="0"
+    />
+  </g>
+</svg>
 `;
 
 exports[`processed transcript (exons + impliedUTR) 1`] = `
-<div
-  style="position: relative;"
+<svg
+  class="SvgFeatureRendering"
+  data-testid="svgfeatures"
+  height="140"
+  width="333.3333333333333"
 >
-  <svg
-    class="SvgFeatureRendering"
-    data-testid="svgfeatures"
-    height="140"
-    style="display: block;"
-    width="333.3333333333333"
-  >
-    <g>
-      <polyline
-        data-testid="type-Gff3TabixAdapter;type-Gff3TabixAdapter;uri-https://s3.amazonaws.com/jbrowse.org/genomes/hg19/nc-offset-107608116-0"
-        points="7759845,5,7766453,5,7766450.5,2.5,7766450.5,7.5,7766453,5"
-        stroke="black"
-        transform="rotate(180,7763149,5)"
-      />
-      <rect
-        data-testid="type-Gff3TabixAdapter;type-Gff3TabixAdapter;uri-https://s3.amazonaws.com/jbrowse.org/genomes/hg19/nc-offset-107608116-0-1"
-        fill="goldenrod"
-        height="10"
-        width="327.3333333333333"
-        x="7759845"
-        y="0"
-      />
-      <polygon
-        fill="goldenrod"
-        points="7759845,0,7759840,5,7759845,10"
-      />
-      <rect
-        data-testid="type-Gff3TabixAdapter;type-Gff3TabixAdapter;uri-https://s3.amazonaws.com/jbrowse.org/genomes/hg19/nc-offset-107608116-0-2"
-        fill="goldenrod"
-        height="10"
-        width="35.333333333333336"
-        x="7760604.333333333"
-        y="0"
-      />
-      <polygon
-        fill="goldenrod"
-        points="7760604.333333333,0,7760599.333333333,5,7760604.333333333,10"
-      />
-      <rect
-        data-testid="type-Gff3TabixAdapter;type-Gff3TabixAdapter;uri-https://s3.amazonaws.com/jbrowse.org/genomes/hg19/nc-offset-107608116-0-3"
-        fill="goldenrod"
-        height="10"
-        width="78.66666666666667"
-        x="7761725.666666667"
-        y="0"
-      />
-      <polygon
-        fill="goldenrod"
-        points="7761725.666666667,0,7761720.666666667,5,7761725.666666667,10"
-      />
-      <rect
-        data-testid="type-Gff3TabixAdapter;type-Gff3TabixAdapter;uri-https://s3.amazonaws.com/jbrowse.org/genomes/hg19/nc-offset-107608116-0-4"
-        fill="goldenrod"
-        height="10"
-        width="52.666666666666664"
-        x="7762144.666666667"
-        y="0"
-      />
-      <polygon
-        fill="goldenrod"
-        points="7762144.666666667,0,7762139.666666667,5,7762144.666666667,10"
-      />
-      <rect
-        data-testid="type-Gff3TabixAdapter;type-Gff3TabixAdapter;uri-https://s3.amazonaws.com/jbrowse.org/genomes/hg19/nc-offset-107608116-0-5"
-        fill="goldenrod"
-        height="10"
-        width="36.666666666666664"
-        x="7763199.666666667"
-        y="0"
-      />
-      <polygon
-        fill="goldenrod"
-        points="7763199.666666667,0,7763194.666666667,5,7763199.666666667,10"
-      />
-      <rect
-        data-testid="type-Gff3TabixAdapter;type-Gff3TabixAdapter;uri-https://s3.amazonaws.com/jbrowse.org/genomes/hg19/nc-offset-107608116-0-6"
-        fill="goldenrod"
-        height="10"
-        width="45.333333333333336"
-        x="7763927.333333333"
-        y="0"
-      />
-      <polygon
-        fill="goldenrod"
-        points="7763927.333333333,0,7763922.333333333,5,7763927.333333333,10"
-      />
-      <rect
-        data-testid="type-Gff3TabixAdapter;type-Gff3TabixAdapter;uri-https://s3.amazonaws.com/jbrowse.org/genomes/hg19/nc-offset-107608116-0-7"
-        fill="goldenrod"
-        height="10"
-        width="4"
-        x="7766265.666666667"
-        y="0"
-      />
-      <polygon
-        fill="goldenrod"
-        points="7766265.666666667,0,7766260.666666667,5,7766265.666666667,10"
-      />
-      <rect
-        data-testid="type-Gff3TabixAdapter;type-Gff3TabixAdapter;uri-https://s3.amazonaws.com/jbrowse.org/genomes/hg19/nc-offset-107608116-0-8"
-        fill="goldenrod"
-        height="10"
-        width="327.3333333333333"
-        x="7759845"
-        y="0"
-      />
-      <polygon
-        fill="goldenrod"
-        points="7759845,0,7759840,5,7759845,10"
-      />
-      <rect
-        data-testid="type-Gff3TabixAdapter;type-Gff3TabixAdapter;uri-https://s3.amazonaws.com/jbrowse.org/genomes/hg19/nc-offset-107608116-0-9"
-        fill="goldenrod"
-        height="10"
-        width="35.333333333333336"
-        x="7760604.333333333"
-        y="0"
-      />
-      <polygon
-        fill="goldenrod"
-        points="7760604.333333333,0,7760599.333333333,5,7760604.333333333,10"
-      />
-      <rect
-        data-testid="type-Gff3TabixAdapter;type-Gff3TabixAdapter;uri-https://s3.amazonaws.com/jbrowse.org/genomes/hg19/nc-offset-107608116-0-10"
-        fill="goldenrod"
-        height="10"
-        width="78.66666666666667"
-        x="7761725.666666667"
-        y="0"
-      />
-      <polygon
-        fill="goldenrod"
-        points="7761725.666666667,0,7761720.666666667,5,7761725.666666667,10"
-      />
-      <rect
-        data-testid="type-Gff3TabixAdapter;type-Gff3TabixAdapter;uri-https://s3.amazonaws.com/jbrowse.org/genomes/hg19/nc-offset-107608116-0-11"
-        fill="goldenrod"
-        height="10"
-        width="52.666666666666664"
-        x="7762144.666666667"
-        y="0"
-      />
-      <polygon
-        fill="goldenrod"
-        points="7762144.666666667,0,7762139.666666667,5,7762144.666666667,10"
-      />
-      <rect
-        data-testid="type-Gff3TabixAdapter;type-Gff3TabixAdapter;uri-https://s3.amazonaws.com/jbrowse.org/genomes/hg19/nc-offset-107608116-0-12"
-        fill="goldenrod"
-        height="10"
-        width="36.666666666666664"
-        x="7763199.666666667"
-        y="0"
-      />
-      <polygon
-        fill="goldenrod"
-        points="7763199.666666667,0,7763194.666666667,5,7763199.666666667,10"
-      />
-      <rect
-        data-testid="type-Gff3TabixAdapter;type-Gff3TabixAdapter;uri-https://s3.amazonaws.com/jbrowse.org/genomes/hg19/nc-offset-107608116-0-13"
-        fill="goldenrod"
-        height="10"
-        width="45.333333333333336"
-        x="7763927.333333333"
-        y="0"
-      />
-      <polygon
-        fill="goldenrod"
-        points="7763927.333333333,0,7763922.333333333,5,7763927.333333333,10"
-      />
-      <rect
-        data-testid="type-Gff3TabixAdapter;type-Gff3TabixAdapter;uri-https://s3.amazonaws.com/jbrowse.org/genomes/hg19/nc-offset-107608116-0-14"
-        fill="goldenrod"
-        height="10"
-        width="4"
-        x="7766265.666666667"
-        y="0"
-      />
-      <polygon
-        fill="goldenrod"
-        points="7766265.666666667,0,7766260.666666667,5,7766265.666666667,10"
-      />
-      <rect
-        data-testid="type-Gff3TabixAdapter;type-Gff3TabixAdapter;uri-https://s3.amazonaws.com/jbrowse.org/genomes/hg19/nc-offset-107608116-0_five_prime_UTR_7"
-        fill="#357089"
-        height="6.5"
-        width="31.666666666666668"
-        x="7766421.333333333"
-        y="1.75"
-      />
-      <polygon
-        fill="#357089"
-        points="7766421.333333333,1.75,7766418.083333333,5,7766421.333333333,8.25"
-      />
-      <rect
-        data-testid="type-Gff3TabixAdapter;type-Gff3TabixAdapter;uri-https://s3.amazonaws.com/jbrowse.org/genomes/hg19/nc-offset-107608116-0_five_prime_UTR_6"
-        fill="#357089"
-        height="6.5"
-        width="38.333333333333336"
-        x="7766269.666666667"
-        y="1.75"
-      />
-      <polygon
-        fill="#357089"
-        points="7766269.666666667,1.75,7766266.416666667,5,7766269.666666667,8.25"
-      />
-      <text
-        style="font-size: 13px; fill: black; cursor: default;"
-        x="7759845"
-        y="25"
-      >
-        LACTBL1
-      </text>
-      <text
-        style="font-size: 13px; fill: blue; cursor: default;"
-        x="7759845"
-        y="40"
-      >
-        lactamase beta like 1
-      </text>
-    </g>
-  </svg>
-</div>
+  <g>
+    <line
+      data-testid="type-Gff3TabixAdapter;type-Gff3TabixAdapter;uri-https://s3.amazonaws.com/jbrowse.org/genomes/hg19/nc-offset-107608116-0"
+      stroke="black"
+      x1="7759845"
+      x2="7766453"
+      y1="5"
+      y2="5"
+    />
+    <rect
+      data-testid="box-type-Gff3TabixAdapter;type-Gff3TabixAdapter;uri-https://s3.amazonaws.com/jbrowse.org/genomes/hg19/nc-offset-107608116-0-1"
+      fill="goldenrod"
+      height="10"
+      stroke=""
+      width="327.3333333333333"
+      x="7759845"
+      y="0"
+    />
+    <rect
+      data-testid="box-type-Gff3TabixAdapter;type-Gff3TabixAdapter;uri-https://s3.amazonaws.com/jbrowse.org/genomes/hg19/nc-offset-107608116-0-2"
+      fill="goldenrod"
+      height="10"
+      stroke=""
+      width="35.333333333333336"
+      x="7760604.333333333"
+      y="0"
+    />
+    <rect
+      data-testid="box-type-Gff3TabixAdapter;type-Gff3TabixAdapter;uri-https://s3.amazonaws.com/jbrowse.org/genomes/hg19/nc-offset-107608116-0-3"
+      fill="goldenrod"
+      height="10"
+      stroke=""
+      width="78.66666666666667"
+      x="7761725.666666667"
+      y="0"
+    />
+    <rect
+      data-testid="box-type-Gff3TabixAdapter;type-Gff3TabixAdapter;uri-https://s3.amazonaws.com/jbrowse.org/genomes/hg19/nc-offset-107608116-0-4"
+      fill="goldenrod"
+      height="10"
+      stroke=""
+      width="52.666666666666664"
+      x="7762144.666666667"
+      y="0"
+    />
+    <rect
+      data-testid="box-type-Gff3TabixAdapter;type-Gff3TabixAdapter;uri-https://s3.amazonaws.com/jbrowse.org/genomes/hg19/nc-offset-107608116-0-5"
+      fill="goldenrod"
+      height="10"
+      stroke=""
+      width="36.666666666666664"
+      x="7763199.666666667"
+      y="0"
+    />
+    <rect
+      data-testid="box-type-Gff3TabixAdapter;type-Gff3TabixAdapter;uri-https://s3.amazonaws.com/jbrowse.org/genomes/hg19/nc-offset-107608116-0-6"
+      fill="goldenrod"
+      height="10"
+      stroke=""
+      width="45.333333333333336"
+      x="7763927.333333333"
+      y="0"
+    />
+    <rect
+      data-testid="box-type-Gff3TabixAdapter;type-Gff3TabixAdapter;uri-https://s3.amazonaws.com/jbrowse.org/genomes/hg19/nc-offset-107608116-0-7"
+      fill="goldenrod"
+      height="10"
+      stroke=""
+      width="4"
+      x="7766265.666666667"
+      y="0"
+    />
+    <rect
+      data-testid="box-type-Gff3TabixAdapter;type-Gff3TabixAdapter;uri-https://s3.amazonaws.com/jbrowse.org/genomes/hg19/nc-offset-107608116-0-8"
+      fill="goldenrod"
+      height="10"
+      stroke=""
+      width="327.3333333333333"
+      x="7759845"
+      y="0"
+    />
+    <rect
+      data-testid="box-type-Gff3TabixAdapter;type-Gff3TabixAdapter;uri-https://s3.amazonaws.com/jbrowse.org/genomes/hg19/nc-offset-107608116-0-9"
+      fill="goldenrod"
+      height="10"
+      stroke=""
+      width="35.333333333333336"
+      x="7760604.333333333"
+      y="0"
+    />
+    <rect
+      data-testid="box-type-Gff3TabixAdapter;type-Gff3TabixAdapter;uri-https://s3.amazonaws.com/jbrowse.org/genomes/hg19/nc-offset-107608116-0-10"
+      fill="goldenrod"
+      height="10"
+      stroke=""
+      width="78.66666666666667"
+      x="7761725.666666667"
+      y="0"
+    />
+    <rect
+      data-testid="box-type-Gff3TabixAdapter;type-Gff3TabixAdapter;uri-https://s3.amazonaws.com/jbrowse.org/genomes/hg19/nc-offset-107608116-0-11"
+      fill="goldenrod"
+      height="10"
+      stroke=""
+      width="52.666666666666664"
+      x="7762144.666666667"
+      y="0"
+    />
+    <rect
+      data-testid="box-type-Gff3TabixAdapter;type-Gff3TabixAdapter;uri-https://s3.amazonaws.com/jbrowse.org/genomes/hg19/nc-offset-107608116-0-12"
+      fill="goldenrod"
+      height="10"
+      stroke=""
+      width="36.666666666666664"
+      x="7763199.666666667"
+      y="0"
+    />
+    <rect
+      data-testid="box-type-Gff3TabixAdapter;type-Gff3TabixAdapter;uri-https://s3.amazonaws.com/jbrowse.org/genomes/hg19/nc-offset-107608116-0-13"
+      fill="goldenrod"
+      height="10"
+      stroke=""
+      width="45.333333333333336"
+      x="7763927.333333333"
+      y="0"
+    />
+    <rect
+      data-testid="box-type-Gff3TabixAdapter;type-Gff3TabixAdapter;uri-https://s3.amazonaws.com/jbrowse.org/genomes/hg19/nc-offset-107608116-0-14"
+      fill="goldenrod"
+      height="10"
+      stroke=""
+      width="4"
+      x="7766265.666666667"
+      y="0"
+    />
+    <rect
+      data-testid="box-type-Gff3TabixAdapter;type-Gff3TabixAdapter;uri-https://s3.amazonaws.com/jbrowse.org/genomes/hg19/nc-offset-107608116-0_five_prime_UTR_7"
+      fill="#357089"
+      height="6.5"
+      stroke=""
+      width="31.666666666666668"
+      x="7766421.333333333"
+      y="1.75"
+    />
+    <rect
+      data-testid="box-type-Gff3TabixAdapter;type-Gff3TabixAdapter;uri-https://s3.amazonaws.com/jbrowse.org/genomes/hg19/nc-offset-107608116-0_five_prime_UTR_6"
+      fill="#357089"
+      height="6.5"
+      stroke=""
+      width="38.333333333333336"
+      x="7766269.666666667"
+      y="1.75"
+    />
+    <line
+      stroke="black"
+      x1="7759845"
+      x2="7759838"
+      y1="5"
+      y2="5"
+    />
+    <polygon
+      points="7759841.5,2.5,7759841.5,7.5,7759838,5"
+      stroke="black"
+    />
+    <text
+      style="font-size: 13px; fill: black; cursor: default;"
+      x="7759845"
+      y="25"
+    >
+      LACTBL1
+    </text>
+    <text
+      style="font-size: 13px; fill: blue; cursor: default;"
+      x="7759845"
+      y="40"
+    >
+      lactamase beta like 1
+    </text>
+  </g>
+</svg>
 `;
 
 exports[`processed transcript (reducedRepresentation mode) 1`] = `
-<div
-  style="position: relative;"
+<svg
+  class="SvgFeatureRendering"
+  data-testid="svgfeatures"
+  height="110"
+  width="333.3333333333333"
 >
-  <svg
-    class="SvgFeatureRendering"
-    data-testid="svgfeatures"
-    height="110"
-    style="display: block;"
-    width="333.3333333333333"
-  >
-    <g>
-      <rect
-        data-testid="one"
-        fill="goldenrod"
-        height="10"
-        width="1"
-        x="0.3"
-        y="0"
-      />
-    </g>
-  </svg>
-</div>
+  <g>
+    <rect
+      data-testid="box-one"
+      fill="goldenrod"
+      height="10"
+      stroke=""
+      width="1"
+      x="0.3"
+      y="0"
+    />
+  </g>
+</svg>
 `;
 
 exports[`processed transcript 1`] = `
-<div
-  style="position: relative;"
+<svg
+  class="SvgFeatureRendering"
+  data-testid="svgfeatures"
+  height="125"
+  width="333.3333333333333"
 >
-  <svg
-    class="SvgFeatureRendering"
-    data-testid="svgfeatures"
-    height="125"
-    style="display: block;"
-    width="333.3333333333333"
-  >
-    <g>
-      <polyline
-        data-testid="one"
-        points="1991.7,5,3248.0333333333333,5,3245.5333333333333,2.5,3245.5333333333333,7.5,3248.0333333333333,5"
-        stroke="black"
-      />
-      <rect
-        data-testid="one-0"
-        fill="#357089"
-        height="6.5"
-        width="44.666666666666664"
-        x="1991.7"
-        y="1.75"
-      />
-      <rect
-        data-testid="one-2"
-        fill="goldenrod"
-        height="10"
-        width="12.666666666666666"
-        x="2036.7"
-        y="0"
-      />
-      <rect
-        data-testid="one-3"
-        fill="goldenrod"
-        height="10"
-        width="22.666666666666668"
-        x="2205.0333333333333"
-        y="0"
-      />
-      <rect
-        data-testid="one-4"
-        fill="goldenrod"
-        height="10"
-        width="94"
-        x="2252.7"
-        y="0"
-      />
-      <rect
-        data-testid="one-5"
-        fill="goldenrod"
-        height="10"
-        width="59"
-        x="2380.7"
-        y="0"
-      />
-      <rect
-        data-testid="one-6"
-        fill="goldenrod"
-        height="10"
-        width="92"
-        x="2470.366666666667"
-        y="0"
-      />
-      <rect
-        data-testid="one-7"
-        fill="goldenrod"
-        height="10"
-        width="34"
-        x="2582.7"
-        y="0"
-      />
-      <rect
-        data-testid="one-8"
-        fill="goldenrod"
-        height="10"
-        width="48.333333333333336"
-        x="2651.0333333333333"
-        y="0"
-      />
-      <rect
-        data-testid="one-9"
-        fill="goldenrod"
-        height="10"
-        width="51.333333333333336"
-        x="2722.0333333333333"
-        y="0"
-      />
-      <rect
-        data-testid="one-10"
-        fill="goldenrod"
-        height="10"
-        width="65"
-        x="2806.366666666667"
-        y="0"
-      />
-      <rect
-        data-testid="one-11"
-        fill="goldenrod"
-        height="10"
-        width="34.333333333333336"
-        x="2902.7"
-        y="0"
-      />
-      <rect
-        data-testid="one-12"
-        fill="goldenrod"
-        height="10"
-        width="104"
-        x="2975.7"
-        y="0"
-      />
-      <rect
-        data-testid="one-13"
-        fill="goldenrod"
-        height="10"
-        width="26.666666666666668"
-        x="3138.0333333333333"
-        y="0"
-      />
-      <rect
-        data-testid="one-15"
-        fill="#357089"
-        height="6.5"
-        width="83"
-        x="3165.0333333333333"
-        y="1.75"
-      />
-      <text
-        style="font-size: 13px; fill: black; cursor: default;"
-        x="1991.7"
-        y="25"
-      >
-        au9.g1002.t1
-      </text>
-    </g>
-  </svg>
-</div>
+  <g>
+    <line
+      data-testid="one"
+      stroke="black"
+      x1="1991.7"
+      x2="3248.0333333333333"
+      y1="5"
+      y2="5"
+    />
+    <rect
+      data-testid="box-one-0"
+      fill="#357089"
+      height="6.5"
+      stroke=""
+      width="44.666666666666664"
+      x="1991.7"
+      y="1.75"
+    />
+    <rect
+      data-testid="box-one-2"
+      fill="goldenrod"
+      height="10"
+      stroke=""
+      width="12.666666666666666"
+      x="2036.7"
+      y="0"
+    />
+    <rect
+      data-testid="box-one-3"
+      fill="goldenrod"
+      height="10"
+      stroke=""
+      width="22.666666666666668"
+      x="2205.0333333333333"
+      y="0"
+    />
+    <rect
+      data-testid="box-one-4"
+      fill="goldenrod"
+      height="10"
+      stroke=""
+      width="94"
+      x="2252.7"
+      y="0"
+    />
+    <rect
+      data-testid="box-one-5"
+      fill="goldenrod"
+      height="10"
+      stroke=""
+      width="59"
+      x="2380.7"
+      y="0"
+    />
+    <rect
+      data-testid="box-one-6"
+      fill="goldenrod"
+      height="10"
+      stroke=""
+      width="92"
+      x="2470.366666666667"
+      y="0"
+    />
+    <rect
+      data-testid="box-one-7"
+      fill="goldenrod"
+      height="10"
+      stroke=""
+      width="34"
+      x="2582.7"
+      y="0"
+    />
+    <rect
+      data-testid="box-one-8"
+      fill="goldenrod"
+      height="10"
+      stroke=""
+      width="48.333333333333336"
+      x="2651.0333333333333"
+      y="0"
+    />
+    <rect
+      data-testid="box-one-9"
+      fill="goldenrod"
+      height="10"
+      stroke=""
+      width="51.333333333333336"
+      x="2722.0333333333333"
+      y="0"
+    />
+    <rect
+      data-testid="box-one-10"
+      fill="goldenrod"
+      height="10"
+      stroke=""
+      width="65"
+      x="2806.366666666667"
+      y="0"
+    />
+    <rect
+      data-testid="box-one-11"
+      fill="goldenrod"
+      height="10"
+      stroke=""
+      width="34.333333333333336"
+      x="2902.7"
+      y="0"
+    />
+    <rect
+      data-testid="box-one-12"
+      fill="goldenrod"
+      height="10"
+      stroke=""
+      width="104"
+      x="2975.7"
+      y="0"
+    />
+    <rect
+      data-testid="box-one-13"
+      fill="goldenrod"
+      height="10"
+      stroke=""
+      width="26.666666666666668"
+      x="3138.0333333333333"
+      y="0"
+    />
+    <rect
+      data-testid="box-one-15"
+      fill="#357089"
+      height="6.5"
+      stroke=""
+      width="83"
+      x="3165.0333333333333"
+      y="1.75"
+    />
+    <line
+      stroke="black"
+      x1="3248.0333333333333"
+      x2="3255.0333333333333"
+      y1="5"
+      y2="5"
+    />
+    <polygon
+      points="3251.5333333333333,2.5,3251.5333333333333,7.5,3255.0333333333333,5"
+      stroke="black"
+    />
+    <text
+      style="font-size: 13px; fill: black; cursor: default;"
+      x="1991.7"
+      y="25"
+    >
+      au9.g1002.t1
+    </text>
+  </g>
+</svg>
 `;
 
 exports[`svg selected 1`] = `
diff --git a/plugins/svg/src/SvgFeatureRenderer/components/util.ts b/plugins/svg/src/SvgFeatureRenderer/components/util.ts
index 3f1959591d..728eb75d3a 100644
--- a/plugins/svg/src/SvgFeatureRenderer/components/util.ts
+++ b/plugins/svg/src/SvgFeatureRenderer/components/util.ts
@@ -4,16 +4,27 @@ import SceneGraph from '@jbrowse/core/util/layouts/SceneGraph'
 import { Feature } from '@jbrowse/core/util/simpleFeature'
 import { AnyConfigurationModel } from '@jbrowse/core/configuration/configurationSchema'
 import Box from './Box'
-import Chevron from './Chevron'
 import ProcessedTranscript from './ProcessedTranscript'
 import Segments from './Segments'
 import Subfeatures from './Subfeatures'
+import { Region } from '@jbrowse/core/util'
 
-interface Glyph extends React.FunctionComponent {
+export interface Glyph
+  extends React.FC<{
+    children: React.ReactNode
+    feature: Feature
+    featureLayout: SceneGraph
+    selected?: boolean
+    config: AnyConfigurationModel
+    region: Region
+    bpPerPx: number
+    topLevel?: boolean
+    [key: string]: unknown
+  }> {
   layOut?: Function
 }
 
-interface ExtraGlyphValidator {
+export interface ExtraGlyphValidator {
   glyph: Glyph
   validator: (feature: Feature) => boolean
 }
@@ -23,36 +34,23 @@ export function chooseGlyphComponent(
   extraGlyphs?: ExtraGlyphValidator[],
 ): Glyph {
   const type = feature.get('type')
-  const strand = feature.get('strand')
-  const subfeatures: Feature[] = feature.get('subfeatures')
+  const subfeatures = feature.get('subfeatures')
 
   if (subfeatures) {
-    const hasSubSub = subfeatures.find(subfeature => {
-      return !!subfeature.get('subfeatures')
-    })
+    const hasSubSub = subfeatures.find(sub => !!sub.get('subfeatures'))
     if (hasSubSub) {
       return Subfeatures
-    }
-    const transcriptTypes = ['mRNA', 'transcript']
-    if (
-      transcriptTypes.includes(type) &&
+    } else if (
+      ['mRNA', 'transcript'].includes(type) &&
       subfeatures.find(f => f.get('type') === 'CDS')
     ) {
       return ProcessedTranscript
+    } else {
+      return Segments
     }
-
-    return Segments
   }
 
-  if (extraGlyphs) {
-    for (const extraGlyph of extraGlyphs) {
-      if (extraGlyph.validator(feature) === true) {
-        return extraGlyph.glyph
-      }
-    }
-  }
-
-  return [1, -1].includes(strand) ? Chevron : Box
+  return extraGlyphs?.find(f => f.validator(feature))?.glyph || Box
 }
 
 interface BaseLayOutArgs {
@@ -104,19 +102,20 @@ export function layOut({
 
 export function layOutFeature(args: FeatureLayOutArgs): SceneGraph {
   const { layout, feature, bpPerPx, reversed, config, extraGlyphs } = args
-  const displayMode = readConfObject(config, 'displayMode')
+  const displayMode = readConfObject(config, 'displayMode') as string
   const GlyphComponent =
     displayMode === 'reducedRepresentation'
-      ? Chevron
+      ? Box
       : chooseGlyphComponent(feature, extraGlyphs)
   const parentFeature = feature.parent()
   let x = 0
   if (parentFeature) {
-    x = reversed
-      ? (parentFeature.get('end') - feature.get('end')) / bpPerPx
-      : (feature.get('start') - parentFeature.get('start')) / bpPerPx
+    x =
+      (reversed
+        ? parentFeature.get('end') - feature.get('end')
+        : feature.get('start') - parentFeature.get('start')) / bpPerPx
   }
-  const height = readConfObject(config, 'height', { feature })
+  const height = readConfObject(config, 'height', { feature }) as number
   const width = (feature.get('end') - feature.get('start')) / bpPerPx
   const layoutParent = layout.parent
   const top = layoutParent ? layoutParent.top : 0
@@ -132,22 +131,11 @@ export function layOutFeature(args: FeatureLayOutArgs): SceneGraph {
 }
 
 export function layOutSubfeatures(args: SubfeatureLayOutArgs): void {
-  const {
-    layout: subLayout,
-    subfeatures,
-    bpPerPx,
-    reversed,
-    config,
-    extraGlyphs,
-  } = args
-  subfeatures.forEach(subfeature => {
-    const SubfeatureGlyphComponent = chooseGlyphComponent(
-      subfeature,
-      extraGlyphs,
-    )
-    ;(SubfeatureGlyphComponent.layOut || layOut)({
-      layout: subLayout,
-      feature: subfeature,
+  const { layout, subfeatures, bpPerPx, reversed, config, extraGlyphs } = args
+  subfeatures.forEach(feature => {
+    ;(chooseGlyphComponent(feature, extraGlyphs).layOut || layOut)({
+      layout,
+      feature,
       bpPerPx,
       reversed,
       config,
diff --git a/plugins/svg/src/SvgFeatureRenderer/configSchema.ts b/plugins/svg/src/SvgFeatureRenderer/configSchema.ts
index b4fdc3ad31..6acfb3c0b2 100644
--- a/plugins/svg/src/SvgFeatureRenderer/configSchema.ts
+++ b/plugins/svg/src/SvgFeatureRenderer/configSchema.ts
@@ -24,6 +24,13 @@ export default ConfigurationSchema(
       defaultValue: '#357089',
       contextVariable: ['feature'],
     },
+
+    outline: {
+      type: 'color',
+      description: 'the outline for features',
+      defaultValue: '',
+      contextVariable: ['feature'],
+    },
     height: {
       type: 'number',
       description: 'height in pixels of the main body of each feature',
diff --git a/products/jbrowse-react-linear-genome-view/src/JBrowseLinearGenomeView/__snapshots__/JBrowseLinearGenomeView.test.tsx.snap b/products/jbrowse-react-linear-genome-view/src/JBrowseLinearGenomeView/__snapshots__/JBrowseLinearGenomeView.test.tsx.snap
index b99318eb35..ee56395b11 100644
--- a/products/jbrowse-react-linear-genome-view/src/JBrowseLinearGenomeView/__snapshots__/JBrowseLinearGenomeView.test.tsx.snap
+++ b/products/jbrowse-react-linear-genome-view/src/JBrowseLinearGenomeView/__snapshots__/JBrowseLinearGenomeView.test.tsx.snap
@@ -857,7 +857,6 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
                   <div
                     class="makeStyles-display"
                     data-testid="display-volvox_refseq-LinearReferenceSequenceDisplay"
-                    role="presentation"
                   >
                     <div
                       class="makeStyles-linearBlocks"