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

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

  • автор:

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

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

Отслеживать
110k 23 23 золотых знака 114 114 серебряных знаков 382 382 бронзовых знака
задан 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

Использую и работаю в исходниках project-stub. Есть блок с названием advantages. У него есть элемент ‘icon’ с модификатором ‘type’. В папке _type лежат иконки(svg) и css файлы с путями до иконок. Пример:

/* advantages__icon_type_innovation.css */ .advantages__icon_type_innovation

При сборке проекта и обновлении страницы, пути верные и нет ошибок. Но в иконках указан путь в формате: background-image: url(data:image/svg+xml;charset=US-ASCII. ) И иконки не отображаются. Возможно ли, что не правильный способ кодирования svg и как бороться с этим? Стоит отметить, что с png всё работает.

Комментарии: 2
7 years ago

Если переключить эту опцию на rebase ( require(‘postcss-url’)(< url: 'rebase' >) ), станет ли лучше?

7 years ago

Действительно стало лучше. Теперь всё работает, большое спасибо за ответ!

Не отображается встроенное изображение в .svg на сайте?

есть файл .svg в нем есть графика + картинка .png
нужно это отобразить на главном экране сайта, НО встроенный .png не хочет отображаться.
Если по ссылке просто открыть данный свг в браузере — все ок(отображается как нужно)
пример ниже — должно быть 2 квадрата красный(png) и синий(svg)

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

Комментировать

Решения вопроса 1

sfi0zy

Creative frontend developer

На MDN говорят, что это вопрос безопасности (там только про Gecko, но можно предположить, что везде так). Если SVG используется как картинка, то в ней уже нельзя подгрузить другие внешние ресурсы. Как вариант можно использовать тег embed вместо img, и все будет работать без таких ограничений.

Ответ написан более двух лет назад

Комментировать

Нравится 2 Комментировать

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

gitosik

61dc221012c4e051475143.png

с залинковкой косяк возможно.

Ответ написан более двух лет назад

Комментировать

Нравится Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

css

  • CSS
  • +1 ещё

Не работает анимация градиента в svg в Safari. В чем ошибка в коде?

  • 1 подписчик
  • 26 февр.
  • 79 просмотров

Как правильно вставлять SVG

Есть несколько способов вставки SVG-изображения. Выбор одного из них зависит от задач, которые стоят перед верстальщиком.

SVG — это формат векторной графики, дословно: масштабируемая векторная графика. МВГ? SVG! В векторных форматах хранится не само изображение, а инструкция по его построению по точкам и кривым.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

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

�PNG IH�aV PLTE�������0� IDAcZ�d���� �W= S�3�o;���]P ���IEND�B`�~ 

Формат SVG тоже можно создавать и менять в редакторах графики, например, в Illustrator или Figma. Но ещё он текстовый, а значит его можно открыть как HTML или CSS в любом редакторе кода.

SVG — это как отдельная HTML-страница. Когда вставляете SVG, вы, на самом деле, вставляете не просто картинку, а целую страницу. Со своей системой координат, вьюпортом, стилями, скриптами и удивительными особенностями.

Если смотреть на SVG как на отдельную страницу — становится понятнее, какой способ вставки вам нужен.

Первый способ

Первый и самый простой — элемент , который размещается прямо в HTML-коде. Это эффективный способ загрузить любую картинку — браузеры заранее знают по HTML-коду, что она есть и начинают её подгружать.

Минус в том, что в таком SVG не будут работать скрипты и любые попытки взаимодействия с элементами внутри обречены. Файл будет как за стеклом: смотреть можно, а трогать нельзя. Хотя внутри всё остальное прекрасно работает, включая CSS-анимации.

Такой способ лучше всего подходит контентным изображениям, которым не нужно взаимодействие: логотипы, графики, схемы.

Второй способ

Второй способ — фоновая картинка в CSS. Причём неважно, зададите вы его элементу, псевдоэлементу или контентом вставите — результат будет таким же, как с : за стеклом, но внутри что-то работает.

.picture

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

Третий способ

Третий способ — вставить содержимое SVG-файлов прямо на страницу, как любые другие теги. При таком способе подключения можно управлять стилями SVG через CSS.

С таким SVG можно делать то же, что и с обычными HTML-элементами: стили, скрипты. Можно, например, менять цвет заливки при наведении или даже анимировать векторное изображение.

.navigation-icon

width — ширина в пикселях или процентах.

height — высота в пикселях или процентах.

viewBox — положение и размер области просмотра.

Значение fill отвечает за цвет изображения.

SVG гораздо больше, чем просто формат графики — это мы с вами уже поняли. Если хотите закопаться глубже, почитайте SVG — учебное руководство от MDN Web Docs.

В итоге: способов множество и все чем-то хороши. Выбирайте подходящий под ваши задачи.

Материалы по теме

  • Как проектировать, создавать и анимировать SVG
  • Как сделать интерактивную SVG-диаграмму
  • Форматы изображений для веба

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

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

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