Почему не отображается картинка в SVG на GitHub?

Question

[3FANG]

Я хочу вставить SVG картинку в репозиторий профиля на GItHub - https://github.com/3FANG/3FANG/tree/main
И у меня не отображается фоновая картинка в этом SVG. Код такой:

<svg xmlns="http://www.w3.org/2000/svg" width="850" height="375" fill="none">
    <defs>
        <pattern id="imgPattern" width="850" height="375" patternUnits="userSpaceOnUse">
            <image href="./background.jpeg" width="850" height="375" preserveAspectRatio="xMidYMid meet"/>
        </pattern>
    </defs>
    <g>
        <rect width="800" height="325" x="25" y="25" fill="url(#imgPattern)" rx="15"/>
    </g>
    ...
<svg/>

В href в я пробовал вставлять как относительные пути до картинки из репозитория (как стоит сейчас - "./background.jpeg" ), так и полные ссылки до файла на GItHub:
https://github.com/3FANG/3FANG/blob/main/backgroun...
https://raw.githubusercontent.com/3FANG/3FANG/main...

Но все равно, картинка не отображается. В случае с относительным путем, ее просто нет, а в случае указания ссылки до файла, отображается, будто не удалось подгрузить файл (символ битой картинки).

По итогу должна отображаться такая картинка с анимацией:

Answer 1

[Aetae]

Оно подключается как <img>, а внутри img многие фишки svg не работают, в т.ч., видимо, и отдельно подгружаемая image. Если очень хочется - впихни картинку как data uri прям в svg.
P.S. Анимации тоже работать не будут.

Comments

[3FANG]

Я кстати пробовал вставлять как data:image, но использовал xlink:href и у меня высвечивалось ошибка типа "invalid image source" вместо SVG. Но сейчас я использовал просто href и все заработало. Спасибо вам.
Но вы говорите, что анимация работать не будет, тем не менее, здесь она работает - https://github.com/vaaski/vaaski/tree/master

[Aetae]

3FANG, хм, ну значит "будет работать ограничено" или в таком духе. Честно скажу, что не держу в голове всех этих особенностей, тут сами смотрите. Я просто не использую никогда img для svg, и мне этого достаточно, чтоб спать спокойно.:)