Pull to refresh

Comments 21

Очень интересно, спасибо. Несколько дополнений, если позволите:


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

"Почистить" SVG-файл, в том числе и уменьшив количество цифр после запятой, можно с помощью онлайн-версии SVGO. Осторожно, по умолчанию он настроен на минимальный и нечитабельный размер файла.


С SVG 2 атрибут xlink:href устарел, вместо него рекомендуется использовать href

Теоретически это чистая правда, но на практике SVG 2 поддерживается слабо и, например, href не работает в Safari/iOS.


Для тех, кто заметил сходство с CSS селекторами спешу огорчить: обратиться к элементам по классу не получится

На самом деле, это совсем не CSS-селекторы, и даже не, как можно было бы подумать, XPath, а нечто называемое IRI. Полная форма выглядит так: http://example.com/someDrawing.svg#Lamppost — теоретически можно использовать одни и те же градиенты, символы и анимации между разными SVG-шками на одной странице.

Количество цифр после запятой можно уменьшить еще на этапе экспорта из Illustrator (уменьшив значение параметра «качество»). Об SVGO я знаю и упоминал его в туториале про анимированный вопросительный знак. А про поддержку href я действительно забыл упомянуть. Исправлюсь.
Спасибо за дополнения.

Мне, например, проще самому прогнать через SVGO, чем втолковывать художнику, что у него где-то там слишком много циферок. Или, например, файл есть, а художника уже не найти. Ну и не все рисуют в люстре, а у Inkscape свои заморочки (с которыми SVGO так же помогает).

Вариант номер три – просто вставит содержимое SVG документа прямо во внутрь HTML.

У этого варианта есть большой недостаток: SVG попадает в общее пространство имён (class, id) страницы, поэтому могут возникнуть конфликты с другими SVG-изображениями на странице. Например, градиент из одного изображения попадёт в другое, если оба они используют <​linearGradient> с одинаковым id.

Еще есть вариант вставки SVG в документ в обертке из Custom Element и Shadow DOM, при таком подходе можно не беспокоится о уникальности айдишников и классов у SVG-элементов и будет работать кэширование.
Не слышал про такой способ. Можно узнать о нем по подробнее?
Создаете файл, что-то типа svg-example.js (он у нас и будет кэшироваться), со следующим, примерно, кодом:
class SvgExample extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({
      mode: 'open',
    });
    this.shadowRoot.innerHTML = /*html*/ `
      <style>
        :host {
          display: inline-block;
        }
        #rect {
          fill: #f00;
        }
      </style>
      <svg height="100" width="100" viewBox="0 0 100 100">
        <rect id="rect" height="50" width="50" x="25" y="25" />
      </svg>
    `;
  }
}
window.customElements.define('svg-example', SvgExample);


Подключаете этот скрипт к документу и в разметке добавляете новый тег
<svg-example></svg-example>
, там, где вы хотите видеть изображение. Все дополнительную логику и стили можно добавить в этот же js-класс. Стили будут закрыты от внешних влияний (CSS-переменные будут доступны), код можно оформить в модуль и использовать многократно впоследствии. Эли лишь один из вариантов. Mожно сделать так, чтобы ваш Custom Element грузил файл по ссылке, по аналогии с тегом img, но при этом понимал переменные из CSS и работал с вашим JS (мой любимый способ вставки SVG). Это может выглядеть как-то так:
<svg-loader src="images/my-image.svg"><svg-loader>
UFO landed and left these words here
Есть два основных способа анимации SVG элемента
Еще анимация средствами js. Скрипт можно помещать внутрь svg, либо подключать внешний, более того, Illustrator предлагает для этого свой UI для добавления обработчиков событий и переменных.

Если ты косо смотришь на атрибут transform, то ты прав. Именно он портит всю малину.
Это еще цветочки по сравнению с тем, какой svg код генерирует Inkscape. Там в порядке вещей, что путь завернут в группу с трансформацией, завернутой в другую группу с трансформацией, завернутой… и так далее =)

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

То же можно сказать и про CSS. Именно поэтому я уделил ему в статье не так много места как SMIL.
(возможно я все таки расширю эту статью информацией про JS)
В качестве значения begin можно указать событие, при котором начнется анимация, но без приставки «on».
Без приставки on — это и есть событие. А с приставкой (вернее, с предлогом и без пробела) — это имя HTML-атрибута.

