Видео скринкасты 2025, Январь

Спасибо за просмотр, это все значит для меня и этого сайта. Это сообщение в блоге представляет собой огромный список ресурсов по всему, что мы рассмотрели в этой серии »

Когда вы используете inline, все элементы находятся в DOM, как и s, s и любой другой элемент HTML. Если у вас есть SVG вроде: а у вас есть: var rect = "

В этом скринкасте мы подробно рассмотрим статью Леони Уотсон о доступном SVG и, по сути, рассмотрим ее по пунктам. Мне нравится этот первый пункт "

Мы потратили много времени на использование inline и element. Вы можете создать систему значков, изобилующую преимуществами. Вы можете создать "

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

JavaScript - это последний из способов, которые мы рассмотрим при анимации SVG. Мы посмотрели на CSS, который хорош и довольно удобен, но он не может работать с некоторыми SVG "

Концепция обрезки и маскирования довольно проста. Скрыть одни части элементов и показать другие. Фактическая разница между ними довольно проста "

Возможно, вы слышали о фильтрах CSS? Вы можете применить их к любому элементу из CSS, например: .apply-css-filter (-webkit-filter: grayscale (0.5); filter: "

Вероятно, для этого не существует особо масштабного варианта использования, кроме очевидного: помимо прочего, в более крупном SVG-дизайне вам понадобится растровая графика ».

Может наступить день, когда вы захотите, чтобы изображение было в формате SVG, но оно есть только в растровом формате, например в формате GIF, JPG.webp или PNG. В этом видео мы рассмотрим пример "

Популярной небольшой техникой анимации SVG является рисование контуров. Если вы не можете вообразить это, вот коллекция из миллиона примеров, которые я создал. По сути "

В SVG есть элемент. Здесь нет ничего удивительного: он предназначен для помещения текста в SVG. Не очертания букв (хотя вы тоже можете это сделать), а "

Это немного эзотерическая вещь, мне просто нужно было сделать это один раз, и это сбивало с толку, поэтому я подумал, что сделаю об этом целое видео. Дело в том,"

На этом видео было удалено. Я когда-нибудь пересниму его. Если вы читаете это, а я еще этого не сделал, не стесняйтесь связаться со мной и сообщить об ошибке "

Этот совет применим, только если у вас установлен Adobe Illustrator CC (Creative Cloud). Я подтвердил, что он работает в этом или даже в новом CC 2014. Это максимально просто "

Хотя анимация SVG с помощью CSS может быть более удобной для среднего пользователя, у SVG есть другой способ создания анимации, встроенный прямо в SVG »

Когда вы используете встроенный SVG, весь этот SVG-код находится прямо в HTML и, следовательно, в DOM. Вы можете стилизовать их так же, как, или любой другой HTML "

Мы узнали, что ограничение использования для вставки небольшого количества SVG состоит в том, что вы не можете писать составные селекторы CSS, которые влияют на них. Например: Это "

Термин «инструмент сборки» может напугать. Это напоминает причудливые инструменты командной строки, требующие настройки, и странные системные зависимости, которые ломаются, когда вы "

Встроенный SVG можно «стилизовать» в том смысле, что он уже имеет заливки и обводки и еще много чего, как только вы помещаете его на страницу. Это потрясающе и абсолютно "

На сайтах стоковых фотографий всегда есть возможность фильтровать результаты поиска по «вектору». И помните, какой бы формат вы ни выбрали, когда что-то скачиваете "

Мы узнали, что инструменты сборки особенно хороши для таких задач, как превращение папки, полной SVG, в блок SVG defs. Как всегда в "

Мы определенно можем стать немного более ботанистыми с нашими инструментами сборки. На момент публикации этого постера дочерним элементом инструментов сборки был Grunt. Есть конкуренты ".

Когда у нас есть то, что мы называем нашим «блоком defs» SVG - этот фрагмент SVG, который определяет все, что мы хотим нарисовать позже - куда мы его поместим? Так"

Этот элемент цепляется за всю идею встроенной системы значков SVG. Мы узнали, что лучший способ сделать это - разместить все, что вы собираетесь нарисовать позже "

Размещение блока SVG defs в верхней части документа определенно работает. У этого также есть некоторые преимущества, такие как тот факт, что не нужно выполнять HTTP-запросы ",

В SVG есть очень крутой и мощный элемент под названием. Концепция довольно проста. Он находит еще один фрагмент кода SVG, на который ссылается идентификатор, и клонирует его "

Мы рассмотрели «встроенный SVG», который отбрасывает синтаксис SVG прямо в HTML. Вы можете использовать тот же встроенный SVG и в других местах, например, в "или"

Помните, что все векторные изображения можно поместить в SVG. Программное обеспечение Adobe отлично справляется с этим. В PDF-файле могут быть векторные изображения - просто откройте PDF-файл, и вы "

The Noun Project - (очень) фантастическое место для получения SVG. Давайте посчитаем способы. Буквально все в SVG и на самом деле происходит именно так. Они - "