Статьи

Изящный запасной вариант для SVG в старом IE

Сентябрь 10, 2018

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

В следующих разделах я опишу, как вы можете изящно справиться с этим, вернувшись к PNG для старых браузеров. Это будет касаться как встроенных SVG, так и фоновых изображений.

Создайте свои резервные изображения

Первый шаг — создать версию PNG для каждого из ваших SVG. Вы можете сделать это с вашим предпочтительным программным обеспечением для редактирования изображений, но это может быть медленным процессом, если у вас много SVG. Кроме того, вы можете использовать Grunt и модуль Grunt с именем svg2png . Это решение, которое я буду описывать в следующих шагах.

Если вы не знакомы с Grunt, я рекомендую вам прочитать это руководство по началу работы . В противном случае вы можете начать, подготовив проект Grunt и выполнив следующую команду: 

npm install grunt-svg2png --save-dev`

Настройте свой файл Grunt

Настройте файл Grunt со следующими дополнениями: 

 grunt.loadNpmTasks('grunt-svg2png');

grunt.initConfig({
    svg2png: {
        all: {
            files: [
                { cwd: 'img/', src: ['**/*.svg'], dest: 'img/png/' }
            ]
        }
    }
});

Убедитесь, что свойство cwd Как только это будет сделано, запустите grunt svg2png

Обработка встроенных SVG

Если вы используете SVG в качестве встроенных изображений, наиболее надежным вариантом является добавление встроенного события onerror 

 <img src="/img/image.svg" onerror="this.src='/img/image.png';this.onerror=null;">

Это заменит SVG для изображения PNG, если SVG не загружается. Я также добавил дополнительный бит в конце: this.onerror=null; , Это сделано для того, чтобы событие не запустилось снова, что может произойти, если возникла проблема с путем PNG. Это может вызвать бесконечный цикл вызовов событий, чего, очевидно, лучше избегать.

Вы можете быть удивлены, почему я предлагаю встроенное событие здесь, а не менее навязчивый подход к прикреплению события в отдельном файле JavaScript. Это связано с тем, что jQuery использует $("img").on("error", handler); не будет работать в IE8 и ниже из-за проблем с синхронизацией, а другой вариант циклического прохождения всех изображений и прикрепления к ним события ошибки будет истощать ресурсы для всех браузеров, если только вы не нацелены на более старые.

Обработка SVG как фона

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

 background: url('/img/image.png') no-repeat;
background: none,
            url('/img/image.svg') no-repeat;

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

IE8 и ниже будут рассматривать второе объявление как ошибку, поэтому будут игнорировать всю строку, используя только первый фон.

Вывод

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

Если у вас есть какое-то другое автоматизированное решение для работы с SVG в IE8 и ниже, я хотел бы услышать об этом.

33
Share: