Элемент HTML5 canvas используется везде. От игр WebGL до некоторых удивительных экспериментов с браузерами , веб-разработчики прыгают на холсте и наслаждаются поездкой.
Но всегда ли мы используем правильный инструмент для работы? Во многих случаях Scalable Vector Graphics (SVG) предлагает лучшую альтернативу, но легко забыть о технологии, когда она скрыта под волной рекламы холста. Если вы не рассматриваете SVG, возможно, следующие причины заставят вас подумать еще раз …
1. SVGs масштабируемы
Это должно быть очевидно, но это огромное преимущество — особенно сейчас люди используют iPad и мониторы с высоким разрешением. Это также бонус за отзывчивый дизайн, и ваш логотип или диаграмма могут масштабироваться соответственно.
2. Дизайнерские инструменты
Canvas — это программируемое изображение. Даже для импорта статической графики требуется JavaScript, и определенно невозможно определить анимацию или эффекты, не углубляясь в код.
Но каждый может создать SVG. Многие из инструментов являются бесплатными и предлагают пользовательские средства анимации. Поиграй с:
- Inkscape
- OpenOffice или LibreOffice Draw
- svg-edit — онлайн инструмент
3. Поддержка языка / структуры
Элементы Canvas управляются с помощью клиентского JavaScript. Вы можете сделать то же самое с SVG, но вы также можете создавать частичные или полные изображения заранее. Кроме того, SVG — это просто XML; Вы можете создавать или изменять их, используя любую серверную технологию.
4. Поддержка браузера
Элементы SVG и canvas поддерживаются всеми браузерами HTML5. Ни один из них не имеет встроенной поддержки в IE8 и ниже, но доступны такие шайбы, как Raphaël .
Хотя это не обязательно так, если вы выбираете SVG вместо canvas, вы, конечно же, не можете отклонить SVG на основе поддержки браузера.
5. Доступность и SEO
SVG доступны: текст остается текстом, и что-то должно появиться, даже если ваш браузер не поддерживает каждый элемент.
Люди и машины могут понимать код SVG, даже если они не могут его отобразить. Поисковые системы, такие как Google, уже анализируют SVG, но элементы canvas всегда будут нуждаться в резерве.
6. DOM Обработка
У SVG есть DOM, поэтому легко подключать обработчики событий и манипулировать элементами, как если бы вы использовали другой блок HTML. Для перемещения предмета вы просто меняете его координаты.
То же самое не верно для холста. Чтобы определить, находится ли курсор мыши над объектом, вам нужно сравнить два местоположения и соответственно отреагировать — возможно, снова перерисовать весь холст.
7. Это больше того, что вы знаете …
SVG является XML и использует теги так же, как HTML. Он также поддерживает CSS, веб-шрифты и методы JavaScript, с которыми вы знакомы.
Манипуляции с холстом не сложны, но требуют другого мышления, и вам нужно изучить API.
… И будущее выглядит ярко для SVG
Возможно, технология существует уже более десяти лет, но разработки SVG продолжают развиваться. Поставщики браузеров добавляют поддержку фонов CSS и встроенную интеграцию, а также внедряют мобильные движки, анимацию, преобразования и фильтры.
Холст также развивается, но он остается автономным программируемым элементом растрового изображения. Это всегда будет накладывать ограничения.
Недостатки
SVG, безусловно, не обязательно является лучшим решением во всех ситуациях. Если вы анимируете сотни элементов — возможно, для эффекта фейерверка или взрыва — холст всегда будет быстрее, поскольку он не ограничен количеством элементов DOM, которые может обрабатывать браузер. Холст, как правило, будет лучшим выбором для быстрых игр.
Кроме того, производительность SVG не всегда идеальна, а механизм webkit кажется особенно плохим. Часто можно увидеть, как Chrome и Safari перерисовывают каждый элемент по очереди, и, хотя они поддерживают анимацию, вы не можете применить узлы SMIL к SVG DOM с помощью JavaScript.
Тем не менее, SVG остаются лучшей альтернативой для логотипов или диаграмм с меньшим количеством интенсивных эффектов. Они не такие модные, как полотно, но это не повод их избегать.
Ищите новые учебники SVG на SitePoint в ближайшее время …