Почему не отображается svg
Перейти к содержимому

Почему не отображается svg

  • автор:

Почему не отображается svg файл

Создаю модальное окно, и добавил svg картинку в качестве крестика(закрытия модального окна), но оно не отображается. Вот код:

 
.closeButton < position: absolute; background-image: url(../image/close.svg); margin-left: 20px; >

Но если между div

вставить что то, то они начинают отображаться очень мелко(как текстуру как будто натянули). В чем причина?

Отслеживать
задан 13 янв 2022 в 11:25
Виктория Мот Виктория Мот
49 4 4 бронзовых знака

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Возможно, причина в том что не задан размер и дивы просто схлопываются, так как background-image не влияет на размер div . Дополнительно к этому svg обычно нуждаются в указании размера так как это векторная графика.

.closeButton < position: absolute; background-image: url('https://www.svgrepo.com/show/151290/close.svg'); margin-left: 20px; height: 20px; width: 20px; >
☰ Online list
Online

Отслеживать
ответ дан 13 янв 2022 в 11:49
Daniil Loban Daniil Loban
11.3k 2 2 золотых знака 9 9 серебряных знаков 18 18 бронзовых знаков

  • html
  • css
    Важное на Мете
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.4.30.8466

Почему не отображается SVG, добавленное с помощью тега

Если вставлять код svg, то все отображается, а если другим способом, то что-то не хочет, в чем может быть дело?

Отслеживать
110k 23 23 золотых знака 114 114 серебряных знаков 386 386 бронзовых знаков
задан 17 янв 2019 в 8:37
Настя Силаева Настя Силаева
183 1 1 серебряный знак 5 5 бронзовых знаков
Это не svg изображение. Данное изображение получается png.
17 янв 2019 в 8:47
Все работает. Может путь неправильно прописан?
17 янв 2019 в 10:58

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Лучше не брать svg изображения формата base64 по многим причинам:

  • Это не 100% svg, а формат png обернутый в оболочку svg, поэтому не будет адаптивности, которую ожидаем от формата SVG
  • Изображение не будет стилизоваться (менять цвет)
  • Посмотрите, как выглядит ваша иконка при небольшом увеличении

введите сюда описание изображения

Проще скачать нужную иконку в формате svg с любого векторного клипарта

На первых порах освоения svg добавляйте иконки инлайн, то есть непосредственным копированием кода в HTML

Теперь легко применить стили из внешней css, к нашей иконке, например при наведении. (не забудьте удалить стили внутри svg, чтобы они не мешали)

#icon < fill:black; stroke:black; transition: .5s ease-out all; >#icon:hover

Чтобы сделать иконку адаптивной

Необходимо убрать width=»70″ , height=»70″ из шапки svg файла. Обернуть иконку в контейнер и задать в процентах ширину и высоту контейнера

.container < width:10%; height:10%; >#icon < fill:black; stroke:black; transition: .5s ease-out all; >#icon:hover

Почему svg не отображается?

Добрый день. Скажите пожалуйста почему при подключении файла не отображается svg, ide говорит мол нельзя отобразить картинку, ищите проблему, погуглил, нашёл xmlns и xlink, но не понял что это и зачем толком. Вот это в файле img.svg:

  • Вопрос задан более трёх лет назад
  • 6627 просмотров

Комментировать
Решения вопроса 0
Ответы на вопрос 2

rasschitai

rasschitai @rasschitai
Калькуляторы онлайн
сходи на wiki , там все доступно
Ответ написан более трёх лет назад
Нравится 1 2 комментария
historydev @historydev Автор вопроса

То-ли я не догоняю, то-ли это не так работает — как это вижу я:

Пустой квадрат. Спасибо

Почему не отображается svg?

В хроме svg-иконка вообще не отображается, только видна задействованная область,
в Сафари, например, отображается только часть иконки черным цветом.
В теге img отображается корректно везде.
Почему так происходит? Как исправить?

Плагин спрайта собирает обычно хорошо и svg отображается нормально.

UPD. Нашла роблему — не отображается именно linearGradient в svg.

  • Вопрос задан более трёх лет назад
  • 999 просмотров

2 комментария

Средний 2 комментария

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *