Изображения SVG вообще не работают в Microsoft Edge

Вот HTML-код, который я пробовал:

<html> <img src = "Contact2.svg" alt = "contact" /> </html>

Вот результат в каждом браузере, кроме Edge: Нормальное изображение

Вот результат того же файла в Edge: Искаженное изображение

Я также пробовал использовать тег svg прямо в файле, но результат тот же. Рассматриваемый svg слишком велик для прикрепления (Stack Overflow не позволяет мне его добавить), но я могу найти способ загрузить его, если необходимо, чтобы диагностировать проблему.

Неужели нет возможности включать файлы SVG в Edge? Если нет, то какие у меня варианты?

редактировать Вот начало файла svg, который был автоматически сгенерирован программой создания svg, vectr:

<?xml version = "1.0" encoding = "UTF-8" standalone = "no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version = "1.1" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" preserveAspectRatio = "xMidYMid meet" viewBox = "19 99 849.3178264315773 94" width = "845.32" height = "90"><defs><path d = "M127.27 173.8C127.27 182.74 119.53 190 110 190C100.47 190 92.73 182.74 92.73 173.8C92.73 164.85 100.47 157.59 110 157.59C119.53 157.59 127.27 164.85 127.27 173.8Z" id = "b1jyYeVtTq"></path><text id = "b1lWAjMtn8" x = "360.2" y = "276.32" font-size = "20" font-family = "Open Sans" font-weight = "normal" font-style = "normal" letter-spacing = "0" alignment-baseline = "before-edge" transform = "matrix(1 0 0 1 -256.01590652958953 -115.99016726043811)" style = "line-height:100%" xml:space = "preserve" dominant-baseline = "text-before-edge"><tspan x = "360.2" dy = "0em" alignment-baseline = "before-edge" dominant-baseline = "text-before-edge" text-anchor = "start">1</tspan></text><style id = "opensansnormalnormal">
    @font-face {
    font-family: "Open Sans";
    font-weight: normal;
    src: url("data:font/ttf;base64,AAEAAAATAQAABAAwRFNJR54SRB0AAzucAAAVdEdERUYAJgOvAAM3fAAAAB5HUE9TCzcPNwADN5wAAAA4R1NVQg4rPbcAAzfUAAADxk9TLzKhPp7JAAABuAAAAGBjbWFwKasvaAAAELQAAAQaY3Z0IA9NGKQAAB2QAAAAomZwZ21+YbYRAAAU0AAAB7RnYXNwABUAIwADN2wAAAAQZ2x5ZnQ4mUsAACWMAAEvtGhlYWT3duKmAAABPAAAADZoaGVhDcwJcwAAAXQAAAAkaG10eOg1PN0AAAIYAAAOmmtlcm5UKwl+AAFVQAABtjZsb2NhKRTc8QAAHjQAAAdWbWF4cAVDAgoAAAGYAAAAIG5hbWVzsIiFAAMLeAAABcdwb3N0AkPvbAADEUAAACYrcHJlcEO3lqQAAByEAAABCQABAAAAARmaIcf1X18PPPUACQgAAAAAAMk1MYsAAAAAyehMTPua/dUJoghiAAAACQACAAAAAAAAAAEAAAiN/agAAAms+5r+ewmiAAEAAAAAAAAAAAAAAAAAAAOjAAEAAAOqAIoAFgBWAAUAAgAQAC8AXAAAAQ4A+AADAAEAAwS2AZAABQAIBZoFMwAAAR8FmgUzAAAD0QBmAfEIAgILBgYDBQQCAgTgAALvQAAgWwAAACgAAAAAMUFTQwBAACD//QYf/hQAhAiNAlggAAGfAAAAAARIBbYAAAAgAAMEzQDBAAAAAAQUAAACFAAAAiMAmAM1AIUFKwAzBJMAgwaWAGgF1wBxAcUAhQJeAFICXgA9BGoAVgSTAGgB9gA/ApMAVAIhAJgC8AAUBJMAZgSTALwEkwBkBJMAXgSTACsEkwCFBJMAdQSTAF4EkwBoBJMAagIhAJgCIQA/BJMAaASTAHcEkwBoA28AGwcxAHkFEAAABS8AyQUMAH0F1QDJBHMAyQQhAMkF0wB9BecAyQKqAFQCI/9gBOkAyQQnAMkHOQDJBggAyQY7AH0E0QDJBjsAfQTyAMkEZABqBG0AEgXTALoEwwAAB2gAGwSeAAgEewAABJEAUgKiAKYC8AAXAqIAMwRWADEDlv/8BJ4BiQRzAF4E5wCwA88AcwTnAHMEfQBzArYAHQRiACcE6QCwAgYAogIG/5EEMwCwAgYAsAdxALAE6QCwBNUAcwTnALAE5wBzA0QAsAPRAGoC0wAfBOkApAQCAAAGOQAXBDEAJwQIAAIDvgBSAwgAPQRoAe4DCABIBJMAaAIUAAACIwCYBJMAvgSTAD8EkwB7BJMAHwRoAe4EIQB7BJ4BNQaoAGQC1QBGA/oAUgSTAGgCkwBUBqgAZAQA//oDbQB/BJMAaALHADECxwAhBJ4BiQT0ALAFPQBxAiEAmAHRACUCxwBMAwAAQgP6AFAGPQBLBj0ALgY9ABoDbwAzBRAAAAUQAAAFEAAABRAAAAUQAAAFEAAABvz//gUMAH0EcwDJBHMAyQRzAMkEcwDJAqoAPAKqAFQCqv//AqoAPAXHAC8GCADJBjsAfQY7AH0GOwB9BjsAfQY7AH0EkwCFBjsAfQXTALoF0wC6BdMAugXTALoEewAABOMAyQT6ALAEcwBeBHMAXgRzAF4EcwBeBHMAXgRzAF4G3QBeA88AcwR9AHMEfQBzBH0AcwR9AHMCBv/aAgYAqQIG/7MCBv/sBMUAcQTpALAE1QBzBNUAcwTVAHME1QBzBNUAcwSTAGgE1QBzBOkApATpAKQE6QCkBOkApAQIAAIE5wCwBAgAAgUQAAAEcwBeBRAAAARzAF4FEAAABHMAXgUMAH0DzwBzBQwAfQPPAHMFDAB9A88AcwUMAH0DzwBzBdUAyQTnAHMFxwAvBOcAcwRzAMkEfQBzBHMAyQR9AHMEcwDJBH0AcwRzAMkEfQBzBHMAyQR9AHMF0wB9BGIAJwXTAH0EYgAnBdMAfQRiACcF0wB9BGIAJwXnAMkE6QCwBecAAATpABQCqv/iAgb/kAKqACoCBv/aAqoAHgIG/8wCqgBUAgYANQKqAFQCBgCwBM0AVAQMAKICI/9gAgb/kQTpAMkEMwCwBCUAsAQnAMkCBgCjBCcAyQIGAFkEJwDJAgYAsAQnAMkCgwCwBC8AHQIX//wGCADJBOkAsAYIAMkE6QCwBggAyQTpALAFcwABBggAyQTpALAGOwB9BNUAcwY7AH0E1QBzBjsAfQTVAHMHYgB9B4kAcQTyAMkDRACwBPIAyQNEAGAE8gDJA0QAggRkAGoD0QBqBGQAagPRAGoEZABqA9EAagRkAGoD0QBqBG0AEgLTAB8EbQASAtMAHwRtABIC0wAfBdMAugTpAKQF0wC6BOkApAXTALoE6QCkBdMAugTpAKQF0wC6BOkApAXTALoE6QCkB2gAGwY5ABcEewAABAgAAgR7AAAEkQBSA74AUgSRAFIDvgBSBJEAUgO+AFICjwCwBJ4AwwUUAAAEcwBeBvz//gbdAF4GOwB9BNUAcwRkAGoD0QBqBLwBDAS8AQwEsgEtBLwBJQIGAKIEngFvAZMAJQS8AQgEngDnBJ4B/ASeARsFEAAAAiEAmATy/9QGff/UA5j/5AaB/+QFhf/UBoH/5AK2/+kFEAAABS8AyQQpAMkEkwAnBHMAyQSRAFIF5wDJBjsAfQKqAFQE6QDJBNMAAAc5AMkGCADJBG0ASAY7AH0F1QDJBNEAyQSJAEoEbQASBHsAAAZiAGoEngAIBl4AbQZCAFACqgA8BHsAAATjAHMDzQBaBOkAsAK2AKgE3wCkBOMAcwUGALAEGQAKBKQAcQPNAFoD3QBzBOkAsAS8AHMCtgCoBCUAsARG//

Если SVG не отображается должным образом, то нам нужно видеть именно SVG. Ваш вопрос в настоящее время не содержит полезной информации, с помощью которой можно было бы даже предположить диагноз. Попробуйте уменьшить размер SVG до минимума, необходимого для демонстрации проблемы, а затем опубликуйте это. Под размером я имею в виду размер файла (количество объектов).

— 08.08.2018 13:51

Хорошо, спасибо, Пол; Срублю SVG и обновлю пост.

— 08.08.2018 13:53

Здесь вы найдете основную информацию и методы использования svgs в html. css-tricks.com/using-svg, также я рекомендую посмотреть эту презентацию: slides.com/sarasoueidan/building-better-interfaces-with-svg# после этого у вас должно быть хорошее представление о том, что, возможно, пошло не так с вашим svg.

— 08.08.2018 14:08

Спасибо за ваш вклад. Решением оказалось то, что Vectr, программное обеспечение, которое я использовал для создания своих значков SVG, генерировало длинный и сложный код, который Edge не мог расшифровать. Вместо этого использование Photoshop оказалось успешным.

— 09.08.2018 23:32

html css image svg microsoft-edge

08.08.2018 13:42

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

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

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

2 299

Другие вопросы по теме

Повторять функцию бесконечное количество раз

Установка размера шрифта тега body

Встраивание видео YouTube в полноэкранный фон

Свойство overscroll-behavior не работает в веб-просмотре

CSS выровнять подменю по родительскому элементу

Настройка фиксированного меню и содержимого страницы с помощью CSS

Наложение градиента перед кнопкой - не кликабельно

Проверьте функции перед отправкой в jquery

CSS как увеличить высоту снизу вверх

Фон веб-сайта не закрывает левую и правую часть строки меню

Изображения SVG вообще не работают в Microsoft Edge

Другие вопросы по теме

Похожие вопросы