Canvas или SVG как выбрать правильный инструмент для работы


Содержание материала:

Выбор правильной технологии (SVG vs Canvas)

Я пишу приложение для манипуляции с фигурами, чтобы после создания простых фигур пользователь мог создавать более сложные, обрезая фигуры друг против друга (т.е. объединяя два круга вместе в фигуру 8, сохраненную с использованием одного пути, а не группы, или выполняю пересечение двух окружностей, чтобы создать метку «укуса»), и пытаюсь выбрать графическую библиотеку для использования.

SVG, кажется, обрабатывает 80% необходимых мне функций из коробки (хранение фигур, перемещение, вращение, масштабирование). Проблема в том, что другие 20% (используя обрезку для создания нового набора сложных многоугольников), кажется, невозможно достичь без воссоздания функциональности SVG в моих собственных модулях (я должен был бы сохранить форму один раз для рисования внутри SVG, и один раз для обрабатывать отсечения сам). Я могу ошибаться в отношении SVG, но, читая о библиотеке Raphael (основанной на SVG), кажется, что она обрабатывает только отсечение с помощью прямоугольника, и даже это ограничение является временным (оно только визуализирует часть фигуры, но сохраняет всю фигуру) перерисовывается после перемещения прямоугольника отсечения). Возможно, я просто запутался в стандарте SVG, но даже получение / разбор путей для вычисления нового пути с использованием подмножеств предыдущих путей кажется неочевидным в SVG (есть функция Subpath (), но я не вижу ничего, чтобы найти точки пересечения двух периметров полигона или объединить несколько подпутей в один путь).

В результате Canvas кажется лучшей альтернативой, поскольку он не вносит дополнительных издержек, отслеживая формы, которые я уже должен был отслеживать, чтобы заставить мою собственную реализацию отсечения работать. Мало того, я уже реализовал класс полигонов, который можно перемещать, вращать и масштабировать. Однако у Canvas есть и другие проблемы (мне пришлось бы реализовать свой собственный метод перерисовки, который, я уверен, не будет столь же эффективным, как SVG, использующий преимущества специфичных для браузера сред в Chrome и Firefox; принять IE несовместимость, которая обрабатывается бесплатно с библиотеками, такими как Raphael).

4 ответа

Это может касаться того, что вы упоминаете.

Обрезка может быть выполнена с использованием непрямоугольных объектов с использованием элемента clipPath.

Например, у меня есть элемент с идентификатором «clipper», который определяет, что вырезать, и путь, который подлежит отсечению. Не уверен, что они пересекаются в этом фрагменте.

Это всего лишь фрагмент из того, что у меня есть. Надеюсь, поможет.

Сдается мне, что вы пытаетесь сделать 2D конструктив геометрии. Поскольку SVG работает в режиме сохранения, нарисованные вами объекты сохраняются, а затем выполняются различные операции. С Canvas вы работаете с битовой картой, поэтому изменения вступают в силу немедленно. Поскольку ваши пользователи, в свою очередь, будут выполнять больше операций с вашими более простыми фигурами, чтобы создавать еще более сложные фигуры, Canvas должен в долгосрочной перспективе быть более подходящим.

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

И svg, и canvas являются векторной графической технологией. Каждая из них имеет несколько различных функций.

Canvas — это растровое изображение с интерфейсом прикладного программирования (API) для непосредственного модографического рисования. Canvas — это модель «запускай и забывай», которая визуализирует свою графику непосредственно в своем растровом изображении, а затем не имеет смысла нарисованных фигур; остается только растровое изображение.

SVG используется для описания масштабируемой векторной графики

SVG известен как графическая модель с сохранением режима, сохраняющаяся в модели в памяти. По аналогии с HTML, SVG создает объектную модель элементов, атрибутов и стилей. Когда элемент появляется в документе HTML5, он ведет себя как встроенный блок и является частью дерева документа HTML.

Смотрите здесь для получения дополнительной информации о canvas vs svg в деталях — Сравнение svg vs canvas

В чем разница между Canvas и SVG?

Просмотров : 286 | Добавил : Oleg74 (12.02.2020) (Изменено: 12.02.2020)

Обсуждение вопроса:

Векторная графика SVG — это файл XML. Как к SVG так как и к Canvas можно применить стили CSS и добавлять динамическое поведение с помощью SVG DOM. Canvas рисует графику и формы через JavaScript, и также принимает стили CSS и динамическое поведение.

Вот подсказки что использовать canvas или SVG.

● Canvas быстрее при составлении сложной графики.
● Вы можете сохранять изображение из SVG, из canvas не получится.
● Весь canvas состоит из пикселей.

Вот преимущества SVG.

● SVG не зависит от разрешения, он масштабируемый для разных разрешений экрана. Пример.
● SVG — это файл XML, и предназначен для различных элементов.
● SVG хорошо использовать при сложной анимации.

Если графика зависит от разрешения, тогда выбераем SVG. Если вы разрабатываете игру и хотите сделать графику очень быстрой, или не хотите иметь дело с большим количеством файлов XML, тогда выбираем Canvas. В интернете они работают вместе, и дополняют друг друга.

SVG действует по принципу «нарисовал и запомнил». Другими словами любая фигура, нарисованная с помощью SVG, запоминается, допускает манипуляции над собой, и браузер может нарисовать её снова.

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

Медленный формат, т.к. ему требуется запоминать координаты для будущих манипуляций.

Мы можем создать обработчик событий, связанный с нарисованным объектом.

Не зависит от разрешения.

Канва действует по принципу «нарисовал и забыл». После того, как что-то нарисовано, вы не можете получить доступ к этому изображению и манипулировать им.

Канва хороша для сценариев «нарисовал и забыл», таких как анимация и игры.

Более быстрый формат, т.к. нет надобности запоминать что-либо.

В этом случае мы не можем привязать обработчик событий к объектам рисунка, т.к. у нас нет ссылки на них.

10 крутых примеров работы HTML5 Canvas

Холст — интересная особенность в HTML5 Canvas которая позволяет рисовать разнообразные вещи в браузере с помощью технологии Java. Например его можно использовать для управления фотографий, рисовать и анимировать разнообразные формы и фигуры, а так же воспроизводить видео. Но это ещё далеко не придел.

По этому, чтобы продемонстрировать на что возможна HTML5, тут представлена небольшая подборка различных и красивых примеров, которые точно Вам понравятся.

Радужный дождь

Действительно удачный пример анимации работающей на HTML5 Canvas, как будто с неба льёт радужный дождь. Очень красиво смотрится.

Частицы

Интересный эффект на HTML5 Canvas, который имитирует движение мелких частиц из букв, очень красивая и своеобразная анимация, которую можно использовать практически на любых сайтах.

Анимированные круги

Интересный и не сильно сложный эффект работающий на HTML5 Canvas. Тут несколько кругов, которые плавно меняют свою форму, таким образом получается красивый визуальный эффект.

Геометрическая анимация

Ну что сказать, это потрясающий и красивый эффект геометрической анимации на которую можно смотреть вечно, так как выгляди это очень здорово.

Анимационные шары

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

Созвездие

Тут созданы случайно двигающиеся звёзды, а при наведении мыли они соединяются линиями. Очень красиво сделанное демо.

