Года два назад в интернете начали появляться статьи, в которых сравнивали SVG и Canvas. В итоге сейчас не составляет особого труда найти сайт, на котором популярно объясняются плюсы и минусы использования SVG-изображений или отрисовки напрямую в Canvas.
Здесь я хотел обозначить совсем другую задачу – отобразить картинку в SVG-формате с помощью API Canvas-a. Другими словами, тема статьи не “SVG против Canvas”, а как рисовать SVG картинки внутри Canvas. Подобного рода задача возникнет, например, в случае, если у вас уже есть небольшой набор не слишком сложных SVG-файлов, и вы хотели бы их использовать, при этом ваш графический javascript-овый движок базируется на Canvas-e.
Можно выделить два основных похода:
1. Первый подход.
Парсить SVG файл JavaScript-ом и руками рисовать его в канву.
Один из самых популярных движков, которые реализуют подобный функционал это: http://code.google.com/p/canvg/
2. Второй подход.
На самом деле, многие браузеры умеют рисовать SVG файлы непосредственно в канву методом drawImage. Точно также как обычные растровые изображения (PNG, JPG и т.д.) – https://developer.mozilla.org/en-US/docs/Canvas_tutorial/Using_images.
Проблемы заключаются как всегда в том, что разные браузеры могут делать это по-разному.
В итоге пришлось провести небольшую работу для проверки отображение SVG внутри Canvas-a для различных браузеров. На момент публикации этой статьи получилась следующая картинка:
Попробуем запустить следующий пример:
<!DOCTYPE html>
<html>
<head>
<title>svg on canvas</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
</head>
<body>
<canvas id='example' width='150' height='100'></canvas>
<script>
var canvas = document.getElementById("example");
var context = canvas.getContext("2d");
context.fillRect(10, 10, canvas.width - 20, canvas.height - 20);
var image = new Image();
image.src = "./star.svg";
image.onload = function() {
context.drawImage(image, 43, 18);
};
context.drawImage(image, 43, 18);
</script>
</body>
</html>
SVG-изображение: star.svg
В итоге получим следующую картинку:
Chrome, Safari, IE 9
Firefox
В Firefox мой пример отрисовался, но с некоторыми более сложными SVG-изображениями не справился.
Opera 12.02
Наиболее забавная ситуация обстоит с браузером Opera.
Многие поисковые системы показывают большое количество ссылок на сайты, которые содержат в себе фразу:
“В браузере Opera можно также рисовать изображения SVG внутри холста. Это достаточно сложный метод… и т.д.”
На самом деле, для текущей версии Opera это не совсем верно (версия 12.02, OS Windows 7) !
Opera не всегда может рисовать SVG изображения внутри Canvas (код описания ошибки: CORE-26856)
В августе 2012 выпущен тестовый релиз с множеством исправлений.
Скачать его можно здесь: http://my.opera.com/desktopteam/blog/2012/08/03/summer-core-update
Если запускать в нём, то рисунок покажется:
Кроме отрисовки в Opera есть проблема, связанная с тем, что для SVG изображений не срабатывает событие onload.
var img = new Image();
img.onload = function() { alert('onload'); }
img.src = "a.svg";
Напоследок хотелось сказать самое главное – соблюдайте осторожность при работе с SVG-картинами!
На протяжении нескольких последних лет в браузерах находят различные уязвимости в безопасности, связанные как раз с отображением SVG внутри браузера. Конечно, многие браузеры с целью безопасности накладывают ограничения на работу с SVG, тем не менее не стоит полностью полагаться на них, поэтому желательно на этапе проектирования архитектуры учитывать различные аспекты, связанные с безопасной работой с SVG-изображениями.