Почему не отображается страница с svg в браузере и как добиться отображения?

Question

[IvanRivan]

<div style="background: url('./Vector-2.svg') no-repeat; background-size: 100% 500px;"></div>

Не отображается в виде фона. И в виде не фоновой картинки тоже не отображается. Отображается только если задействовать тег object вместе с картинкой, но мне нужно в виде фона.

Читал что нужно в коде самого svg файла поместить запись xlink:href="data:image/png; но не понимаю, где она должна быть расположена.

<svg width="3840" height="1202" viewBox="0 0 3840 1202" fill="none" xmlns=" http://www.w3.org/2000/svg " xlink:href="data:image/png;">

Так не отображается.

Comments

[Ankhena]

Читал что нужно в коде самого svg файла поместить запись xlink:href="data:image/png;

Ну и зачем вы тогда её вообще в SVG сохранили?

А для всего остального, делайте песочницу на jsfiddle.net или ссылку на сайт, где видно и саму svg и проблему.

[IvanRivan]

Ankhena,

Ну и зачем вы тогда её вообще в SVG сохранили?

В фигме изображения в векторной графике. В SVG изображение весит 2кб, а в gif или jpeg 60кб ужатое до самого низкого качества. Этих изображений там пачка и кроме как в SVG их сохранять для верстки в другие форматы не резон.

[Ankhena]

IvanRivan, логично.
Но зачем пишете, что это data:image/png?

[IvanRivan]

Ankhena, нагуглил что надо именно такое писать. Тот кто это придумал наверно финт ушами совершал.

[Ankhena]

IvanRivan, уберите из кода вашей картинки все упоминания :12132 и вставляйте её как хотите.
https://qna.habr.com/q/1067380

[IvanRivan]

Ankhena, благодарю, это решило проблему. Подстава от фигмы такая с этими двоеточиями.

Answer 1

[Rsa97]

Встройте SVG в CSS

background: url(data:image/svg+xml,Здесь URL-кодированный SVG)

Перевести в URL-кодировку можно через rawurlencode в PHP или онлайн, например здесь.

Comments

[IvanRivan]

В итоге у меня получилась строка

<div style="background: url(data:image/svg+xml,'./Vector-2.svg') no-repeat; background-size: 100% 500px;"></div>

И по вашей ссылке вбил код svg файла целиком и нажал Encode URL, а полученный код вставил вместо оригинального в svg файл.

Но фон по прежнему не отображается и картинка после Encode URL отдельно сама по себе перестала открываться.

Даже если вместо './Vector-2.svg' вставляю код полученный после Encode URL, фон все равно не отображается.

[Rsa97]

IvanRivan, Потому что надо не ссылку указывать, а тот самый текст, который вы получили после кодирования.

[Rsa97]

IvanRivan,

[IvanRivan]

Rsa97, и так пробовал но результат все тот же.

[IvanRivan]

Rsa97,

<div style="width:2000px; height:1000px; background: url(data:image/svg+xml,%3Csvg%20width%3D%223840%22%20height%3D%221202%22%20viewBox%3D%220%200%203840%201202%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%0A%0Aversion%3D%221.1%22%0AbaseProfile%3D%22full%22%0Axmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0Axmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%0Axmlns%3Aev%3D%22http%3A%2F%2Fwww.w3.org%2F2001%2Fxml-events%22%0A%0A%3E%0A%3Cdefs%3E%0A%3Cfilter%20id%3D%22filter0_d_380%3A12132%22%20x%3D%22-54%22%20y%3D%220%22%20width%3D%223907%22%20height%3D%221202%22%20filterUnits%3D%22userSpaceOnUse%22%20color-interpolation-filters%3D%22sRGB%22%3E%0A%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22%2F%3E%0A%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%20result%3D%22hardAlpha%22%2F%3E%0A%3CfeOffset%20dy%3D%22-9%22%2F%3E%0A%3CfeGaussianBlur%20stdDeviation%3D%226.5%22%2F%3E%0A%3CfeComposite%20in2%3D%22hardAlpha%22%20operator%3D%22out%22%2F%3E%0A%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.15%200%22%2F%3E%0A%3CfeBlend%20mode%3D%22normal%22%20in2%3D%22BackgroundImageFix%22%20result%3D%22effect1_dropShadow_380%3A12132%22%2F%3E%0A%3CfeBlend%20mode%3D%22normal%22%20in%3D%22SourceGraphic%22%20in2%3D%22effect1_dropShadow_380%3A12132%22%20result%3D%22shape%22%2F%3E%0A%3C%2Ffilter%3E%0A%3ClinearGradient%20id%3D%22paint0_linear_380%3A12132%22%20x1%3D%221900.47%22%20y1%3D%22245.905%22%20x2%3D%221899.95%22%20y2%3D%221002.27%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%0A%3Cstop%20stop-color%3D%22%233B76B0%22%2F%3E%0A%3Cstop%20offset%3D%221%22%20stop-color%3D%22%234D94C2%22%2F%3E%0A%3C%2FlinearGradient%3E%0A%3C%2Fdefs%3E%0A%3C%2Fsvg%3E) no-repeat; background-size: 2000px 1000px;">ывапываап</div>