Молния

Отличная и удачная имитация молнии с помощью HTML5 Canvas. Смотрится очень достойно и потрясающе!

Радужный осьминог

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

Найди курсор

Этот пример отслеживает расположение курсора указывая на него стрелками

Механическая трава

Интересный пример, который реагирует на движения курсора, дорисовывая линии. Очень интересно и необычно придумано.

Форум

Справочник

Всего ответов: 2

Поиск по форуму
Расширенный поиск
К странице.

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


Есть пожелание делать все на стороне клиента.

Что лучше использовать? Canvas? У него есть метод, который возвращает содержимое toDataURL(). Для svg про такое не слышал. Возможно ли вообще, что бы js автоматически отдавал какие-нибудь данные для скачивания не с сервера, а из результов работы самого js?

Можно ли как-то, не загружая картинку на сервер, обработать ее в js скрипте? Или мне не заморачиваться со всем этим и просто использовать php + gd?

Сообщение от Marv Не знаком с данным вопросом, поэтому объясню, возможно, немного непонятно. Задача такая: пользователь загружает картинку, мы добавляем к ней логотип и возвращаем новое изображение как файл на скачивание.

Есть пожелание делать все на стороне клиента.

Что лучше использовать? Canvas? У него есть метод, который возвращает содержимое toDataURL(). Для svg про такое не слышал. Возможно ли вообще, что бы js автоматически отдавал какие-нибудь данные для скачивания не с сервера, а из результов работы самого js?

Canvas vs SVG

Итак, вопрос, который по определению провокационный и флеймообразующий: что использовать — canvas или SVG, — на первый взгляд, он не очень правомерен: SVG — это векторная графика, Canvas представляет растовые изображения. Но тем не менее области применения обеих технологий на веб-страницах сильно пересекаются. Какими преимуществами обладает каждая из них и на какой все-таки остановиться?

Объекты в svg — это часть DOM-дерева документа, они доступны из JavaScrip-сценариев, к ним можно привязать события (такие как click или mouseover) и организовать интерактивное взаимодействие пользователя с контентом. К этим элементам можно непосредственно применять CSS-стили.

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

Второе преимущество заключается в возможности индексации csg-контента поисковыми системами. И это не просто теоретическая возможность — поисковые механизмы Google индексируют SVG уже почти два года, а это серьезно!

Следует ли из этого, что SVG однозначно удобнее и лучше по всем параметрам? Естественно, нет. Применение SVG нам дает невероятную простоту при рисовании… простых вещей.

В Canvas необходимо будет реализовывать то, что уже реализовано в SVG в виде XML-объектов. С другой стороны, тут без всяких примитивов можно отрисовывать произвольные формы, на реализацию которых с помощью SVG уйдет довольно много кода, требующего, в свою очередь, больших процессорных ресурсов для интерпретации.

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

Еще одно преимущество Canvas — возможности оптимизации и кэширования графики.

Подытоживая, можно сказать, что сфера применения SVG — это ифографика, диаграммы, схемы, графики, иллюстрации, в то время как сфера действия canvas — видеоигры, обработка фотографий, «веб-живопись». Впрочем, это всего лишь мое мнение, которое я никому не навязываю.

Canvas vs webGL

Canvas или WebGL — описание, преимущества, особенности. Что лучше?

WebGL и Canvas — эти два элемента объединяют HTML5 и JavaScript. У них есть свои преимущества и недостатки, особенности и тонкости в использовании. Но, оба инструмента направлены на создание и демонстрацию графических составляющих HTML5. Это могут быть растровые изображения, фоны сайтов, анимированная графика, динамические заставки, а также браузерные 2D и 3D игры.

У каждого ‘движка’ есть свои особенности. А поэтому, что-то будет лучше работать на Canvas, что-то — на WebGL, а что-то и вовсе не будет работать нигде. Именно поэтому, при внедрении графических составляющих в HTML5 через JavaScript необходимо учитывать абсолютно все особенности элементов, которые вы планируете использовать.

Всё что нужно знать о Canvas, и даже чуть больше

Начнём с холста или как ещё его называют ‘канва’. Да-да, речь пойдёт о Canvas, а ‘холст’ и ‘канва’ — это, так называемые ‘народные’ прозвища этого элемента.

Итак, что из себя представляет Canvas? Это HTML5 элемент, с помощью которого вы можете добавлять растровую графику в ваш код через JavaScript. Чаще всего канвой рисуют графики, а также некоторые анимационные составляющие браузерных игр. Иногда можно встретить видео, встроенное при помощи Canvas, или даже полноценные браузерные видеоплееры.

Интересный факт: Canvas может весьма озадачить роботов, распознающих капчу. Всё дело в том, что используя канву для капчи, с сервера будет загружаться не готовое изображение, а алгоритм, по которому выстроится набор точек и тем самым воссоздаст картинку капчи. Для человека все эти танцы с бубном незаметны. А вот робот вряд ли решит подобный ребус.

Впервые, холст для HTML5 представили Apple для использования в своих браузерах Safari и Dashboard. В Internet Explorer Canvas не поддерживался бы и по сей день, если бы не Google. Они создали расширение для браузера, после установления которого, IE можно считать каким никаким, но браузером. На данный момент к Canvas обращаются при необходимости разработки графиков, добавления анимации или для основы графических элементов в веб-приложениях.

Компания Mozilla работает над собственным проектом для Canvas. Его целью является внедрение графических ускорителей, с помощью которых можно будет отображать 3D контент. Официально, задумка имеет название Canvas 3D. Не то чтобы велосипед изобрели до того, как спохватились разработчики Mozilla, но уже давно есть альтернатива — библиотеки. В том числе, для реализации трехмерной графики существует Three. Возможно, Canvas 3D будет лучше, чем обычная канва со всякими там библиотеками. Судить наперёд, как минимум, глупо. Но, так или иначе, работать с 3D в Canvas можно уже сейчас, и что нового принесёт проект Mozilla — непонятно.

Минимальные требования для отображения Canvas в HTML5 в браузерах и платформах:

Обзор софта для работы с SVG-графикой

Для оформления любой web-страницы необходима как статичная графика, так и разнообразные анимационные и интерактивные элементы, которые, во-первых, обеспечивают большую привлекательность представленной на ней информации, а во-вторых, способствуют лучшему восприятию материала.

рафическая информация передается намного медленнее текстовой, а время загрузки изображений находится в прямой зависимости от размера их графических файлов, поэтому быстрая загрузка web-страниц предполагает небольшой размер внедренных в них графических изображений. Последнее достигается путем оптимального выбора формата графического файла, а также за счет оптимизации, задача которой — найти компромисс между скоростью загрузки страницы и качеством представленных на ней изображений. Однако возможности оптимизации небезграничны, а высококачественные изображения, как правило, имеют внушительный объем, вследствие чего достижение высокого качества представленных в web изображений при их небольших размерах по-прежнему остается серьезной проблемой.

