​Анимирование SVG

В этом видео наш подписчик рассказывает, как анимировать SVG на примере создания простого прелоадера.

#фронтенд #svg

Для работы с SVG можно использовать тулзу от Adobe, но есть и много бесплатных браузерных редакторов. Вот подборочка из таких:

https://tprg.ru/OQXT

#фронтенд #svg

Почему для фавиконок сайтов стоит использовать SVG и как это реализовать:

https://tprg.ru/jq7Y

#фронтенд #svg

Изучение SVG с помощью 25 примеров

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

https://tprg.ru/2Vhk

А ещё автор записал видеоурок по этой теме:

https://tprg.ru/XcfM

#codepen #видео #svg

Как создавать, редактировать и анимировать SVG в одном месте с помощью SVGator 3.0

Создание SVG-анимации интересная, но довольно сложная задача без удобного инструмента.

В этом обзоре вы узнаете об инструменте, который позволяет с нуля быстро и удобно создавать SVG-изображения и анимации, которые потом можно использовать на сайте:

https://tprg.ru/JbOc

#фронтенд #svg

Генератор SVG-лоадеров с SASS и SMIL

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

Подробнее:

https://tprg.ru/V9LR

#фронтенд #svg #sass

​SVG: руководство по написанию кода изображений с примерами

Увидев SVG-картинку в HTML первый раз, можно неплохо так испугаться и решить, что разобраться в этом невозможно. Но не торопитесь. Если подойти к вопросу основательно и с хорошим материалом, то всё становится достаточно просто.

Материал мы вам нашли, осталось только ваше желание прокачать свои навыки:

https://tprg.ru/Coqg

#html #svg

JavaScript редактор SVG диаграмм который весит в 6,5 раз меньше bootstrap

Если вам необходимо создать диаграмму, то DgrmJS отличный вариант. Он прост, выполнен на vanillaJS, имеет открытый исходный код, а весит при этом меньше bootstrap.

В этой статье автор рассказал, как ему удалось этого добиться:

https://habr.com/ru/post/648759/

#javascript #svg

​Введение в SVG-анимации для верстальщиков

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

Эта статья даст общее представление о том, что бывает, и от чего можно оттолкнуться, если вы решили изучать эту тему, а у вас полная каша в голове:

https://habr.com/ru/post/667116

#svg

​Удобный способ использовать SVG в React

Добавить SVG на сайт можно совершенно разными способами. Но если вы хотите полноценно использовать все возможности SVG, то необходимо вставлять изображение непосредственно в HTML-разметку. Или нет?

В этой статье вы найдёте ещё один хитрый, но при этом удобный способ:

https://habr.com/ru/post/672984/

#react #svg

​Лёгкий способ создания и анимирования векторной графики

Библиотека Snap.svg упрощает работу с SVG, позволяя применять новейшие функции SVG, такие как шаблоны, полные градиенты, группы и многое другое. При этом инструмент позволяет не только создавать собственные SVG-изображения, но и редактировать и анимировать файлы, созданные в других инструментах, например, в Adobe Illustrator, Inkscape или Sketch.

Подробнее о Snap.svg можно узнать тут:

https://snapsvg.io/

#javascript #svg #библиотека

​Рисуем верёвку в формате SVG при помощи JavaScript

Нашли для вас очень необычный кейс. Автор статьи создал инструмент, который превращает простую линию в векторный рисунок верёвки. Вам достаточно задать путь SVG-контура, а JS сам «нарастит» на него рисунок. Останется только выбрать цвет и толщину верёвки.

Здесь находится не только пошаговый обзор этого алгоритма, но и готовое демо, а также код проекта:

https://habr.com/ru/companies/nmg/articles/719822/

#svg #javascript

​Изучение SVG с помощью 25 примеров

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

https://codepen.io/HunorMarton/pen/PoGbgqj

#codepen #svg

Impatiently Waiting — элемент загрузки на HTML и SCSS

Больше лоадеров богу лоадеров! На этот раз предлагаем вам познакомиться с забавным вариантом, который нарисован с помощью SVG и анимирован с помощью SCSS.

С кодом проекта можно ознакомиться по ссылке: https://codepen.io/jkantner/pen/VwooLxv

#codepen #svg #scss #лоадер