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

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

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

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

  • Вопрос задан более года назад
  • 170 просмотров

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

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

sfi0zy

Creative frontend developer

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

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

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

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

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

gitosik

61dc221012c4e051475143.png

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

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

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

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

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

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

css

  • CSS
  • +1 ещё

Возможно ли сделать текст в SVG масштабируемый в зависимости от заданного размера?

  • 1 подписчик
  • вчера
  • 25 просмотров

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

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

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

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

rasschitai

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

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

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

Почему не отображается 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
6 years ago

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

6 years ago

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

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

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

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

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

�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-диаграмму
  • Форматы изображений для веба

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

Читать дальше

Что такое Lazy Loading и как её включить на сайте

Что такое Lazy Loading и как её включить на сайте

Ленивая загрузка (буквально, lazy loading) — это возможность отложить загрузку ненужного прямо сейчас медиаконтента.

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

  • 22 ноября 2023

Знакомство с HTML

Знакомство с HTML

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

HTML (Hypertext Markup Language) — это стандартный язык, который используется для создания веб-страниц. Представьте, что ваша веб-страница — это книга. Тогда HTML — это скелет этой книги, костяк, который определяет структуру: где будет заголовок, абзацы, изображения и так далее.

  • 1 ноября 2023

Специальные символы в HTML

Специальные символы в HTML

HTML использует особенные комбинации символов, чтобы корректно отображать определенные знаки на веб-страницах. Например, вместо простого знака «меньше» мы видим комбинацию <. В этой статье представлен список таких символов. Это небольшой справочник для тех, кто хочет быстро найти нужный код.

  • 23 октября 2023

Простое диалоговое окно на HTML

Простое диалоговое окно на HTML

Вот короткое демо:

  • 18 октября 2023

Зачем нужен метатег viewport

Зачем нужен метатег viewport

Каждый из нас хоть раз в жизни сталкивался с веб-страницами, которые кажутся «сломанными» или странно отображаются на мобильных устройствах. Одной из причин такого поведения может быть отсутствие маленького, но важного элемента в коде страницы — метатега viewport .

Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport , который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.

Важно, чтобы сайты классно выглядели не только на компьютерах, но и на маленьких экранах смартфона. Если не использовать viewport , то сайт может выглядеть как уменьшенная версия десктопного сайта на мобильном экране, что делает его трудночитаемым и неудобным для использования. Конечно, нужно ещё много всего сделать для адаптивности, но viewport тоже нужен.

  • 18 сентября 2023

Атрибут class в HTML на примерах

Атрибут class в HTML на примерах

Атрибут class используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.

Так, одному элементу можно присвоить один или несколько классов, разделяя их пробелами.

  • 14 сентября 2023

В чём отличия цитат blockquote, cite и q

В чём отличия цитат blockquote, cite и q

В HTML есть разные теги для цитирования и указания источников. Основные из них: , и . Давайте разберёмся в их различиях.

  • 12 сентября 2023

Осмысленный alt-текст: 6 правил

Осмысленный alt-текст: 6 правил

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

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

  • 31 июля 2023

Растровая и векторная графика

Растровая и векторная графика

Давайте попробуем разобраться, в чём отличие растровой графики от векторной.

  • 13 июня 2023

Как понять, что перед вами заголовок

Как понять, что перед вами заголовок

Заголовки используются для организации и структурирования содержимого на сайте. В HTML существует шесть уровней заголовков, обозначаемых тегами от до . Каждый уровень заголовка имеет свой семантический вес, где имеет наибольший вес, а — наименьший.

Часто кажется, что заголовок — это простой и понятный тег. Но это впечатление обманчиво, потому что не всегда крупный и выделенный текст на макете является заголовком.

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

В статье разберёмся, как верно определять заголовки по макету, какие из них лучше делать скрытыми и почему.

  • 8 июня 2023

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

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