- PVSM.RU - https://www.pvsm.ru -
Продолжаю серию топиков про SVG. Векторные SVG-элементы корректно отображаются в современных браузерах, но как реализовать поддержку в старых версиях? Разберемся с кроссбраузерностью векторной графики.
Предыдущие топики о SVG:
Если в файле .svg хранится графика, то можно использовать элемент object на странице:
<object data='images/apple.svg'></object>
При использовании следующей конструкции, браузеры, поддерживающие SVG, будут отображать векторные элементы корректно, остальные же покажут .png файл (Демонстрация [4]):
<object data='images/apple.svg'>
<img src='images/apple.png'/>
</object>
Основным недостатком этого способа является немасштабируемость PNG-изображений.
В этом способе используются JavaScript-библиотеки Modernizr.js [5] и Raphael.js [6]. Прежде всего необходимо конвертировать SVG-файлы в формат, поддерживающийся Raphael. В этом нам поможет инструмент ReadySetRaphael.js [7]. Подключаем Modernizr.js:
<script type="text/javascript" src="scripts/modernizr.js"></script>
Затем, в случае не поддерживающего браузера, необходимо подключить Raphael.js, а также svg.js — файл, получившийся после конвертации.
if (!Modernizr.inlinesvg) {
document.write(
'<script type="text/javascript" src="scripts/raphael.js"></script>',
'<script type="text/javascript" src="scripts/svg.js"></script>'
);
}
Теперь осталось только добавить HTML-разметку. В коде ниже SVG-файл включен непосредственно в HTML-код страницы, чтобы обеспечить работу Raphael:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="280px" viewBox="0 0 500 280" enable-background="new 0 0 500 280" xml:space="preserve">
<path fill="#333333" d="M296.908,120.622c-8.77,6.201-13.158,13.676-13.158,22.41c0,10.458,5.425,18.479,16.262,24.076
c-2.908,8.435-7.122,15.764-12.65,22.009c-5.516,6.243-10.553,9.368-15.11,9.368c-2.147,0-5.075-0.718-8.794-2.133l-1.782-0.687
c-3.646-1.416-6.854-2.133-9.656-2.133c-2.641,0-5.535,0.555-8.679,1.665l-2.237,0.807l-2.818,1.154
c-2.218,0.884-4.468,1.326-6.725,1.326c-5.328,0-11.208-4.387-17.642-13.161c-9.273-12.567-13.905-26.264-13.905-41.085
c0-10.538,2.886-19.02,8.678-25.46c5.78-6.432,13.446-9.658,22.979-9.658c3.566,0,6.897,0.653,10,1.958l2.129,0.865l2.238,0.92
c1.992,0.84,3.601,1.264,4.825,1.264c1.569,0,3.316-0.364,5.231-1.094l2.929-1.151l2.19-0.804c3.483-1.262,7.34-1.896,11.555-1.896
C282.777,109.183,290.814,112.996,296.908,120.622z M273.238,82.575c0.108,1.344,0.167,2.378,0.167,3.102
c0,6.628-2.412,12.442-7.237,17.443c-4.823,5-10.438,7.494-16.837,7.494c-0.189-1.493-0.29-2.563-0.29-3.212
c0-5.635,2.239-10.924,6.726-15.864c4.482-4.939,9.671-7.838,15.575-8.678C271.754,82.787,272.395,82.696,273.238,82.575z"/>
</svg>
<div id="applelogo"></div>
Вспоминая прошлую статью [8], добавим текста под SVG-файл:
<text x="210" y="250">This is SVG</text>
Вот, что получилось (Демонстрация [4]):
Еще один инструмент для реализации поддержки SVG старыми браузерами — это JavaScript-библиотека SVGWeb [9]. После подключения ее на страницу можно располагать SVG-элементы так:
<script type="image/svg+xml">
<svg ...>...</svg>
</script>
В XHTML необходимо использовать CDATA:
<script type="image/svg+xml"><![CDATA[
<svg ...>...</svg>
]]></script>
Описанные примеры кроссбраузерности SVG-графики не идеальны, однако подходят в качестве решения для большинства проблем с корректным отображением векторной графики в старых браузерах.
Использованные материалы:
Автор: grokru
Источник [12]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/veb-dizajn/20878
Ссылки в тексте:
[1] Знакомство с SVG-графикой: http://habrahabr.ru/post/157087/
[2] Стилизация SVG-графики: http://habrahabr.ru/post/157965/
[3] Текст в SVG: http://habrahabr.ru/post/159017/
[4] Демонстрация: http://koulikov.com/wp-content/uploads/2012/11/svg4/
[5] Modernizr.js: http://modernizr.com/
[6] Raphael.js: http://raphaeljs.com/
[7] ReadySetRaphael.js: http://readysetraphael.com/
[8] прошлую статью: http://koulikov.com/2012/11/text-svg/
[9] SVGWeb: http://code.google.com/p/svgweb/
[10] Using SVG for Flexible, Scalable, and Fun Backgrounds, Part II: http://www.alistapart.com/articles/using-svg-for-flexible-scalable-and-fun-backgrounds-part-ii
[11] Adding Scalable Vector Graphics (SVG) In Unsupported Browser: http://www.hongkiat.com/blog/adding-scalable-vector-graphics-svg-in-unsupported-browser/
[12] Источник: http://habrahabr.ru/post/159947/
Нажмите здесь для печати.