#ссылка дня
Сегодня ссылка дня говорит сама за себя: https://svgontheweb.com/ru/
«SVG в вебе. Практическое руководство»
В дружественных чатах постоянно проскакивают вопросы о подключении SVG в HTML, об их оптимизации, стилизации и манипуляции над ними.
И каждый раз ответы – одинаковые. И не всегда верные и однозначные.
Собственно, это руководство не будет долго погружать в теорию (минимальную всё же даст), но вот рабочие примеры — предоставит. Есть официальный перевод на русский язык, а желающие могут дополнить на GitHub.
#svg #sprite #css
Сегодня ссылка дня говорит сама за себя: https://svgontheweb.com/ru/
«SVG в вебе. Практическое руководство»
В дружественных чатах постоянно проскакивают вопросы о подключении SVG в HTML, об их оптимизации, стилизации и манипуляции над ними.
И каждый раз ответы – одинаковые. И не всегда верные и однозначные.
Собственно, это руководство не будет долго погружать в теорию (минимальную всё же даст), но вот рабочие примеры — предоставит. Есть официальный перевод на русский язык, а желающие могут дополнить на GitHub.
#svg #sprite #css
#заметка дня
Как разместить иконки на странице или в web-приложении?
Очевидно — картинкой. Шрифтом ещё. CSS-спрайтом. SVG... Но один из наиболее удобных и универсальных способов — это SVG-спрайты.
По сути всё просто: работаем с элементом symbol. Символ — это буквально что угодно в SVG, что не отобразится сразу, но на что можно будет сослаться.
SVG-файл становится контейнером таких символов:
Но как этим пользоваться, например, в React?
Как-как, компонент сделать, как всегда. Объявили компонент Icon и передаём в него id нужного спрайта. Смотрим в песочницу и запоминаем: https://codesandbox.io/s/condescending-bas-1beiol?file=/src/App.js
Так-то SVG можно встроить сразу в HTML, главное, скрыть не забыть. Но это, опять же, может стать задачей вашего любимого бандлера.
Вообще, моя любимая часть в песочнице это даже не спрайты, а ...props. Если интересно — потом расскажу, почему :)
Всем спрайт, котаны!
#svg #symbol #sprite #react
Как разместить иконки на странице или в web-приложении?
Очевидно — картинкой. Шрифтом ещё. CSS-спрайтом. SVG... Но один из наиболее удобных и универсальных способов — это SVG-спрайты.
По сути всё просто: работаем с элементом symbol. Символ — это буквально что угодно в SVG, что не отобразится сразу, но на что можно будет сослаться.
SVG-файл становится контейнером таких символов:
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="icon-circle" viewBox="0 0 32 32">
<circle cx="16" cy="16" r="16" />
</symbol>
<symbol id="icon-square" viewBox="0 0 32 32">
<rect x="0" y="0" width="32" height="32" />
</symbol>
</svg>
И кладём этот контейнер куда угодно. Например, в файл или сразу в HTML (об этом ниже). А дальше всё очень просто: <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
<use href="icons.svg#icon-circle" />
</svg>
Удобно отлаживать, меньше запросов. Сплошные плюсы. Понятно, что так можно не только иконки хранить.Но как этим пользоваться, например, в React?
Как-как, компонент сделать, как всегда. Объявили компонент Icon и передаём в него id нужного спрайта. Смотрим в песочницу и запоминаем: https://codesandbox.io/s/condescending-bas-1beiol?file=/src/App.js
Так-то SVG можно встроить сразу в HTML, главное, скрыть не забыть. Но это, опять же, может стать задачей вашего любимого бандлера.
Вообще, моя любимая часть в песочнице это даже не спрайты, а ...props. Если интересно — потом расскажу, почему :)
Всем спрайт, котаны!
#svg #symbol #sprite #react
MDN Web Docs
<symbol> - SVG: Scalable Vector Graphics | MDN
The <symbol> SVG element is used to define graphical template objects which can be instantiated by a <use> element.
#заметка дня
Как разместить иконки на странице или в web-приложении?
Очевидно — картинкой. Шрифтом ещё. CSS-спрайтом. SVG... Но один из наиболее удобных и универсальных способов — это SVG-спрайты.
По сути всё просто: работаем с элементом symbol. Символ — это буквально что угодно в SVG, что не отобразится сразу, но на что можно будет сослаться.
SVG-файл становится контейнером таких символов:
Но как этим пользоваться, например, в React?
Как-как, компонент сделать, как всегда. Объявили компонент Icon и передаём в него id нужного спрайта. Смотрим в песочницу и запоминаем: https://codesandbox.io/s/condescending-bas-1beiol?file=/src/App.js
Так-то SVG можно встроить сразу в HTML, главное, скрыть не забыть. Но это, опять же, может стать задачей вашего любимого бандлера.
Вообще, моя любимая часть в песочнице это даже не спрайты, а ...props. Если интересно — потом расскажу, почему :)
Всем спрайт, котаны!
#svg #symbol #sprite #react #бородач
Как разместить иконки на странице или в web-приложении?
Очевидно — картинкой. Шрифтом ещё. CSS-спрайтом. SVG... Но один из наиболее удобных и универсальных способов — это SVG-спрайты.
По сути всё просто: работаем с элементом symbol. Символ — это буквально что угодно в SVG, что не отобразится сразу, но на что можно будет сослаться.
SVG-файл становится контейнером таких символов:
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="icon-circle" viewBox="0 0 32 32">
<circle cx="16" cy="16" r="16" />
</symbol>
<symbol id="icon-square" viewBox="0 0 32 32">
<rect x="0" y="0" width="32" height="32" />
</symbol>
</svg>
И кладём этот контейнер куда угодно. Например, в файл или сразу в HTML (об этом ниже). А дальше всё очень просто: <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
<use href="icons.svg#icon-circle" />
</svg>
Удобно отлаживать, меньше запросов. Сплошные плюсы. Понятно, что так можно не только иконки хранить.Но как этим пользоваться, например, в React?
Как-как, компонент сделать, как всегда. Объявили компонент Icon и передаём в него id нужного спрайта. Смотрим в песочницу и запоминаем: https://codesandbox.io/s/condescending-bas-1beiol?file=/src/App.js
Так-то SVG можно встроить сразу в HTML, главное, скрыть не забыть. Но это, опять же, может стать задачей вашего любимого бандлера.
Вообще, моя любимая часть в песочнице это даже не спрайты, а ...props. Если интересно — потом расскажу, почему :)
Всем спрайт, котаны!
#svg #symbol #sprite #react #бородач
MDN Web Docs
<symbol> - SVG: Scalable Vector Graphics | MDN
The <symbol> SVG element is used to define graphical template objects which can be instantiated by a <use> element.
This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня
Одна из самых недооценённых возможностей CSS-анимаций, это функция steps(n).
Зачем оно надо? Ну, исходя из названия, чтобы сделать использование временной шкалы дискретным, за равные промежутки. Кадры, короче говоря.
Почему недооценена? Потому что SVG, Lottie и Rive-анимации предоставляют чуть больше возможностей, но ценой подключения скриптов или целого рантайма. А всего-то надо подготовить лист спрайтов-кадров.
Поэтому сегодня я дам вам два примера. Первый — анимашка шагающего пиксель-артного Локи: https://codepen.io/alinaki/pen/GRPrYdv
Здесь есть небольшой хак чтобы картинка стала отзывчивой: вместо размера указано соотношение сторон, а фон сдвигается в процентах. Ну и, чтобы пиксель-арт оставался собой, а не размывался, стоит накинуть соответствующее правило image-rendering.
И наглядно от мэтра Джея: https://codepen.io/jh3y/pen/KKbpeBQ
Если концепция спрайтов вам совсем не знакома, в этом примере можно включить раскадровку.
Никаких рантаймов, красота.
#css #sprite #animation
Одна из самых недооценённых возможностей CSS-анимаций, это функция steps(n).
Зачем оно надо? Ну, исходя из названия, чтобы сделать использование временной шкалы дискретным, за равные промежутки. Кадры, короче говоря.
Почему недооценена? Потому что SVG, Lottie и Rive-анимации предоставляют чуть больше возможностей, но ценой подключения скриптов или целого рантайма. А всего-то надо подготовить лист спрайтов-кадров.
Поэтому сегодня я дам вам два примера. Первый — анимашка шагающего пиксель-артного Локи: https://codepen.io/alinaki/pen/GRPrYdv
Здесь есть небольшой хак чтобы картинка стала отзывчивой: вместо размера указано соотношение сторон, а фон сдвигается в процентах. Ну и, чтобы пиксель-арт оставался собой, а не размывался, стоит накинуть соответствующее правило image-rendering.
И наглядно от мэтра Джея: https://codepen.io/jh3y/pen/KKbpeBQ
Если концепция спрайтов вам совсем не знакома, в этом примере можно включить раскадровку.
Никаких рантаймов, красота.
#css #sprite #animation
This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня
Одна из самых недооценённых возможностей CSS-анимаций, это функция steps(n).
Зачем оно надо? Ну, исходя из названия, чтобы сделать использование временной шкалы дискретным, за равные промежутки. Кадры, короче говоря.
Почему недооценена? Потому что SVG, Lottie и Rive-анимации предоставляют чуть больше возможностей, но ценой подключения скриптов или целого рантайма. А всего-то надо подготовить лист спрайтов-кадров.
Поэтому сегодня я дам вам два примера. Первый — анимашка шагающего пиксель-артного Локи: https://codepen.io/alinaki/pen/GRPrYdv
Здесь есть небольшой хак чтобы картинка стала отзывчивой: вместо размера указано соотношение сторон, а фон сдвигается в процентах. Ну и, чтобы пиксель-арт оставался собой, а не размывался, стоит накинуть соответствующее правило image-rendering.
И наглядно от мэтра Джея: https://codepen.io/jh3y/pen/KKbpeBQ
Если концепция спрайтов вам совсем не знакома, в этом примере можно включить раскадровку.
Никаких рантаймов, красота.
#css #sprite #animation #бородач
Одна из самых недооценённых возможностей CSS-анимаций, это функция steps(n).
Зачем оно надо? Ну, исходя из названия, чтобы сделать использование временной шкалы дискретным, за равные промежутки. Кадры, короче говоря.
Почему недооценена? Потому что SVG, Lottie и Rive-анимации предоставляют чуть больше возможностей, но ценой подключения скриптов или целого рантайма. А всего-то надо подготовить лист спрайтов-кадров.
Поэтому сегодня я дам вам два примера. Первый — анимашка шагающего пиксель-артного Локи: https://codepen.io/alinaki/pen/GRPrYdv
Здесь есть небольшой хак чтобы картинка стала отзывчивой: вместо размера указано соотношение сторон, а фон сдвигается в процентах. Ну и, чтобы пиксель-арт оставался собой, а не размывался, стоит накинуть соответствующее правило image-rendering.
И наглядно от мэтра Джея: https://codepen.io/jh3y/pen/KKbpeBQ
Если концепция спрайтов вам совсем не знакома, в этом примере можно включить раскадровку.
Никаких рантаймов, красота.
#css #sprite #animation #бородач
This media is not supported in your browser
VIEW IN TELEGRAM
#заметка дня
В чат прилетел вопрос: "Как добавить иконку в поле ввода так, чтобы она была видна только когда виден плейсхолдер и исчезла при вводе текста?"
Отвечаем: конечно же добавить её в контейнер label, а потом использовать псевдо-класс :placeholder-shown на поле ввода!
Он очень давно и хорошо поддерживается, так что почему бы и нет.
Оставим за пределами этого обсуждения тот факт, что плейсхолдеры не должны заменять реальные метки. Это всё равно уже стало де-факто стандартом индустрии... но постарайтесь так не делать.
И, конечно, пример:
https://codepen.io/alinaki/pen/xxMpgLK?editors=1100
Там заодно используются SVG-спрайты, потому что мне лениво подключать профессиональный аккаунт на кодпене и грузить туда картинки. Так что заодно можно посмотреть, как работать со спрайтами. Пригодится!
Всем бу, котаны!
#css #placeholder #svg #sprite
В чат прилетел вопрос: "Как добавить иконку в поле ввода так, чтобы она была видна только когда виден плейсхолдер и исчезла при вводе текста?"
Отвечаем: конечно же добавить её в контейнер label, а потом использовать псевдо-класс :placeholder-shown на поле ввода!
Он очень давно и хорошо поддерживается, так что почему бы и нет.
Оставим за пределами этого обсуждения тот факт, что плейсхолдеры не должны заменять реальные метки. Это всё равно уже стало де-факто стандартом индустрии... но постарайтесь так не делать.
И, конечно, пример:
https://codepen.io/alinaki/pen/xxMpgLK?editors=1100
Там заодно используются SVG-спрайты, потому что мне лениво подключать профессиональный аккаунт на кодпене и грузить туда картинки. Так что заодно можно посмотреть, как работать со спрайтами. Пригодится!
Всем бу, котаны!
#css #placeholder #svg #sprite
This media is not supported in your browser
VIEW IN TELEGRAM
#заметка дня
В чат прилетел вопрос: "Как добавить иконку в поле ввода так, чтобы она была видна только когда виден плейсхолдер и исчезла при вводе текста?"
Отвечаем: конечно же добавить её в контейнер label, а потом использовать псевдо-класс :placeholder-shown на поле ввода!
Он очень давно и хорошо поддерживается, так что почему бы и нет.
Оставим за пределами этого обсуждения тот факт, что плейсхолдеры не должны заменять реальные метки. Это всё равно уже стало де-факто стандартом индустрии... но постарайтесь так не делать.
И, конечно, пример:
https://codepen.io/alinaki/pen/xxMpgLK?editors=1100
Там заодно используются SVG-спрайты, потому что мне лениво подключать профессиональный аккаунт на кодпене и грузить туда картинки. Так что заодно можно посмотреть, как работать со спрайтами. Пригодится!
Всем бу, котаны!
#css #placeholder #svg #sprite #бородач
В чат прилетел вопрос: "Как добавить иконку в поле ввода так, чтобы она была видна только когда виден плейсхолдер и исчезла при вводе текста?"
Отвечаем: конечно же добавить её в контейнер label, а потом использовать псевдо-класс :placeholder-shown на поле ввода!
Он очень давно и хорошо поддерживается, так что почему бы и нет.
Оставим за пределами этого обсуждения тот факт, что плейсхолдеры не должны заменять реальные метки. Это всё равно уже стало де-факто стандартом индустрии... но постарайтесь так не делать.
И, конечно, пример:
https://codepen.io/alinaki/pen/xxMpgLK?editors=1100
Там заодно используются SVG-спрайты, потому что мне лениво подключать профессиональный аккаунт на кодпене и грузить туда картинки. Так что заодно можно посмотреть, как работать со спрайтами. Пригодится!
Всем бу, котаны!
#css #placeholder #svg #sprite #бородач
This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня
Одна из самых недооценённых возможностей CSS-анимаций, это функция steps(n).
Зачем оно надо? Ну, исходя из названия, чтобы сделать использование временной шкалы дискретным, за равные промежутки. Кадры, короче говоря.
Почему недооценена? Потому что SVG, Lottie и Rive-анимации предоставляют чуть больше возможностей, но ценой подключения скриптов или целого рантайма. А всего-то надо подготовить лист спрайтов-кадров.
Поэтому сегодня я дам вам два примера. Первый — анимашка шагающего пиксель-артного Локи: https://codepen.io/alinaki/pen/GRPrYdv
Здесь есть небольшой хак чтобы картинка стала отзывчивой: вместо размера указано соотношение сторон, а фон сдвигается в процентах. Ну и, чтобы пиксель-арт оставался собой, а не размывался, стоит накинуть соответствующее правило image-rendering.
И наглядно от мэтра Джея: https://codepen.io/jh3y/pen/KKbpeBQ
Если концепция спрайтов вам совсем не знакома, в этом примере можно включить раскадровку.
Никаких рантаймов, красота.
#css #sprite #animation #бородач
Одна из самых недооценённых возможностей CSS-анимаций, это функция steps(n).
Зачем оно надо? Ну, исходя из названия, чтобы сделать использование временной шкалы дискретным, за равные промежутки. Кадры, короче говоря.
Почему недооценена? Потому что SVG, Lottie и Rive-анимации предоставляют чуть больше возможностей, но ценой подключения скриптов или целого рантайма. А всего-то надо подготовить лист спрайтов-кадров.
Поэтому сегодня я дам вам два примера. Первый — анимашка шагающего пиксель-артного Локи: https://codepen.io/alinaki/pen/GRPrYdv
Здесь есть небольшой хак чтобы картинка стала отзывчивой: вместо размера указано соотношение сторон, а фон сдвигается в процентах. Ну и, чтобы пиксель-арт оставался собой, а не размывался, стоит накинуть соответствующее правило image-rendering.
И наглядно от мэтра Джея: https://codepen.io/jh3y/pen/KKbpeBQ
Если концепция спрайтов вам совсем не знакома, в этом примере можно включить раскадровку.
Никаких рантаймов, красота.
#css #sprite #animation #бородач