Комментарии 21
Очень интересно, спасибо. Несколько дополнений, если позволите:
Единственное что я скажу – при отрисовке фигур следует следить за значениями, желательно что бы они имели лишь одно число после запятой, а лучше вообще были целыми. Следовать этому правилу не обязательно, но оно уменьшит размер файла, упростит дальнейшую анимацию и визуально сократит объем информации.
"Почистить" SVG-файл, в том числе и уменьшив количество цифр после запятой, можно с помощью онлайн-версии SVGO. Осторожно, по умолчанию он настроен на минимальный и нечитабельный размер файла.
С SVG 2 атрибут xlink:href устарел, вместо него рекомендуется использовать href
Теоретически это чистая правда, но на практике SVG 2 поддерживается слабо и, например, href не работает в Safari/iOS.
Для тех, кто заметил сходство с CSS селекторами спешу огорчить: обратиться к элементам по классу не получится
На самом деле, это совсем не CSS-селекторы, и даже не, как можно было бы подумать, XPath, а нечто называемое IRI. Полная форма выглядит так: http://example.com/someDrawing.svg#Lamppost
— теоретически можно использовать одни и те же градиенты, символы и анимации между разными SVG-шками на одной странице.
Спасибо за дополнения.
Вариант номер три – просто вставит содержимое SVG документа прямо во внутрь HTML.
У этого варианта есть большой недостаток: SVG попадает в общее пространство имён (class, id) страницы, поэтому могут возникнуть конфликты с другими SVG-изображениями на странице. Например, градиент из одного изображения попадёт в другое, если оба они используют <linearGradient>
с одинаковым id
.
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>
Здесь не будет никаких плагинов, библиотек и прочего, речь пойдет только о чистом SVG.Поскольку он является языком программирования, я считаю его самостоятельной технологией, которая не является частью SVG и существует отдельно от него.
То же можно сказать и про CSS. Именно поэтому я уделил ему в статье не так много места как SMIL.
(возможно я все таки расширю эту статью информацией про JS)
В качестве значения begin можно указать событие, при котором начнется анимация, но без приставки «on».Без приставки
on
— это и есть событие. А с приставкой (вернее, с предлогом и без пробела) — это имя HTML-атрибута.(И, если можете, поправьте разнообразные множественные "чтобы/что бы", "также/так же", "тоже/то же", "-тся/-ться" и несколько опечаток. Действительно неприятно за техресурс, ведь не троечники же на нём пишут…)
Здесь, думаю, будет примерно столько же, так что Вам будет легче просто скопировать статью в Word с включённой проверкой орфографии.
И повторюсь: больше запятых богу запятых.
Для примера: только Ваш комментарий.
Статья достаточно объемная, и пусть я старался не допускать ошибок, признаю→,← что они есть. Однако статья написана→,← чтобы донести знания, а не доставить эстетическое удовольствие. Буду рад исправить ошибки→,← если вы напишиете мне→,← где конкретно я их допустил.
P. S. А отсутствие орфографических и грамматических ошибок — это не способ доставить удовольствие. Это способ показать собственную грамотность.
Не поймите меня неправильно, я согласен, что читать орфографически правильный текст гораздо проще и приятнее. Но все же я надеюсь на некоторое понимание и снисходительность читателей.
Но с простановкой запятых и выбором из двух грамматически правильных вариантов по смыслу у Ворда плоховато, согласен. Тут только знания самого пишущего помогут.
Ладно уж, помогу Ворду. Ждите.
Правильный экспорт SVG из Illustrator
Может кому пригодиться. Мой список «требований» к дизайнерам при создании svg-иллюстраций:
- иллюстрации должны быть подогнаны по пиксельной сетке
- не должно быть дробных значений в размерах, по максимуму избегать их
- по минимуму использовать кисть, только кривые Безье или простые геометрические фигуры, чем меньше узловых точек, тем лучше
- пересекающиеся фигуры с одинаковыми стилями должны быть по возможности объединены, т.е. чем меньше сущностей — тем лучше (хотя это по идее умеет делать svgo)
- одинаковые фигуры не должны копироваться. Вместо этого создать образец (в палитре образцы) и копировать уже его (тогда в коде вместо повторений фигур будет использоваться тег <use xlink:href> который будет ссылаться на данную фигуру, что экономит итоговый размер svg)
- размер монтажной области в конце подогнать по границам иллюстрации
- убрать все лишние вспомогательные слои (растровые подложки и т.д.)
По сути с условиями, что ты написал, анимация будет действительно бесконечной.
Остановка анимации любого из элементов будет инициировать воспроизведение этой же анимации на следующем элементе, а так как ты вместе с этим начинаешь еще одну анимацию по событию click, то начинается вакханалия, потому что воспроизводится не одна анимация, а две.
Анимация с условиями begin="prev.end", end="next.click" будучи запущенной один раз не сможет остановиться до перезагрузки документа.
За все время, что я думал над твоим вопросом, я не смог придумать адекватный способ реализации. Вижу только 2 варианта:
- Выбрать что-то одно (либо бесконечный, либо анимацию по клику)
- Воспроизводить обе анимации одновременно (Прокатит только если они между собой не конфликтуют)
для вставки 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 документа
Все об SVG анимации