Estoy tratando de enmascarar el contenido con una imagen SVG externa así:

#homepage-banner .desktop-slider.masked {
  -webkit-mask:url(news-panel-mask.svg) left top no-repeat; /* Chrome/Safari (Webkit) */
  mask: url(news-panel-mask.svg#mask); /* Firefox */
}

El archivo news-panel-mask.svg tiene los siguientes contenidos:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="1170px" height="494px" viewBox="0 0 1170 494" enable-background="new 0 0 1170 494" xml:space="preserve">
  <defs>
    <mask id="mask" maskUnits="userSpaceOnUse">
      <path fill="white" d="M1170.001,494V0h-352v141.605c0,2.2-0.521,5.274-2.075,6.832l-21.725,21.393c-1.554,1.557-3.2,4.631-3.2,6.832v131.692
    c0,2.2,2.021,5.274,3.575,6.832l20.975,21.393c1.554,1.557,2.45,4.631,2.45,6.831V494H1170.001z"/>
    </mask>
  </defs>
</svg>

Esto funciona en Firefox, pero necesito quitar el<defs> y<mask> Etiquetas en el archivo svg para que funcione en Chrome. ¿Hay alguna forma en que pueda solucionar esto para poder usar el mismo archivo svg para ambos navegadores?

Gracias por tu ayuda.