(И, если можете, поправьте разнообразные множественные "чтобы/что бы", "также/так же", "тоже/то же", "-тся/-ться" и несколько опечаток. Действительно неприятно за техресурс, ведь не троечники же на нём пишут…)
Статья достаточно объемная, и пусть я старался не допускать ошибок, признаю что они есть. Однако статья написана чтобы донести знания, а не доставить эстетическое удовольствие. Буду рад исправить ошибки если вы напишите мне где конкретно я их допустил.
В прошлый раз я отправил в личку человеку где-то с полста ошибок.
Здесь, думаю, будет примерно столько же, так что Вам будет легче просто скопировать статью в Word с включённой проверкой орфографии.
И повторюсь: больше запятых богу запятых.
Для примера: только Ваш комментарий.
Статья достаточно объемная, и пусть я старался не допускать ошибок, признаю→,← что они есть. Однако статья написана→,← чтобы донести знания, а не доставить эстетическое удовольствие. Буду рад исправить ошибки→,← если вы напишиете мне→,← где конкретно я их допустил.


P. S. А отсутствие орфографических и грамматических ошибок — это не способ доставить удовольствие. Это способ показать собственную грамотность.
Дело в том, что я изначально писал статью в Word и я исправил все ошибки, которые он мне подсветил. Перед публикацией статьи я перечитал ее целиком 7 раз и считаю, что исправил все, что было в моих силах.

Не поймите меня неправильно, я согласен, что читать орфографически правильный текст гораздо проще и приятнее. Но все же я надеюсь на некоторое понимание и снисходительность читателей.
Странно, что слово «совей» он не подчеркнул. Он считает его альтернативной формой родительного падежа множественного падежа от слова сова или повелительным наклонением от глагола советь?
Но с простановкой запятых и выбором из двух грамматически правильных вариантов по смыслу у Ворда плоховато, согласен. Тут только знания самого пишущего помогут.
Ладно уж, помогу Ворду. Ждите.
Правильный экспорт SVG из Illustrator


Может кому пригодиться. Мой список «требований» к дизайнерам при создании svg-иллюстраций:
  • иллюстрации должны быть подогнаны по пиксельной сетке
  • не должно быть дробных значений в размерах, по максимуму избегать их
  • по минимуму использовать кисть, только кривые Безье или простые геометрические фигуры, чем меньше узловых точек, тем лучше
  • пересекающиеся фигуры с одинаковыми стилями должны быть по возможности объединены, т.е. чем меньше сущностей — тем лучше (хотя это по идее умеет делать svgo)
  • одинаковые фигуры не должны копироваться. Вместо этого создать образец (в палитре образцы) и копировать уже его (тогда в коде вместо повторений фигур будет использоваться тег <use xlink:href> который будет ссылаться на данную фигуру, что экономит итоговый размер svg)
  • размер монтажной области в конце подогнать по границам иллюстрации
  • убрать все лишние вспомогательные слои (растровые подложки и т.д.)
Эх, такую бы статью мне месяц назад! У меня вот в чём загвоздка, например у меня есть несколько анимаций, которые применяются к каждому элементу, по клику на этот элемент. Это всё работает, анимация заканчивается тогда, когда кликают на другой (соответственно там начинается). Но надо ещё сделать автовоспроизведение по очереди этих анимаций (бесконечное). Это тоже работает если отдельно прописать (начинать тогда, когда заканчивается пред. анимация). А вот вот вместе начинается какая-то ерунда:( при открытии сама по себе анимация идет хорошо, но стоит кликнуть на элемент, начинается вакханалия — анимации разных элементов начинают самопроизвольно воспроизводиться (условия в begin пишу «click, prev.end», в end («next.click, this.end) (названия условные)). Может ты подскажешь, что же надо делать?
Badmik, только сегодня увидел твой комментарий, прости если долго не отвечал. Надеюсь твой вопрос все еще актуален.
По сути с условиями, что ты написал, анимация будет действительно бесконечной.
Остановка анимации любого из элементов будет инициировать воспроизведение этой же анимации на следующем элементе, а так как ты вместе с этим начинаешь еще одну анимацию по событию click, то начинается вакханалия, потому что воспроизводится не одна анимация, а две.
Анимация с условиями begin="prev.end", end="next.click" будучи запущенной один раз не сможет остановиться до перезагрузки документа.
За все время, что я думал над твоим вопросом, я не смог придумать адекватный способ реализации. Вижу только 2 варианта:
  • Выбрать что-то одно (либо бесконечный, либо анимацию по клику)
  • Воспроизводить обе анимации одновременно (Прокатит только если они между собой не конфликтуют)
для путешествия по элементам SVG я использую https://github.com/svgdotjs/svgdom

для вставки SVG использую https://github.com/iconic/SVGInjector

модель работы такая:

добавляю
<img class="inject-me" src="img.svg">

потом
var mySVGsToInject = document.querySelectorAll('img.inject-me');
SVGInjector(mySVGsToInject, null, function ()
{
     вот тут выполняется код после загрузки в документ всех svg элементов
}


результат как будто код svg вставлен в само тело html документа
Only those users with full accounts are able to leave comments. Log in, please.