Svg не отображается на сайте

Svg не отображается на сайте

Я разместил зеленое изображение png в качестве фона для div и выглядит так:

Я использовал CSS-хак, чтобы сохранить текст внутри зеленого фона. Итак, это мой HTML для этого раздела:

Теперь я хочу заменить png файлом svg, и единственное, что я изменил в CSS, это расширение файла:

Но когда я просматриваю это в браузере, я больше не вижу фона:

Что я делаю неправильно? Вы можете увидеть демонстрационную страницу с фоновым изображением png здесь.

Благодарим вас за помощь.

РЕДАКТИРОВАТЬ: Здесь ссылка Dropbox на файл SVG.

Возможно, вы уже это сделали, но я предлагаю абсолютно уверенно убедиться в том, что tech_bg.svg находится в каталоге, который он должен был (папка img), и что он записан точно так же, как и в текстовом редакторе, включая чувствительность к регистру имени файла и расширения файла. GitHub, конечно, воспринимает повышенную чувствительность к регистру буквально, и у меня возникли проблемы с загрузкой SVG файлов по той же причине (.svg vs .SVG).

Это решение для OP, см. комментарии для специфики: Следующий вопрос. Я спрошу, как вы сделали SVG? Какое программное обеспечение вы использовали, и уверены, что вы правильно сгенерировали его в Illustrator? Там довольно конкретный способ сделать это.

Единственное, что приходило в голову, заключалось в увеличении z-index от #aboutprocess , особенно если ваш текст действительно исчез (я предполагаю, что он все еще там, просто белый, но попробуйте выделить его, чтобы убедиться). Играйте с другими значениями CSS рядом, как без повтора, слева, сверху и т.д. Тоже.

Попробуйте очистить кеш браузера и обновить его один раз, а также попробовать другие браузеры. Кроме того, если вы случайно используете IE8 и ниже или Android 2.3 и ниже, это определенно будет причиной.

Читайте также:  Need for speed carbon широкоэкранное разрешение

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

Хочу на сайте добавить svg, для этого написал:

Проблема в том, что в Firefox и IE данная конструкция работает, а в Chrome нет. В браузере в место картинки пустота, хотя в DOM элемент есть. Подскажите, как исправить. Код svg файла:

1 ответ 1

У вас в svg-файле написано img/png . Это некорректный MIME-тип, поменяйте на image/png и в Chrome всё заработает

(но вообще какой смысл пихать растровую png-картинку в векторный svg-файл?)

Это код svg-ки, у меня она названа как 3.svg.

так ее вставляю в html страницу.

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

1 ответ 1

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

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

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

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

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

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

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

Ссылка на основную публикацию
Adblock detector