Доброго времени суток! В каких случаях следует выбирать вставку .svg изображений в html(иконки, логотипы, элементы управления и др.), ведь если вставить то появиться доступ к параметру fill и можно будет менять состояния объекта при взаимодействии с ним, но в другом случае это ухудшает читабельность кода? А в каких случаях достаточно будет просто перекрасить .svg элемент в редакторе? Спасибо.
Есть два случая, когда придётся вставлять <svg> в разметку.
- Вам нужно менять цвета иконки при изменении состояния(
:hover,:activeи т.д.) - Вы используете svg-спрайт
В остальных случаях можете использовать svg в стилевом файле.
Добрый день! Использую svg как фон псевдоэлемента after для реализации эффекта скошенного края блока (в проекте "Пинк"). Мне нужна только часть svg объекта, при этом она должна тянуться по ширине. Как я понимаю, нужно задать область viewbox для этой части, и работать с ней. Вставлять svg как инлайн объект только для этого не хочется. Это можно реализовать через css?
В этом случае вам нужно убрать размеры(атрибуты width и height) с <svg> и тогда <svg> пропорционально растянется по контейнеру.
Если вам нужно изменить размеры, то используйте свойство background-size.
Мой вопрос немного не в тему, но очень хочется узнать ваше мнение, недавно на работе возникла идея от дизайнеров, что разработчики(фронт) должны уже начать использовать vh и vw для всех отступов(внутренние и внешние), они(западные дизайнеры) говорят что, тогда все отступы будут адаптивными. Я считаю что это опасно. Может вы слышали что нибудь о таком способе или пробовали на "живых" проектах
Все единицы измерения используются в определенной ситуации.
На px мы верстаем давно и привыкли использовать их большую часть времени. С одной стороны можно задуматься и сказать, что пора бы переходить на другие единицы измерения, а с другой стороны они продолжают работать стабильно и так как мы хотим.
Есть em/rem, которыми пользуются, когда есть привязка к размеру шрифта элемента.
А вот vh, vw, те самые единицы измерения, когда есть привязка элемента к вьюпорту.
Подчеркну, что все единицы измерения используются по необходиомсти, а не в угоду чьих-то хотелок. Также не стоит забывать, что дизайн должен быть построен таким образом, что он учитывает, что отступы зависят от вьюпорта. Если дизайнер этого не учёл, то вам будет очень сложно поменять логику макета(заменить px, на вьюпортные единицы измерения).
Мы это рассмотрели в 8 лекции. Если коротко, то использовать gulp-svgstore
Можно ли использовать обертки для .svg изображений например , <iframe>, и в каких случаях лучше использовать такие обертки вместо вставки их в html? Спасибо.
Такие обёртки стоит использовать, когда нужно дополнительное взаимодейсвтие с элементами svg: изменение цвета при наведнии или другом состояние, анимации.
В демонстрации барбершопа заметил, что медиазапрос для ретины вложен в селектор. Можно ли тогда вложить в селектор медиазапрос для отображения блока в планшетной или десктопной версии, а не наоборот, как мы делаем?
Да, можно. Это изменения состояния блока, которое имеет смысл описывать в этм блоке.
Иногда попадаются svg иконки, которые не подходят под размер блока, в котором они будут находиться, они или вытягиваются по ширине и высоте блока, если их вставить через тег svg, или вообще выбиваются из блока. Как быть с такими svg? Кроме трансформации svg элементов ничего в не получалось. Не совсем понятна зависимость width/height svg элемента от его вьюпорта
Если нужно вытягивать пропорционально высоту и ширину, то это работает автоматически.
Если пропорции меняются, то нужно смотреть. Всё зависит от ситуации и нужно принимать решение как сделать лучше, чтобы иконка выглядела удобоваримо. Рекомендую прочитать эту статью, где подробно написано как менять пропорции иконок - https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio
Либо есть наши курсы - https://htmlacademy.ru/courses/259/run/6
С
<symbol>в css никак, поэтому такие иконки не добавляйте в спрайт.