Но вопрос не только в размере и качестве — разработка дизайна для web-страницы оказывается делом, требующим от дизайнера знания широкого спектра разноплановых технологий и программных продуктов, поскольку для разных видов графической информации приходится использовать разнообразные форматы файлов и различные технологии их создания. Для статичной графики применяют форматы GIF, JPG или PNG, создавать которые можно в самых разных графических пакетах. Для анимационных объектов используют форматы animation GIF и Flash, а разрабатывают такие объекты в специализированных программных приложениях (особых для каждого из названных типов форматов). Интерактивные элементы (ролловеры, карты ссылок ImageMap и т.п.) тоже, как правило, создаются в специализированных приложениях и представляют собой набор графических изображений, связь между которыми устанавливается в дополняющем их файле с HTML-кодом.

Удачным решением названных проблем может стать переход на графический формат SVG (Scalable Vector Graphics — масштабируемая векторная графика), основанный на языке XML, благодаря чему любое SVG-изображение можно представить набором командных строк (рис. 1), а сам SVG-файл можно открыть в любом текстовом редакторе, включая блокнот. Эта сравнительно новая технология изначально разрабатывалась компанией Adobe специально для web, а сегодня представляет большой интерес и для мобильных устройств, обеспечивая создание высококачественной статичной, анимационной и интерактивной графики. Поэтому нет ничего удивительного в том, что она активно поддерживается консорциумом W3C (http://www.w3.org/Graphics/SVG) — в 2003 году стандарт SVG 1.1 был принят в W3C в качестве рекомендации, а на данный момент идет разработка спецификации SVG 1.2 (http://www.w3.org/TR/SVG12/).

Рис. 1. Фрагмент SVG-файла вместе
с соответствующим ему изображением

Технология SVG позволяет объединить в одном формате текст, графику, анимацию и интерактивные компоненты и базируется на трех типах графических изображений: векторных формах, рисунках и тексте. Формы, как это принято в векторной графике, представлены либо прямолинейными и криволинейными контурами, либо графическими примитивами (прямоугольниками, эллипсами и др.), а рисунки представляют собой импортированные растровые изображения. Помимо этого формат SVG поддерживает различные виды анимационных (напоминающих GIF- и flash-анимацию) и интерактивных объектов, таких как ролловеры, карты ссылок и прочие элементы навигации. А поскольку данный стандарт основан на языке XML, то SVG-файл наряду с элементами, предназначенными для визуального отображения, может содержать также различные метаданные.

Плюсы и минусы применения формата SVG

Использование формата SVG позволяет разрабатывать для Сети и мобильных устройств более компактную, быстро загружающуюся, высококачественную разноплановую графику, чего не может обеспечить никакой другой графический формат. К основным достоинствам графического формата SVG можно отнести следующие:

  • высокое качество изображений независимо от их размеров, что объясняется векторной природой SVG-формата. Изображения могут неограниченно уменьшаться или увеличиваться без потери качества (рис. 2) в соответствии с размером дисплея, что позволяет получать качественное изображение графической информации на различных типах устройств (десктопах, карманных компьютерах и пр.), а также дает возможность более тщательно рассмотреть отдельные детали — это важно, например, при работе с техническими рисунками;
  • гораздо меньший размер файлов по сравнению с форматами GIF, JPG, PNG и animation GIF, а тем более с форматом Flash. Например, если протестированный для статьи файл формата GIF, сжатый в режиме LZW-компрессии, составлял 26 Кбайт, то размер соответствующего ему SVG-файла занял 1220 байт, а при сжатии в формате SVGZ составил всего 685 байт.

Но дело не только в этом. По сравнению с традиционными вариантами графического представления Сети применение SVG-формата имеет немало других неоспоримых преимуществ.

Так, для разработчиков важными плюсами являются:

  • возможности совмещения в одном формате разработки статичных, анимационных и интерактивных элементов, а также сочетания векторных и растровых объектов;
  • улучшенная работа с текстом, включая кернинг, текст по кривой и неограниченное использование шрифтов;
  • более эффективное управление точностью передачи цветов и широчайшие возможности в плане использования в web-изображениях градиентных заливок высокого разрешения, теней, фильтров и т.п.;
  • текстовая природа SVG-формата и поддержка им каскадных таблиц стилей, что значительно упрощает процесс обновления web-сайта и позволяет при необходимости вносить в него изменения без обращения к специальным программам;
  • интеграция с построенными на стандартах XML (Extensible Markup Language) и CSS (Cascading Style Sheets) базами данных, что позволяет сохранять SVG-изображения в базе данных и создавать с их использованием динамические web-страницы — различные для разных платформ, персональных настроек и т.д.;
  • отсутствие проблем индексации — SVG-файлы индексируются любыми поисковыми машинами (в отличие, например, от SWF-файлов).

Пользователей порадует высококачественный и быстро загружающийся SVG-контент. Кроме того, предусмотрена возможность копировать текст, находящийся на SVG-изображении, и тем самым сохранять некоторую полезную для себя информацию, а также проводить поиск текста в изображении, что в ряде случаев может оказаться крайне необходимым, например при поиске нужного названия на карте или чертеже.

Рис. 2. Просмотр SVG-графики при разном масштабировании

Тем не менее, как водится, наряду с плюсами у технологии SVG имеются и минусы, причем весьма серьезные.

  • SVG-изображения слабо поддерживаются производителями Интернет-браузеров. В результате для просмотра SVG-графики из браузера пользователи вынуждены дополнительно устанавливать обеспечивающий данную возможность плагин от сторонних производителей, например SVG Viewer от компании Adobe. Теоретически это несложно — соответствующие плагины просты в установке, бесплатны, имеют небольшой объем и их можно быстро скачать по Сети. На практике все оказывается гораздо сложнее, поскольку большинство Интернет-пользователей не догадываются о существовании данных возможностей и потому не могут просматривать данный вид графики — без плагина она просто не видна. Однако ситуация постепенно меняется, и в прошедшем году два ведущих разработчика web-браузеров внедрили поддержку формата SVG. Весной компания Opera Software выпустила 8-ю версию браузера Opera, поддерживающую SVG 1.0 Tiny; в появившейся чуть позже версии Opera 9.0 реализована частичная поддержка формата SVG 1.0 Basic. Вторым разработчиком, включившим поддержку SVG, стала The Mozilla Organization — в состав выпущенного ею браузера Firefox 1.5 включен модуль Mozilla SVG project, обеспечивающий просмотр SVG-графики спецификации 1.1. Кроме того, в середине 2005 года активную работу по внедрению поддержки SVG 1.1 начали разработчики браузера Safari, функционирующего на компьютерах под управлением Mac OS X;
  • в сравнении с другими графическими форматами формат SVG пока слабо поддерживается и разработчиками графического ПО, хотя такие ведущие графические пакеты, как Adobe Illustrator, Corel DRAW и др., позволяют экспортировать графику в SVG-файлы. Конечно, SVG-файлы могут быть созданы и в любом текстовом редакторе, однако это нецелесообразно в смысле быстроты и дешевизны разработки. В текстовом редакторе удобно подправить файл в случае необходимости (что, кстати, возможно только при наличии глубоких знаний о XML-технологии), но создавать его с нуля неразумно, поскольку это потребует чрезмерных затрат времени и сил. Для этого нужны простые и удобные средства быстрой визуальной разработки графики в формате Scalable Vector Graphics с возможностью правки в этой же среде соответствующего изображению программного кода, однако таких продуктов совсем немного и они недостаточно известны.

В итоге складывается весьма печальная ситуация — многие пользователи пока не могут просматривать SVG-графику по причине отсутствия ее поддержки web-браузерами на должном уровне, web-разработчики практически не разрабатывают SVG-графику, как бы она ни была привлекательна, а разработчики ПО не балуют web-дизайнеров разнообразием приложений, ориентированных специально на SVG. В результате получается замкнутый круг: «Если нет контента, то людям не нужна реализация SVG, а если нет реализации, то нет и контента» — именно так охарактеризовали создавшуюся ситуацию на одном из заседаний консорциума W3C.

Но можно посмотреть на ситуацию и с другой стороны: поддержка SVG (хотя пока и не в полном объеме) двумя популярными Интернет-браузерами, равно как и интерес к технологии именитых разработчиков говорит о том, что «лед тронулся» и что у SVG появился реальный шанс превратиться в один из популярных форматов для представления web-информации. Этот шанс повышается и в связи с ростом интереса к технологии SVG в отношении мобильных устройств, где требования к размеру и качеству изображений гораздо выше. Компания Opera Software, например, предполагает вначале реализовать полную поддержку формата SVG на десктопах и лишь затем перенести ее на мобильные платформы. Поэтому самое время задуматься об использовании SVG и web-дизайнерам — иначе они рискуют в ближайшем будущем оказаться в числе отстающих.

Плагины для просмотра SVG-графики

Как уже было отмечено, пока что большинству пользователей для просмотра SVG-графики в полном объеме в окне Интернет-браузера придется воспользоваться одним из подходящих плагинов, наиболее известными из которых являются бесплатные модули Adobe SVG Viewer и Corel SVG Viewer. Первый из них — Adobe SVG Viewer — поставляется как отдельное приложение, отличается компактностью и удобством, работает на разных платформах, поддерживает большое количество Интернет-браузеров и потому гораздо более популярен среди пользователей. Приложение Corel SVG Viewer входит в состав пакета Corel Smart Graphics Studio, но доступно и как freeware.

Существуют и другие варианты просмотра SVG-графики — можно, например, воспользоваться соответствующими модулями из пакетов Amaya (http://www.w3.org/Amaya/), Apache Batik (http://xml.apache.org/batik), KDE KSVG (http://www.kde.org) и др. Полный список приложений, обеспечивающих просмотр SVG-изображений, приведен по адресу: http://wiki.svg.org/Viewer_Implementations.

Adobe SVG Viewer

Разработчик: Adobe Systems, Inc.

Размер дистрибутива: 2,25 Мбайт

Цена: бесплатно

Работа под управлением: Windows 95/98/Me/NT/2000/XP, Mac OS 8.6/9/X, Linux, Solaris

Поддержка браузеров: Internet Explorer версии 4.0 и выше, Netscape Navigator или Communicator версий от 4.5 до 4.78 (за исключением версий 6.x)

Corel SVG Viewer

Разработчик: Corel Corp

Размер дистрибутива: 4,9 Мбайт

Цена: бесплатно

Работа под управлением: Windows 98/NT/2000/Me/XP


Поддержка браузеров: Microsoft Internet Explorer 5.5 и выше, Netscape Navigator или Communicator версий 4.79, 7.02

Программы для создания SVG-графики

Все программы для создания SVG-графики можно разбить на три большие группы. В первую входят популярные двумерные графические пакеты, ориентированные на работу с векторной графикой и позволяющие вместе с тем экспортировать изображения в формат SVG. Наиболее популярные из них — Adobe Illustrator и CorelDRAW; кроме того, подобный экспорт в той или иной мере поддерживает множество других приложений: AutoCAD, Microsoft Visio и пр. Основным преимуществом данной группы приложений является то, что они обладают расширенным инструментарием для создания векторных изображений и позволяют добиться уникальных эффектов за счет использования прозрачностей, градиентных заливок, разнообразных фильтров и пр. Но указанные приложения требуют серьезной специальной подготовки и потому в большей степени рассчитаны на профессиональных дизайнеров. Кроме того, они по большому счету не ориентированы на SVG-дизайн (хотя и позволяют получать графику в формате Scalable Vector Graphics) — обеспечивая удобное визуальное создание и отображение изображений, эти приложения не допускают корректировки их на текстовом уровне, что актуально в отношении SVG-графики. Существенным является и тот факт, что поддержка формата Scalable Vector Graphics в них реализована не в полном объеме, в результате чего не все элементы векторного изображения могут быть без ошибок экспортированы в SVG.

Вторую группу программных продуктов образуют пакеты, предназначенные исключительно для создания SVG-графики. Они обладают гораздо меньшими возможностями в плане визуальной разработки векторных изображений, хотя и включают весь необходимый инструментарий. Но зато они предоставляют удобные средства для редактирования исходного кода и позволяют работать с SVG-объектами параллельно — и в визуальном режиме, и на уровне кода, причем между этими вариантами представления информации можно легко переключаться. Все приложения из этой группы очень просты и доступны и не требуют много времени на освоение. К тому же они имеют относительно небольшие по объему дистрибутивы (в сравнении с приложениями первой группы), поэтому без проблем могут быть приобретены через Интернет. Однако программ с такими возможностями совсем немного, и ниже мы подробно рассмотрим лишь четыре, представляющие наибольший интерес и рассчитанные на разные категории пользователей. С полным списком доступных для создания SVG-графики приложений можно ознакомиться по адресу: http://wiki.svg.org/Design_Tools.

И наконец, в третью группу можно включить любые текстовые редакторы, в том числе обычный блокнот. Как было отмечено выше, формат Scalable Vector Graphics базируется на языке XML, что позволяет при необходимости создавать и редактировать SVG-файлы на текстовом уровне в текстовом редакторе.

Полнофункциональные графические приложения, позволяющие создавать SVG-графику

Adobe Illustrator CS2

Разработчик: Adobe Systems, Inc.

Размер дистрибутива: Macintosh-версия — 428,9 Мбайт, Windows-версия — 398,6 Мбайт

Способ распространения: shareware (30-дневная демонстрационная версия пакета доступна по адресу: http://www.adobe.com/products/tryadobe/main.jsp#product=27)

Цена: 665 долл.

Работа под управлением: Windows 2000 с Service Pack 3 или Windows XP, Mac OS X версий от 10.2.4 до 10.2.7, Java Runtime Environment 1.4.1

Начиная с 9-й версии в Adobe Illustrator (рис. 3) реализованы импорт и экспорт SVG-файлов, причем на гораздо более высоком в сравнении с аналогичными графическими приложениями уровне. Пакет поддерживает все существующие SVG-спецификации, кодировки ISO 8859-1, UTF-8 и UTF-16, различные варианты экспорта текста и позволяет экспортировать изображения как в обычном формате SVG, так и в сжатом SVGZ.

Рис. 3. Создание интерактивного SVG-элемента в Adobe Illustrator

В создаваемой в его среде SVG-графике можно использовать градиенты, прозрачности, а также целую серию специально предусмотренных для этого SVG-эффектов (Effect=>SVG Filters) в виде различных теней, размытия и пр. Изображения с такими эффектами сохраняют четкость при просмотре в web-браузере с любым увеличением. Помимо статичной графики Illustrator позволяет получать и интерактивную графику в формате SVG — для этой цели предусмотрена специальная палитра SVG Interactivity (ее можно открыть из меню Window=>SVG Interactivity), в которой задаются действия для интерактивных объектов. Стоит отметить, что работа над интерактивными SVG-элементами в программе Illustrator требует знания языка Java Script и понимания основных принципов объектно-ориентированного программирования. Кроме того, с помощью формата Scalable Vector Graphics в данной программе можно создавать графику динамических данных (Dynamic Data-Driven Graphics).

CorelDRAW Graphics Suite 12

Разработчик: Corel Corp.

Размер дистрибутива: 200 Мбайт

Способ распространения: shareware (демонстрационную версию можно скачать с сайтов Интернет-магазинов, например по адресу: http://allsoft.ru/Download.php?ver=17605)

Цена: 290 долл. (Allsoft.ru)

Работа под управлением: Windows NT/2000/XP

Известное приложение для разработки профессиональной векторной графики CorelDRAW (рис. 4), входящее в состав пакета CorelDRAW Graphics Suite 12, обеспечивает импорт и экспорт в форматах SVG и SVGZ на базовом уровне, а следовательно, может использоваться для создания статичной и интерактивной SVG-графики.

Рис. 4. Экспорт векторного изображения
в SVG-файл в CorelDRAW

В приложении реализована поддержка нераспознанных данных, атрибутов и метаданных, а также предусмотрена возможность предварительного просмотра SVG-файлов в браузере перед экспортом. Кроме того, возможна кодировка Unicode для методов кодирования UTF-8 и UTF-16 и различные варианты экспорта текста и bitmap-изображений. В последней версии значительно улучшена поддержка экспорта символов, текста, теней, контуров, слоев, внедренных двоичных изображений и пр.

Mayura Draw 4.3

Разработчик: Mayura Software

Размер дистрибутива: 1,3 Мбайт

Способ распространения: shareware (демонстрационная версия — http://www.mayuradraw.com/mdraw.zip)

Цена: 39 долл.

Работа под управлением: Windows 95/98/Me/NT/2000/XP

Mayura Draw (рис. 5) — очень простая и дешевая программа создания векторной графики, рассчитанная на широкого пользователя. Полученные в ней векторные изображения при желании можно экспортировать в формат SVG, и потому Mayura Draw может стать возможным решением для разработки статичной SVG-графики. Программа поддерживает все основные инструменты векторной графики и позволяет получать векторные изображения на основе графических примитивов, линейных и криволинейных контуров и текста. В перечне ее возможностей — удобные средства выравнивания, распределения и упорядочения объектов, управление прозрачностью, использование направляющих и линеек для точного размещения объектов и разнообразные трансформации.

Рис. 5. Интерфейс программы Mayura Draw

Специализированные пакеты для создания SVG-графики

EvolGrafiX XStudio 6.1

Разработчик: EvolGrafiX

Размер дистрибутива: 7,25 Мбайт

Цена: 449 долл. — коммерческая лицензия, 249 долл. — академическая лицензия

Работа под управлением: Windows 2000/XP

Профессиональный пакет XStudio (рис. 6) представляет собой удобный инструмент для создания разноплановой SVG-графики для Сети и мобильных устройств и обеспечивает полный контроль как над SVG-проектом в целом, так и над векторными изображениями, анимацией, скриптами и пр. Приложение отличается удобным, интуитивно понятным и легко настраиваемым пользовательским интерфейсом, предоставляет широкий набор инструментальных средств, имеет высокую скорость работы, позволяет создавать SVG-графику всех существующих спецификаций и поддерживает все стилевые оформления Scalable Vector Graphics. Все это в сочетании с относительно невысокой для профессионального пакета ценой позволяет считать его лучшим профессиональным решением подобного плана. Пакет XStudio поставляется с подробной документацией, дополненной серией уроков, и прост в освоении.

Рис. 6. Совмещение визуального создания изображения с правкой исходного кода
в EvolGrafiX XStudio

Приложение обладает всеми необходимыми возможностями для создания и обработки векторных изображений и в этом плане очень напоминает пакет Adobe Illustrator. При этом XStudio ориентирован непосредственно на подготовку статичной, интерактивной и анимационной SVG-графики и потому наряду с классическими средствами работы с векторными объектами дополнен специфическими SVG-возможностями. Встроенная инструментальная панель Document Object Model (DOM) обеспечивает иерархическое представление SVG-объектов, удобный XML-редактор позволяет исправлять исходный код на текстовом уровне, а скриптовой редактор — дополнять его Java-скриптами. Работа с кодом организована очень удобно: автоматически выделяются фрагменты кода выбранного объекта, имеется возможность поиска текста и установки закладок и пр. Любые изменения кода мгновенно отражаются в визуальном окне просмотра, а визуальные изменения — в окне редактора.

Inkscape

Разработчик: IOSN (International Open Source Network — Международная сеть открытого ПО)

Размер дистрибутива: 8,7 Мбайт

Цена: бесплатно

Работа под управлением: Windows 9x/NT/2000/XP, Mac OS X, Linux

Inkscape (рис. 7) — самый перспективный векторный редактор на базе модели Open Source, являющийся многоплатформенным и представляющим собой мощный инструмент для разработки графики в соответствии со стандартом Scalable Vector Graphics. Своими функциональными возможностями работы с векторными изображениями, равно как и интерфейсом, Inkscape очень напоминает CorelDRAW. В нем реализованы поддержка alpha-каналов, работа со слоями, использование обтекаемого текста, эффектные градиентные заливки, большое число фильтров и эффектов, разнообразные трансформации, удобная работа с контурами и объектами, группировка объектов и многое другое. Возможны импорт данных из файлов JPEG, PNG и TIFF и внедрение их в SVG-изображения.

Рис. 7. Правка исходного кода в окне
встроенного редактора Inkscape

Однако в отличие от CorelDRAW пакет Inkscape позиционируется как приложение для SVG-дизайнеров, поэтому в нем наряду с классическим визуальным созданием графики предусмотрены возможности непосредственной обработки XML-кода в среде встроенного текстового редактора. Программа настроена на сохранение изображений в обычных и сжатых SVG-файлах, хотя при желании их можно конвертировать в распространенные векторные и растровые форматы.

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

Corel WebDraw

Разработчик: Corel Corp

Размер дистрибутива: 15,6 Мбайт

Способ распространения: shareware (30-дневная демонстрационная версия — http://www5.jasc.com/pub/wdw102ev.exe)

Цена: 179 долл. — download-версия, 199 долл. — CD-версия

Работа под управлением: Windows 98/NT4/2000/Me/XP

Пакет Corel WebDraw (рис. 8), более известный как Jasc WebDraw, — универсальное решение для создания высококачественной графики и анимации в формате SVG, ориентированное на профессиональных дизайнеров. А интуитивно понятный интерфейс программы делает ее привлекательной и для широкого круга пользователей.

Рис. 8. Интерфейс программы WebDraw

В приложении доступен обширный набор стандартных графических инструментов, характерных для полнофункционального приложения работы с векторной графикой: базовые формы (эллипс, прямоугольник, звезда и пр.), перо, полигон, полилиния, текст и т.п. Наряду с векторными объектами WebDraw позволяет дополнять SVG-объекты внешними растровыми изображениями. Помимо обычных заливок и наложения готовых стилей можно использовать сложные градиенты, заливки, в том числе и созданные собственноручно узоры. Для получения более эффектных изображений можно воспользоваться фильтрами — как достаточно простыми (размытие и наложение тени), так и сложными (текстурирование и освещение). Для точного размещения объектов предназначены сетки, направляющие и линейки, а встроенная инструментальная панель Document Object Model (DOM) представляет SVG-объекты в виде иерархического дерева, что существенно упрощает управление.

WebDraw оснащен универсальной линейкой раскадровки анимации Animation Timeline, которая построена на базе объектной модели SVG DOM (Document Object Model), что позволяет выбирать и анимировать практически любой атрибут или свойство объекта всех типов в любое время. Механизм перетаскивания позволяет редактировать непосредственно в монтажной линейке начальную и конечную точки анимации, а также продолжительность каждой фазы анимации. Поскольку ключевые точки анимации (keytime) вставляются каждый раз при установке параметров анимации для атрибута или свойства объекта, их можно переносить на другие участки раскадровки в целях автоматической настройки распределения эффектов анимации во времени.

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

Sketsa SVG Editor 3.2.3


Разработчик: KIYUT

Размер дистрибутива: 5,99 Мбайт

Способ распространения: shareware (демонстрационная версия, добавляющая метку на изображение, — http://www.kiyut.com/products/sketsa/sketsa.zip)

Цена: 49 долл.

Работа под управлением: Windows 2000/XP, Java VM (JRE) 1.5 и выше (http://www.java.com/getjava), UNIX и Linux

Приложение Sketsa (рис. 9) относится к самым популярным из SVG-редакторов и позволяет создавать профессиональную SVG-графику, в том числе с оптимизацией в формате SVGZ. Пакет удачно сочетает в себе простоту и удобство работы с широким перечнем возможностей и совместим с Windows-, Mac- и Linux-системами.

Рис. 9. Визуальное редактирование изображения в Sketsa

Sketsa поддерживает классический набор характерных для любого векторного приложения инструментальных средств, позволяющих создавать и трансформировать любые векторные объекты на основе как контуров, так и графических примитивов и текста, которые при желании несложно дополнить растровыми изображениями. Возможно управление прозрачностью, использование градиентных заливок и фильтров. Все это удачно дополнено специализированными SVG-возможностями, благодаря которым любое изображение можно редактировать не только визуально, но и в текстовом режиме. Для редактирования SVG-кода в пакете предусмотрен встроенный текстовый редактор XML. В целях удобства управления объектами имеется встроенная инструментальная панель Document Object Model (DOM), представляющая собой иерархический древовидный набор объектов в документе SVG, что позволяет выбрать любой объект документа для редактирования его свойств.

НКО | 5 лучших инструментов для создания визуализаций

Ека­те­ри­на Изме­стье­ва

Всего материалов: 711

5 лучших инструментов для создания визуализаций

С ростом чис­ла набо­ров откры­тых дан­ных и появ­ле­ни­ем новых инстру­мен­тов для их обра­бот­ки все боль­ше людей реша­ют занять­ся визу­а­ли­за­ци­ей дан­ных. Но ино­гда быва­ет слож­но понять, с чего начать – какие инстру­мен­ты луч­ше и что могут посо­ве­то­вать про­фес­си­о­на­лы? Fast Company под­го­то­ви­ли мате­ри­ал, кото­рый помо­жет отве­тить на эти вопро­сы.

Раз­го­вор о визу­а­ли­за­ции дан­ных невоз­мо­жен без раз­го­во­ра о D3 (Data Driven Documents) – одной из самых попу­ляр­ных биб­лио­тек в этой обла­сти. D3 исполь­зу­ет­ся для того, что­бы гене­ри­ро­вать SVG-гра­фи­ку – век­тор­ный фор­мат изоб­ра­же­ний, под­дер­жи­ва­е­мый веб-бра­у­зе­ра­ми.

D3 при­об­рел попу­ляр­ность во мно­гом бла­го­да­ря инте­ре­су веб-дизай­не­ров к SVG-фор­ма­ту – век­тор­ная гра­фи­ка хоро­шо выгля­дит на экра­нах с высо­ким раз­ре­ше­ни­ем (напри­мер, на Retina-экра­нах Apple), кото­рые ста­но­вят­ся все более рас­про­стра­нен­ны­ми.

Посмот­рим прав­де в гла­за – для визу­а­ли­за­ции дан­ных в фор­ма­те SVG не суще­ству­ет луч­шей биб­лио­те­ки. Суще­ству­ет мно­же­ство инте­рес­ных про­ек­тов, сде­лан­ных при помо­щи D3, напри­мер, NVD3 для рабо­ты с гра­фи­ка­ми или Crossfilter, с помо­щью кото­ро­го мож­но филь­тро­вать дан­ные.

Moritz Stefaner , экс­перт в обла­сти визу­а­ли­за­ции дан­ных

Scott Murray, кре­а­тив­ный кодер и автор кни­ги Interactive Data Visualization for the Web, так­же счи­та­ет D3 хоро­шим инстру­мен­том:

D3 – это очень мощ­ный инстру­мент, исполь­зу­ю­щий все, что могут пред­ло­жить совре­мен­ные бра­у­зе­ры. Обрат­ная сто­ро­на это­го заклю­ча­ет­ся в том, что если бра­у­зер не под­дер­жи­ва­ет что-то, напри­мер, трех­мер­ный рен­де­ринг с WebGL, то D3 так­же не будет под­дер­жи­вать это.

Scott Murray , кре­а­тив­ный кодер

Посколь­ку D3 явля­ет­ся общей биб­лио­те­кой, она может не под­хо­дить для неко­то­рых про­ек­тов, но для визу­аль­но­го отоб­ра­же­ния дан­ных в бра­у­зе­ре это один из луч­ших инстру­мен­тов, кото­рые вы може­те най­ти.

D3 – это мощ­ный инстру­мент для созда­ния сво­их соб­ствен­ных визу­а­ли­за­ций, но если вы хоти­те сде­лать стан­дарт­ный гра­фик и не думать очень мно­го о дизайне, то вам подой­дет инстру­мент Vega. Создан­ный на осно­ве D3 инстру­мент Vega дает воз­мож­ность исполь­зо­вать фор­мат JSON вме­сто напи­са­ния кода D3/JavaScript, а затем гене­ри­ро­вать интер­ак­тив­ную гра­фи­ку, исполь­зуя HTML5 Canvas или SVG. Это силь­но упро­ща­ет и уско­ря­ет про­цесс созда­ния гра­фи­ков.

Недо­ста­ток Vega и неко­то­рых дру­гих подоб­ных инстру­мен­тов заклю­ча­ет­ся в том, что в них быва­ет слож­но созда­вать нестан­дарт­ные гра­фи­ки – для таких видов визу­а­ли­за­ции я пред­по­чи­таю писать D3 с нуля.

Scott Murray , кре­а­тив­ный кодер

Processing

Processing – это инстру­мент, суще­ству­ю­щий уже несколь­ко лет. Начать рабо­тать с этим инстру­мен­том очень про­сто – его мож­но загру­зить и уста­но­вить на любую плат­фор­му. Сам язык про­грам­ми­ро­ва­ния тоже доста­точ­но про­стой – напи­сав все­го одну линию кода, вы уже може­те создать что-то визу­аль­ное.

Processing – это язык про­грам­ми­ро­ва­ния, сре­да раз­ра­бот­ки и онлайн-сооб­ще­ство, что созда­ет пре­крас­ный инстру­мент для гене­ра­тив­ных, интер­ак­тив­ных и ани­ма­ци­он­ных при­ло­же­ний.

Benjamin Wiederkehr , парт­нер в сту­дии Interactive Thing и редак­тор Datavisualization.ch

Processing так­же име­ет ответв­ле­ние – Processing.js, с помо­щью кото­ро­го мож­но созда­вать визу­а­ли­за­цию, исполь­зуя веб-стан­дар­ты, и кото­рый не тре­бу­ет ника­ких пла­ги­нов.

Про­сто­та и боль­шое сооб­ще­ство, участ­ни­ки кото­ро­го все­гда гото­вы помочь друг дру­гу, дела­ют Processing одним из самых доступ­ных инстру­мен­тов, когда дело каса­ет­ся визу­а­ли­за­ции дан­ных.

Gephi

В то вре­мя как D3 и Processing могут быть исполь­зо­ва­ны для самых раз­ных целей и задач, Gephi име­ет более опре­де­лен­ное назна­че­ние. Gephi – это инстру­мент номер один для визу­а­ли­за­ции сетей. Хоти­те ли вы постро­ить модель вза­и­мо­от­но­ше­ний внут­ри ком­па­нии или систе­му пасов в фут­боль­ном мат­че – Gephi помо­жет визу­а­ли­зи­ро­вать раз­лич­ные сети и свя­зи меж­ду их узла­ми.

Как и Processing, Gephi лег­ко уста­но­вить, а после уста­нов­ки – импор­ти­ро­вать ваши дан­ные, чистить их и визу­а­ли­зи­ро­вать.

Визу­а­ли­за­ция сетей может быть экс­пор­ти­ро­ва­на и встро­е­на в любой веб-доку­мент, так что ею лег­ко будет поде­лить­ся с вашей ауди­то­ри­ей.

Benjamin Wiederkehr , парт­нер в сту­дии Interactive Thing и редак­тор Datavisualization.ch

Dygraphs

Dygraph – это быст­рая, гиб­кая и откры­тая JavaScript-биб­лио­те­ка, кото­рая поз­во­ля­ет иссле­до­вать и интер­пре­ти­ро­вать мас­си­вы дан­ных. В отли­чие от Vega, Dygraph явля­ет­ся пол­но­стью настра­и­ва­е­мым инстру­мен­том. Dygraph рабо­та­ет во всех основ­ных бра­у­зе­рах, а так­же явля­ет­ся пол­но­стью интер­ак­тив­ным – такие функ­ции, как зуми­ро­ва­ние и скролл явля­ют­ся лишь вер­ши­ной айс­бер­га.

Советы экспертов

Все выше­при­ве­ден­ные инстру­мен­ты могут быть очень полез­ны­ми, но даже они не все­гда могут спа­сти нович­ка в обла­сти визу­а­ли­за­ции дан­ных от слож­но­стей. Какие сове­ты могут дать экс­пер­ты?

Мой пер­вый совет: узнай­те как мож­но боль­ше о суще­ству­ю­щих инстру­мен­тах, это помо­жет вам очень быст­ро созда­вать стан­дарт­ные гра­фи­ки. В нача­ле про­ек­та осо­бен­но важ­но быст­ро созда­вать мно­го гра­фи­ков – они помо­гут вам понять, с каки­ми дан­ны­ми вы име­е­те дело и най­ти в них инте­рес­ные исто­рии. Лич­но я доволь­но часто исполь­зую Tableau и Gephi, а еще такой инстру­мент, как CartoDB , кото­рый хоро­шо под­хо­дит для карт, и толь­ко что выпу­щен­ный RAW, кото­рый поз­во­ля­ет лег­ко гене­ри­ро­вать инте­рес­ные гра­фи­ки.

Moritz Stefaner , экс­перт в обла­сти визу­а­ли­за­ции дан­ных

Убе­ди­тесь, что инстру­мент, кото­рый вы выбра­ли, опти­ма­лен для рабо­ты с той инфор­ма­ци­ей, кото­рую вы хоти­те пред­ста­вить визу­аль­но.

Важ­но пони­мать, с каки­ми дан­ны­ми вы рабо­та­е­те и что вы хоти­те с ними сде­лать. Неко­то­рые биб­лио­те­ки могут рабо­тать с раз­ны­ми типа­ми дан­ных, а неко­то­рые ори­ен­ти­ро­ва­ны на опре­де­лен­ные типы дан­ных. Вам будет намно­го про­ще рабо­тать, если вы выбе­ре­те пра­виль­ный инстру­мент.

Scott Murray , кре­а­тив­ный кодер

Помощь сообщества

Тем, кто толь­ко начи­на­ет зани­мать­ся визу­а­ли­за­ци­ей дан­ных, сто­ит рас­смот­реть те инстру­мен­ты, вокруг кото­рых собра­лось боль­шое (и гото­вое помо­гать) сооб­ще­ство.

Тем, кто толь­ко начи­на­ет, я сове­то­вал бы обра­тить вни­ма­ние на Processing или D3. Оба этих инстру­мен­та име­ют боль­шие сооб­ще­ства и мно­же­ство при­ме­ров, на кото­рых вы може­те учить­ся.

Jan Willem Tulp , экс­перт в визу­а­ли­за­ции дан­ных

Зна­ком­ство с раз­ны­ми при­ме­ра­ми и под­хо­да­ми к визу­а­ли­за­ции дан­ных помо­жет вам най­ти свой баланс меж­ду искус­ством и нау­кой в визу­а­ли­за­ции.

Я хочу посо­ве­то­вать узнать как мож­но боль­ше о самой визу­а­ли­за­ции. Смот­ри­те хоро­шие при­ме­ры, читай­те кни­ги, бери­те онлайн-кур­сы. Пото­му что, несмот­ря на то, что инстру­мен­ты помо­гут вам сде­лать хоро­шую визу­а­ли­за­цию, имен­но вы явля­е­тесь тем чело­ве­ком, кото­рый ее созда­ет.

Jan Willem Tulp , экс­перт в визу­а­ли­за­ции дан­ных

HTML5 Canvas or SVG?

By Elizabeth Anatskaya

Scalable Vector Graphics

Масштабируемая векторная графика

  • Язык разметки для описания двумерной графики
  • Основан на XML
  • Включает в себя три типа объектов: фигуры, изображения и текст
  • Спроектирован для работы с другими стандартами W3C, такими, как CSS, DOM и SMIL

What for?

«Всё то Retina, что больше 300ppi» — Стив Джобс.


Проблема: несоответствие графики возможностям дисплеев.

SVG instead of bitmap

SVG графика на замену растровых картинок

Can I?

r — радиус круга

cx, cy — координаты центра круга

rx, ry — горизонтальный и вертикальный радиусы эллипса

cx, cy — координаты центра эллипса

Elementary components

SVG-фигуры и трансформации

x,y — координаты левого верхнего угла фигуры

width, height — ширина и высота прямоугольника
rx и ry — cкругления

points — x,y-координаты вершин фигуры, через пробел

stroke — x,y координаты вершин фигуры, через пробел

stroke-width — ширина обводки

r — радиус круга

cx, cy — координаты центра круга

rx, ry — горизонтальный и вертикальный радиусы эллипса

cx, cy — координаты центра эллипса

Transformation

Метаморфозы и трансформации

Animation

Implementation

Внедрение SVG на страницу

Если вы планируете использовать более продвинутые функции SVG, такие как применение таблицы стилей CSS или внедрение скриптов, то тег HTML5

SVG документ может быть добавлен, как любое другое изображение.

SVG может быть использован в качестве CSS фона для любого элемента:

Для браузеров, не поддерживающих SVG

Этот метод работает почти во всех HTML5 браузерах и также поддерживает анимацию, скрипты и CSS. Однако применять его стоит лишь для небольших SVG-изображений для сохранения читаемости кода.

Как создавать визуальный контент с помощью удобного и дешевого инструмента Canva

Время чтения: 6 минут Нет времени читать? Нет времени?

Интернет-индустрия долгое время развивалась под девизом улучшения пользовательского опыта. Сайты и интернет-сервисы делали все, чтобы упростить потребление и тиражирование контента. Например, даже дошкольники умеют не просто смотреть ролики на YouTube, но и делиться видеоконтентом с друзьями в социальных сетях, загружать видео с YouTube на компьютер, встраивать код ролика на страницу блога или сайта.

Сегодня фокус развития интернета смещается с потребления и тиражирования на создание контента. Это касается и визуального контента. Например, обратите внимание на сервисы для создания и распространения видео Vine и Instagram.

Сложилось так, что лучший визуальный контент создают профессионалы: дизайнеры, художники, аниматоры, фотографы. Они используют специальное программное обеспечение, дорогое оборудование и мощные компьютеры. Однако сейчас появляются простые и недорогие инструменты, с помощью которых каждый человек может создавать визуальный контент. В этой статье речь пойдет о сервисе Canva, благодаря которому вы можете заниматься дизайном. Да-да, вы можете стать дизайнером, даже если не вполне представляете, что такое дизайн.

Что такое Canva

Canva — это онлайн-сервис, который позволяет любому человеку заниматься веб-дизайном. Вы можете стать дизайнером без специальной подготовки, дорогого ПО и оборудования.

Canva — это австралийский стартап, который привлек внимание известных инвесторов и бизнес-ангелов. Евангелистом сервиса стал известный интернет-предприниматель Гай Кавасаки.

Разработчики сервиса Canva поставили цель сделать веб-дизайн доступным каждому человеку. Используя данный инструмент, вы можете воплощать идеи в графический контент, даже если совсем не умеете рисовать. Сервис работает по принципу drag-and-drop. Вы можете пользоваться Canva бесплатно. Однако некоторые изображения доступны только после оплаты.

Пользователям Canva доступны десятки шаблонов, бесплатных изображений, коллекций иконок, шрифтов, фонов, цветов. Также вы можете начать с чистого листа, создавая собственные шаблоны.

Как использовать Canva

Вы можете войти на сайт Canva с помощью своего аккаунта в Facebook. После этого система предложит вам пройти краткий ознакомительный урок использования сервиса.

Во-первых, система предлагает научиться работать с палитрой цветов. Для этого необходимо кликнуть на предложенном круге и выбрать для него цвет.

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

В-третьих, система предлагает научиться работать с фоном. Если вам нужна подсказка, воспользуйтесь меню Need a hint в правом нижнем углу экрана. В этом случае вы получите видеоподсказку.

Чтобы выбрать фон, кликните левой кнопкой мыши в предложенном окне, чтобы вызвать меню.

Также вы можете выбрать один из шаблонных фонов. Для этого выберите соответствующее меню в левой части экрана.

В-четвертых, система предлагает закрепить навыки поиска предметов и работы с технологией drag-and-drop. Canva предлагает найти изображения любимого блюда, выбрать одно из них и перенести в предложенное поле.

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

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

Создаем графику для поста в блоге

Завершив обучение, вы можете приступить к работе с сервисом Canva. Система предлагает вам создать дизайн для поста в Pinterest, презентацию, постер, обложку для Facebook, графику для блога и т.д.

Представьте, что вы хотите создать графику для блога. В первую очередь вам нужно выбрать шаблон макета. Допустим, вы остановились на шаблоне Hot or not.

Выбрав шаблон, вы можете изменить расположение элементов, добавить необходимый текст и фото, поменять цвет фона. Чтобы выбрать фон, воспользуйтесь меню Backgrounds в левой части страницы.

Чтобы поменять цвет, кликнете левой кнопкой мыши по нужному элементу.

Выберите подходящий по вашему мнению цвет.

Чтобы заменить текст, достаточно выбрать нужный элемент левой кнопкой мыши. Вы можете менять шрифты и размеры.

Изображение, которое у вас получилось, едва ли выиграет приз на конкурсе дизайна. Однако оно в большинстве случаев превосходит растиражированные стоковые фото. Чтобы сохранить свой шедевр, воспользуйтесь меню Link and publish.

Примеры использования сервиса Canva

Также Джей Аканзо использовал Canva для создания визуальной подписи своей компании. Эта подпись используется в сообщениях компании в Twitter.

Сервис Canva: преимущества и недостатки

К преимуществам Canva относятся:

  • Простота использования.
  • Наличие бесплатных шаблонов страниц, изображений и т.п.
  • «Защита от дурака»: система не позволяет сохранить изображение, если вы не завершили работу или допустили серьезную ошибку.
  • Вы можете сохранять свои работы в форматах png и pdf. Первый подходит для публикации изображений онлайн, а второй можно использовать для изготовления печатной продукции.

Сервис Canva имеет следующие недостатки:

  • Ограниченное количество стандартных шаблонов.
  • Вы не можете менять размер изображения в ходе работы.
  • Отсутствует возможность использовать графические элементы из разных шаблонов.

Сделает ли Canva дизайнером любого человека

Canva — это удобный и простой инструмент, с помощью которого каждый человек действительно может решать дизайнерские задачи. Используя его, вы можете создавать графику самостоятельно, даже если не имеете специальной подготовки. Однако профессиональные дизайнеры могут спать спокойно: Canva не лишает их работы. Обыватель может взять в руки кисти и мольберт Ван Гога, но это не передаст ему гениальность великого творца. Каждый желающий может использовать Canva, но этот инструмент не научит его рисовать по-настоящему оригинальную графику.

Топ-пост этого месяца:  Как вывести последние комментарии в Wordpress (без плагина), комментарии из указанной рубрики
Добавить комментарий