Поддержка браузера .SVG

Question

Я работаю над адаптивным дизайном и думаю о создании значков навигации в виде файлов .svg.Какова текущая поддержка браузера и есть ли обходной путь / плагин для более старых версий браузера?

Answer 1

Все основные браузеры поддерживают годами, кроме <= IE8.Обходным решением может быть, например, RaphaelJS. </p>

Источники:

• http://caniuse.com/#search=svg
• https://github.com/DmitryBaranovskiy/raphael

Answer 2

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

Полная матрица совместимости браузера приведена здесь .

Обходной путь для старых версий IE заключается в использовании VML .Если требуется поддержка IE6, и вы рисуете с кодом, Raphael.js выполнит эту проверку совместимости для вас и выполнит визуализацию с использованием VML или SVG, когда это необходимо.Но если вы загружаете необработанный файл SVG и используете его в качестве источника изображения, который не будет работать.

Еще один вариант для старых браузеров - использовать JavaScript-библиотеку canvg .Это чистый SVG-анализатор JavaScript, который выводит полученное изображение на холст, но это может быть излишним.

Answer 3

... или вы можете разрешить серверу apache работать с ним:

RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} MSIE\s[5-8]\.
RewriteCond %{REQUEST_FILENAME} ^.+?\.svg$
RewriteRule ^(.+?)\.(?:svg)$ $1\.png [L]

вам нужно только создавать версии .png каждого файла .svg, и не имеет значения, предназначен ли файл для cssфон или для тега img.

Answer 4

• caniuse.com - SVG

отредактировано: Я имел обыкновение ссылаться на очень хорошую таблицу сравнения SVG, но она не обновлялась с 2011 года, поэтому она больше не актуальна.

Answer 5

Стоит отметить, что если вам нужна поддержка <= IE8, вы можете достаточно легко внедрить GoogleChromeFrame, чтобы получить искомую поддержку SVG ... </p>

Хотя вы можете обнаружить, что у каждого браузера есть своймаленькие причуды в отношении особенностей спец.У меня были проблемы с динамически создаваемыми узлами, которые используют фильтры, и animateMotion слишком долго оставался ошибкой в ​​Google Chrome ... (по этой причине мы используем FF5 + в качестве наших интерактивных интерфейсов, Safari тоже становится лучше)

IMO, если только все приложение не является SVG, я бы просто использовал PNG для ваших иконок, если вы не хотите, чтобы они хорошо масштабировались!:)

... но если вы просто хотите поиграть с SVG, Giv'er!;)

Answer 6

¡С элементом объекта!

<object data="example.svg" type="image/svg+xml">
     <!-- If browser don't soport / don't find SVG  -->
     <img src="example.png" alt="Logotype" />
</object>

Answer 7

Если я работаю с <img> элементами (в отличие от фоновых изображений CSS), я использую удобный обходной путь, комбинацию Modernizr (библиотека JavaScript, которая обнаруживает наличие определенных функций,, такие как поддержка .svg, в браузерах) и несколько строк jQuery:

$(".no-svg img").each(function() {
    var $this = $(this);
    if ($this.attr("src").indexOf(".svg") > -1) {
        var isSvg = $this.attr("src").toString();
        var isPng = isSvg.replace(".svg", ".png");
        $this.attr("src", isPng);
    }
});

1) Я создаю .png версии каждого файла .svg.2) Modernizr присваивает элементу html класс .no-svg, если обнаруживает отсутствие поддержки .svg.3) JQuery меняет расширения файлов..indexOf(".svg") проверяет, содержится ли строка ".svg" в значении src, возвращая -1, если она не находит, и положительное целое число, если это так.Если он находит ".svg", вся строка src перетягивается в isSvg, а .replace() заменяет .svg на .png и сохраняет результат как isPng, который затем устанавливается как значение src.

Answer 8

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

Для браузеров, которые не поддерживают svg, вы можете присвоить телу класс 'no-svg'.

В вашем CSS просто добавьте '.no-svg .yourimageclass' и поместите вместо него png. (Переопределите его)

Boilerplate HTML5 дает вам класс no-svg уже по умолчанию с некоторой магией javascript. (например, для IE8)

Answer 9

Вы можете использовать скрипт caniuse.js , чтобы определить, поддерживает ли ваш браузер SVG или нет:

caniuse.svg()

Answer 10

Для фоновых изображений вот простой способ вернуться к фонам PNG для старых браузеров:

http://signaltower.co/2013/02/25/add-png-fallbacks-for-svg-files/