Комментарии 14
Эх, эту бы статью, да две недели назад!
Пишу сейчас приложение для веба (внутри взаимодействие с кучей разных объектов), убил полтора месяца, пытаясь сделать его на Canvas. Сдали нервы, попробовал первый раз в жизни SVG и, о чудо, тот же функционал переписал за пару дней. В итоге сделал вывод: canvas для рисования, svg для взаимодействия между кучей различных объектов сложной формы (да-да, я знаю, что голову нужно включать заранее, но что делать, если с canvas я работал, а про SVG только слышал?).
Пишу сейчас приложение для веба (внутри взаимодействие с кучей разных объектов), убил полтора месяца, пытаясь сделать его на Canvas. Сдали нервы, попробовал первый раз в жизни SVG и, о чудо, тот же функционал переписал за пару дней. В итоге сделал вывод: canvas для рисования, svg для взаимодействия между кучей различных объектов сложной формы (да-да, я знаю, что голову нужно включать заранее, но что делать, если с canvas я работал, а про SVG только слышал?).
А какую библиотеку использовали? Мне как раз надо будет кое что на svg сделать.
От себя могу посоветовать глянуть в сторону http://raphaeljs.com/.
Можно глянуть ещё в сторону d3.js, там очень мощные средства работы с SVG (да и вообще с любыми данными). Бонус, теперь по этой библиотеке есть русскоязычная справка :)
Rafael пробовал, но там слишком много всего, что мне не надо, остановился на svg.js
Заглянул в исходник первой иллюстрации (с сайта автора). Там такой трэш! Никаких «head» и «wing», никакой структуры и куча пустых «g». В примере с деревьями ниаких defs и use. Чему она учит?
Я не сразу заметил даже, что там svg. Еще думал, почему ж на habrastorage не перезалилось.
Взгляните внимательнее на исходник. Это изображение в Adobe Illustrator нарисовано. Отсюда и грязный код. Так что первую часть статьи можно рассматривать и как небольшой мануал по прихорашиванию автоматически генерируемого кода.
Зато стало яснее, откуда взялись path вместо circle.
Взгляните внимательнее на исходник. Это изображение в Adobe Illustrator нарисовано. Отсюда и грязный код. Так что первую часть статьи можно рассматривать и как небольшой мануал по прихорашиванию автоматически генерируемого кода.
Зато стало яснее, откуда взялись path вместо circle.
Там не только SVG, там еще и JPEG местами. :)
Интересно, какой-нибудь редактор умеет правильно сохранять эти g, use, defs?
Интересно, какой-нибудь редактор умеет правильно сохранять эти g, use, defs?
Я думаю, количество графических редакторов с такой фичей примерно равно количеству WISIWYG текстовых процессоров, умеющих сохранять нормальный HTML.
Я привык визуализировать в голове, поэтому для меня MarkitUp! — лучший встраиваемый редактор.
Но пример для сравнения выбран подходящий. Визуальные редакторы используются для упрощения создания и редактирования контента (хоть текстового, хоть графического) в конечном его виде, без опускания на более низкие уровни.
В случае с графическим редактором, работающим с SVG, не стоит задачи сделать красивый код. Необходимо вот здесь нарисовать красный кружочек, а там — синий квадратик, потом все это сохранить, чтобы оно везде отобразилось, а другой редактор мог открыть и внести свои изменения.
Теоретически, сделать редактор, дающий на выходе более читаемый код, можно. Возможно, какие-то даже уже позволяют подобное (только надо подольше копаться в настройках, за исключением группировок, которые и так используются). Но придется и человеку оперировать уже не квадратиками и кружочками, а определениями, группами, ссылками и т.д.
Описанные в посте элементы, на мой взгляд, нужны, скорее, не художникам, а программистам. Для процедурной генерации изображений, например. Или для использования SVG-файла как хранилища иконок.
Но пример для сравнения выбран подходящий. Визуальные редакторы используются для упрощения создания и редактирования контента (хоть текстового, хоть графического) в конечном его виде, без опускания на более низкие уровни.
В случае с графическим редактором, работающим с SVG, не стоит задачи сделать красивый код. Необходимо вот здесь нарисовать красный кружочек, а там — синий квадратик, потом все это сохранить, чтобы оно везде отобразилось, а другой редактор мог открыть и внести свои изменения.
Теоретически, сделать редактор, дающий на выходе более читаемый код, можно. Возможно, какие-то даже уже позволяют подобное (только надо подольше копаться в настройках, за исключением группировок, которые и так используются). Но придется и человеку оперировать уже не квадратиками и кружочками, а определениями, группами, ссылками и т.д.
Описанные в посте элементы, на мой взгляд, нужны, скорее, не художникам, а программистам. Для процедурной генерации изображений, например. Или для использования SVG-файла как хранилища иконок.
По невыясненным причинам автором описаны круги путями вместо использования circle
Так код SVG сейчас пишется инкскейпом, например :)
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Структурирование, группировка и привязка в SVG — элементы <g>, <use>, <defs> и <symbol>