Я использую изображение SVG, сгенерированное Figma, в моем проекте. Он отлично работает в любом браузере, кроме Safari
Это ожидаемый результат и то, что визуализируется с помощью Chrome, IE, Edge и Firefox
Это то, что отображается в Safari на рабочем столе То, что отображается в safari на планшетах
И это то, что отображается в Safari на мобильном телефоне
Как видно из скриншотов, SVG-изображение конверта вообще не отображается на рабочем столе Safari и только частично отображается на мобильном устройстве. На планшетах кажется, что слой изображения как для конверта, так и для карточки (оба SVG) не отображается, оставляя только градиентный слой.
Я использую SVG в HTML как <img> Я пытался использовать <iframe> и <object>, но без разницы.
Я также проверил, что тип MIME image/svg+xml
Я подозреваю, что Figma экспортировала SVG способом, который несовместим с Safari, но я не знаю, какие изменения я должен внести в Это.
Сам файл SVG довольно длинный, поэтому я вставлю части до <defs> здесь и вот ссылка на полный файл
<svg width="931" height="932" viewBox="0 0 931 932" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="envelope-lid__background" filter="url(#filter2_ddddd)">
<path id="envelope-lid__background__paper" d="M831.539 396.004L568.68 68.7688C565.5 64.8096 559.912 63.7347 555.465 66.2266L187.878 272.186L831.539 396.004Z" fill="url(#pattern0)"/>
</g>
<g id="envelope-lid__inlay" filter="url(#filter3_ddddd)">
<path id="envelope-lid__inlay__foil-texture" d="M795.178 389.382L561.179 98.0748C558.348 94.5503 553.374 93.5934 549.415 95.8117L222.186 279.158L795.178 389.382Z" fill="url(#pattern1)"/>
<path id="envelope-lid__inlay__color" class="envelope-inlay-color" d="M795.178 389.382L561.179 98.0748C558.348 94.5503 553.374 93.5934 549.415 95.8117L222.186 279.158L795.178 389.382Z" fill="black" fill-opacity="0.6"/>
<path id="envelope-lid__inlay__gradient" d="M795.178 389.382L561.179 98.0748C558.348 94.5503 553.374 93.5934 549.415 95.8117L222.186 279.158L795.178 389.382Z" fill="url(#paint0_linear)" fill-opacity="0.5"/>
</g>
Спасибо!