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

Question

Илиан

svg , github

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

Как мне вставить SVG изображение в репозиторий своего профиля на GitHub, указанном по ссылке <a href="https://github.com/3FANG/3FANG/tree/main" rel="nofollow">https://github.com/3FANG/3FANG/tree/main</a>, если у меня не отображается фоновая картинка в данном SVG-коде? Вот его пример: <br/> <br/> <pre><code class="html">&lt;svg xmlns="http://www.w3.org/2000/svg" width="850" height="375" fill="none"&gt;
    &lt;defs&gt;
        &lt;pattern id="imgPattern" width="850" height="375" patternUnits="userSpaceOnUse"&gt;
            &lt;image href="./background.jpeg" width="850" height="375" preserveAspectRatio="xMidYMid meet"/&gt;
        &lt;/pattern&gt;
    &lt;/defs&gt;
    &lt;g&gt;
        &lt;rect width="800" height="325" x="25" y="25" fill="url(#imgPattern)" rx="15"/&gt;
    &lt;/g&gt;
    ...
&lt;svg/&gt;</code></pre> <br/> <br/> Я пробовал использовать как относительные пути к изображению в репозитории (как в текущем примере: "./background.jpeg"), так и полные ссылки, например: <br/> <a href="https://github.com/3FANG/3FANG/blob/main/background.jpeg?raw=true" rel="nofollow">https://github.com/3FANG/3FANG/blob/main/background.jpeg?raw=true</a> <br/> <a href="https://raw.githubusercontent.com/3FANG/3FANG/main/background.jpeg" rel="nofollow">https://raw.githubusercontent.com/3FANG/3FANG/main/background.jpeg</a> <br/> <br/> Однако фоновая картинка по-прежнему не отображается. При использовании относительного пути изображение просто отсутствует, а при использовании ссылок на файл появляется символ битой картинки, что указывает на невозможность загрузки файла. <br/> <br/> В конечном итоге, я ожидаю, что изображение должно выглядеть с анимацией следующим образом: <br/>

31 августа 2024 г. 7:24

Ответы на вопрос 2

Похожие вопросы

Answer 1

SVG-файлы могут не отображать изображения, если ссылки на изображения неверны или если источник изображения не обеспечен поддержкой CORS (Cross-Origin Resource Sharing). Когда вы работаете с SVG на GitHub, важно помнить, что браузеры могут блокировать загрузку изображений с разных доменов, если CORS не настроен правильно.

Когда вы используете относительные пути, важно, чтобы путь был корректным относительно местоположения SVG-файла. Если ваш SVG-файл находится в одной папке с `background.jpeg`, относительный путь должен выглядеть так: `href="background.jpeg"`.

Для обеспечения корректного отображения изображения в вашем SVG-коде, попробуйте использовать следующий вариант:

1. Используйте полную ссылку на изображение, убедившись, что вы добавили `?raw=true` в конце ссылки, чтобы получить прямую ссылку на изображение из репозитория GitHub. Например:
   ```html
   <image href="https://raw.githubusercontent.com/3FANG/3FANG/main/background.jpeg" width="850" height="375" preserveAspectRatio="xMidYMid meet"/>
   ```

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

Вот как должен выглядеть ваш SVG-код после изменений:

```html
<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="https://raw.githubusercontent.com/3FANG/3FANG/main/background.jpeg?raw=true" 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>
```

Также важно убедиться, что файл `background.jpeg` действительно загружен в ваш репозиторий и доступен по указанной ссылке. После того как вы внесете изменения, проверьте отображение SVG в браузере (как в панели GitHub, так и в локальном HTML-файле).

Если проблема не решилась, возможно, стоит попробовать открыть SVG в другом браузере или проверить консоль разработчика на наличие ошибок.

Answer 2

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