svg не отображается в браузере Chrome
Проблема в том, что в Firefox и IE данная конструкция работает, а в Chrome нет. В браузере в место картинки пустота, хотя в DOM элемент есть. Подскажите, как исправить.
Ответы (3 шт):
нужно указать тип, к примеру type=»image/svg+xml»
Если Вы хотите реально получить помощь в решении вашей проблемы, то необходимо давать максимально возможное количество информации. Прежде всего нужен код вашего SVG изображения.
- А сейчас остается только гадать, так как вы привели один из многочисленных способов добавления svg в HTML. И этот способ работает во всех браузерах включая IE11 , при нахождении svg изображения, как локально, так и удаленно.
Пример загрузки внешнего svg
- Если у вас локальный файл svg нормально отображается в браузерах, но не виден в вашей HTML страничке, то может стоит поискать ошибки в верстке?
Ниже пример респонсивного svg
У меня был проблема в сохранении SVG в Иллюстраторе. Вот параметры при которых svg стал отображаться.
Почему не отображается SVG, добавленное с помощью тега <img>
Если вставлять код svg, то все отображается, а если другим способом, то что-то не хочет, в чем может быть дело?
Лучше не брать svg изображения формата base64 по многим причинам:
- Это не 100% svg, а формат png обернутый в оболочку svg, поэтому не будет адаптивности, которую ожидаем от формата SVG
- Изображение не будет стилизоваться (менять цвет)
- Посмотрите, как выглядит ваша иконка при небольшом увеличении
Проще скачать нужную иконку в формате svg с любого векторного клипарта
На первых порах освоения svg добавляйте иконки инлайн, то есть непосредственным копированием кода в HTML
Теперь легко применить стили из внешней css, к нашей иконке, например при наведении. (не забудьте удалить стили внутри svg, чтобы они не мешали)
Чтобы сделать иконку адаптивной
Необходимо убрать width=»70″ , height=»70″ из шапки svg файла. Обернуть иконку в контейнер и задать в процентах ширину и высоту контейнера
Chrome не показывает файл SVG
У меня есть иллюстрация SVG, встроенная в файл HTML5, которая работает во всех современных браузерах, когда я пытаюсь использовать ее на локальном компьютере, но когда я пытаюсь обслуживать их из Интернета, я не хочу, чтобы Chrome отображал изображение SVG, он отображает только Исходный код SVG. Я уже добавил эти строки в файл .htaccess, который решил проблемы в Safari и Firefox:
Но Chrome теперь единственный браузер, который не отображает изображение, когда приходит из Интернета. Мой локальный файл отлично работает даже в Chrome.
Что мне не хватает?
Вот ссылка на образец проблемы, попробуйте в Safari и Firefox, это сработает. Но в Chrome история отличается.
Не могу разобраться с svg #101
Добрый день.
Вижу несколько тем с svg, но со своим вопросом так и не разобрался.
На localhost работает отображение иконок use(xlink:href=’/assets/images/icon.svg#icon_#
В моем случае иконки — файлы box.svg и checked.svg
Уже везде куда можно поместил мои svg иконки, но не видит их страница.
The text was updated successfully, but these errors were encountered:
Да, лежит, его не трогал.
Если хостишь на гитхабе, то пути до всех ресурсов должны быть относительно страницы, а не от корня.