[IvanRivan]

Rsa97, код вашего svg работает в качестве фона после Encode URL, а вот мой не работает почему то.

[Rsa97]

IvanRivan, Так у вас в SVG только раздел defs, то есть определения элементов. Ни одного элемента в нём нет, показывать нечего.

[IvanRivan]

Rsa97, ну как же нечего, когда svg файл открывается в браузере (IE/Chrome) то видно изображение вполне реальное. И если тег object задействовать в html то тоже видно изображение.

[Rsa97]

IvanRivan, А вот когда я его открываю в Inkscape, то вижу только пустую страницу. А хром мне показывает ошибку "error on line 9 at column 37: Attribute xmlns redefined"

Содержимое вашего SVG

<svg
  width="3840"
  height="1202"
  viewBox="0 0 3840 1202"
  fill="none"
  xmlns="http://www.w3.org/2000/svg" 
  version="1.1"

  baseProfile="full"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  xmlns:ev="http://www.w3.org/2001/xml-events"
>
<defs>
<filter id="filter0_d_380:12132" x="-54" y="0" width="3907" height="1202" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-9"/>
<feGaussianBlur stdDeviation="6.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_380:12132"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_380:12132" result="shape"/>
<filter>
<linearGradient id="paint0_linear_380:12132" x1="1900.47" y1="245.905" x2="1899.95" y2="1002.27" gradientUnits="userSpaceOnUse">
<stop stop-color="#3B76B0"/>
<stop offset="1" stop-color="#4D94C2"/>
</linearGradient>
</defs>
</svg>

[Максим]

Rsa97, даже можно просто в линию всё содержимое свг написать

[IvanRivan]

Rsa97,

<svg width="3840" height="1202" viewBox="0 0 3840 1202" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_380:12132)">
<path d="M3840 22C2240.86 22 2410.57 1364.93 -41 525.286V1198H3840V22Z" fill="url(#paint0_linear_380:12132)"/>
</g>
<defs>
<filter id="filter0_d_380:12132" x="-54" y="0" width="3907" height="1202" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-9"/>
<feGaussianBlur stdDeviation="6.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_380:12132"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_380:12132" result="shape"/>
</filter>
<linearGradient id="paint0_linear_380:12132" x1="1900.47" y1="245.905" x2="1899.95" y2="1002.27" gradientUnits="userSpaceOnUse">
<stop stop-color="#3B76B0"/>
<stop offset="1" stop-color="#4D94C2"/>
</linearGradient>
</defs>
</svg>

Этот код незначительно отличается - проверил, у меня сама картинка в отрыве от html открывается. В html опять же не отображается.

[IvanRivan]

Brasileiro,

<div style="width:2000px; height:1000px; background: url(data:image/svg+xml,'<svg width="3840" height="1202" viewBox="0 0 3840 1202" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(#filter0_d_380:12132)"><path d="M3840 22C2240.86 22 2410.57 1364.93 -41 525.286V1198H3840V22Z" fill="url(#paint0_linear_380:12132)"/></g><defs><filter id="filter0_d_380:12132" x="-54" y="0" width="3907" height="1202" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="-9"/><feGaussianBlur stdDeviation="6.5"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_380:12132"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_380:12132" result="shape"/></filter><linearGradient id="paint0_linear_380:12132" x1="1900.47" y1="245.905" x2="1899.95" y2="1002.27" gradientUnits="userSpaceOnUse"><stop stop-color="#3B76B0"/><stop offset="1" stop-color="#4D94C2"/></linearGradient></defs></svg>') no-repeat; background-size: 2000px 1000px;">ывапываап</div>

Так? Не работает, код как текст на странице отображается.

[Rsa97]

IvanRivan,

[IvanRivan]

Rsa97, не отображается изображение ни в codepen, ни в браузере у меня.

[Rsa97]

IvanRivan, А сейчас? У вас ещё ошибка в SVG - двоеточия в id не допускаются.

[Ankhena]

Rsa97, Brasileiro, с двоеточиями это какая-то новая беда в Фигме. Не знаете, случайно, как ей сказать, чтобы перестала так делать?

[IvanRivan]

Rsa97, сейчас отображается, но хотелось бы на svg ссылки указывать, а не картинки в виде кода. Их большое количество может быть и когда это все сверстается, получится не очень.

[IvanRivan]

В общем фигма портит синтаксис svg при экспорте, добавляя двоеточия там, где не надо. Убрал все упоминания :12132 и заработало, спасибо пользователю Ankhena.