Как стать автором
Поиск
Написать публикацию
Обновить

Комментарии 21

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


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

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


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

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


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

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

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

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

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

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

Всего голосов 3: ↑3 и ↓0+3
Еще есть вариант вставки SVG в документ в обертке из Custom Element и Shadow DOM, при таком подходе можно не беспокоится о уникальности айдишников и классов у SVG-элементов и будет работать кэширование.
Комментарий пока не оценивали0
Не слышал про такой способ. Можно узнать о нем по подробнее?
Комментарий пока не оценивали0
Создаете файл, что-то типа 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>
Всего голосов 2: ↑2 и ↓0+2

А класс можете выложить?

Комментарий пока не оценивали0
НЛО прилетело и опубликовало эту надпись здесь
Суховато. Может об свг иначе и нельзя.
Всего голосов 2: ↑0 и ↓2-2
НЛО прилетело и опубликовало эту надпись здесь
Когда я писал про основные способы анимации, я изначально не включал в этот список JS
Здесь не будет никаких плагинов, библиотек и прочего, речь пойдет только о чистом SVG.
Поскольку он является языком программирования, я считаю его самостоятельной технологией, которая не является частью SVG и существует отдельно от него.

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

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


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

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


Может кому пригодиться. Мой список «требований» к дизайнерам при создании svg-иллюстраций:
  • иллюстрации должны быть подогнаны по пиксельной сетке
  • не должно быть дробных значений в размерах, по максимуму избегать их
  • по минимуму использовать кисть, только кривые Безье или простые геометрические фигуры, чем меньше узловых точек, тем лучше
  • пересекающиеся фигуры с одинаковыми стилями должны быть по возможности объединены, т.е. чем меньше сущностей — тем лучше (хотя это по идее умеет делать svgo)
  • одинаковые фигуры не должны копироваться. Вместо этого создать образец (в палитре образцы) и копировать уже его (тогда в коде вместо повторений фигур будет использоваться тег <use xlink:href> который будет ссылаться на данную фигуру, что экономит итоговый размер svg)
  • размер монтажной области в конце подогнать по границам иллюстрации
  • убрать все лишние вспомогательные слои (растровые подложки и т.д.)
Всего голосов 1: ↑1 и ↓0+1
Эх, такую бы статью мне месяц назад! У меня вот в чём загвоздка, например у меня есть несколько анимаций, которые применяются к каждому элементу, по клику на этот элемент. Это всё работает, анимация заканчивается тогда, когда кликают на другой (соответственно там начинается). Но надо ещё сделать автовоспроизведение по очереди этих анимаций (бесконечное). Это тоже работает если отдельно прописать (начинать тогда, когда заканчивается пред. анимация). А вот вот вместе начинается какая-то ерунда:( при открытии сама по себе анимация идет хорошо, но стоит кликнуть на элемент, начинается вакханалия — анимации разных элементов начинают самопроизвольно воспроизводиться (условия в begin пишу «click, prev.end», в end («next.click, this.end) (названия условные)). Может ты подскажешь, что же надо делать?
Комментарий пока не оценивали0
Badmik, только сегодня увидел твой комментарий, прости если долго не отвечал. Надеюсь твой вопрос все еще актуален.
По сути с условиями, что ты написал, анимация будет действительно бесконечной.
Остановка анимации любого из элементов будет инициировать воспроизведение этой же анимации на следующем элементе, а так как ты вместе с этим начинаешь еще одну анимацию по событию click, то начинается вакханалия, потому что воспроизводится не одна анимация, а две.
Анимация с условиями begin="prev.end", end="next.click" будучи запущенной один раз не сможет остановиться до перезагрузки документа.
За все время, что я думал над твоим вопросом, я не смог придумать адекватный способ реализации. Вижу только 2 варианта:
  • Выбрать что-то одно (либо бесконечный, либо анимацию по клику)
  • Воспроизводить обе анимации одновременно (Прокатит только если они между собой не конфликтуют)
Комментарий пока не оценивали0
для путешествия по элементам 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 документа
Всего голосов 1: ↑1 и ↓0+1
Зарегистрируйтесь на Хабре, чтобы оставить комментарий

Публикации

Показать лучшие за всё время

Истории

Ваш аккаунт

Разделы

Информация

Услуги

Техническая поддержка
© 2006–2024, Habr