16. HTML векторная графика, тег svg. Как выгрузить SVG изображение из Figma

✏️ Знакомимся с векторной графикой, в её отличиях от растровой графики, разбираемся в форматах jpg, png, svg и когда их применять, и напоследок затронем выгрузку SVG изображения из Figma.

🔴 Timeline:
▶ 00:00​ | План урока
▶ 00:15​ | Что такое векторная графика
▶ 00:21​ | Растровая и векторная графика
▶ 00:42​ | Формат SVG
▶ 00:57​ | Преимущества SVG перед растровой графикой
▶ 02:05​ | SVG — не для всего
▶ 02:19​ | В каких случаях применяется SVG
▶ 02:32​ | В каких случаях применяется JPG
▶ 02:40​ | В каких случаях применяется PNG
▶ 02:50​ | Вставка svg через тег img
▶ 03:02​ | Тег svg
▶ 04:11​ | Выгрузка SVG изображения из Figma
▶ 05:24​ | Как изучать SVG и нужно ли
▶ 05:45​ | Что дальше

📚 Полезные ссылки:

💬 Чат в телеграмме (помощь новичкам):

🔸 Boosty (поддержать канал):

🗂️ Бесплатные курсы на канале:

📌 Автор:

#frontend #фронтенд #html

[КонстантинКашапов]

Крутейшие видео. Просто, понятно, быстро. Обычно все подобные видео по 40 минут зачем-то, а тут на много коротких разбито и легко смотрится, можно подтему посмотреть, обдумать, передохнуть и дальше. А в длинном видео теряешься в итоге. Спасибо за уроки)

[Ivanfwit]

ждем видео про спрайты, использовал use тег для спрайтов, но вроде читал, что есть более современные способы. могу ошибаться

[АнтонИванов-трг]

А ещё SVG-код можно добавлять через CSS, с помощью свойства content у псевдоэлементов.

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

Но зато этот способ очень заметно улучшает чистоту html разметки

[gos]

Александр, спасибо за видео! Звук довольно тихий, пришлось макбук на полную выкручивать.

[it]

Когда-то краем уха слышал про такой инструмент как Canvas в HTML, я так понял на нём тоже что-то рисуют, и на первый взгляд он похож на SVG, тоже как-будто там на математике все устроено. Для чего он используется? Для игр? Вам приходилось с ним сталкиваться?

[tosterman]

Скопировал svg логотип (небольшой) с онлайн сайта и вставил в учебную html разметку, где он стал оочень огромных размеров. Почему так произошло???

[EvgenOl]

4:00 В 99% ситуаций фронтендеры сами код не пишут. Согласен. Но делают они это зря. Качество кода SVG-файла сгенерированного Фигмой или векторным редактором такое-же низкое, как автоматически сгенерированный программими HTML. В 90% случаев руками можно нарисовать иконку во много раз проще, чем это делают проги. Ни какое автоматическое сжатие так не сможет. Но если это видео для новичков, то им об этом можно пока и не говорить.

[EvgenOl]

4:27 А почему девелопер мод в фигме не юзаешь? Вроде на острие технологий, а такую полезную фичу игноришь. Вон же у тебя переключатель выключен.

[EvgenOl]

2:48 PNG и ни какой другой? Здрасте, профессионалушка... А WEBP кому разрабатывали?