Я пытаюсь замаскировать контент с помощью внешнего изображения SVG, например, так:

#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 */
}

Файл news-panel-mask.svg имеет следующее содержимое:

<?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>

Это работает на Firefox, но мне нужно удалить<defs> а также<mask> теги в файле SVG, чтобы заставить его работать на Chrome. Есть ли способ, как я могу это исправить, чтобы я мог использовать один и тот же файл SVG для обоих браузеров?

Спасибо за вашу помощь.