@font-face in SVG

Problem: I'm trying trying to place an images in svg format with custom fonts. It works in svg but not in img. If you open the image in a new tab you will see it rendered with the proper font. The font is served from this same website in this directory.

Link to the test.svg
Text using CSS @font-face 
      <svg width="500" height="200" version="1.1" xmlns = 'http://www.w3.org/2000/svg' xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 200">  
           <defs>
           <style type="text/css">
           @font-face {
             font-family: 'Arvo';
             font-style: normal;
             font-weight: normal;
             src: url(arvo-regular-webfont.woff) format('woff');
           }
           </style>
           </defs>
           <rect x="0" y="0" height="100" width="500" fill="#eee" />
           <text x="20" y="50" font-family="Arvo" font-weight="normal" font-size="32">Text using CSS @font-face</text>
         </svg>
  
        <img src="test_ff.svg" width="500" height="200" />