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

Ответ 1

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

Источники:

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

Ответ 2

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

Здесь можно найти полную матрицу совместимости браузера.

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

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

Ответ 3

• caniuse.com - SVG

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

Ответ 4

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

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

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

Ответ 5

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

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

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

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

Ответ 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>

Ответ 7

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

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

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

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

Ответ 8

Если я работаю с элементами <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.

Ответ 9

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

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

Ответ 10

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

caniuse.svg()