Skip to content

Instantly share code, notes, and snippets.

@nikolai-shabalin
Last active April 28, 2020 09:37
Show Gist options
  • Save nikolai-shabalin/93bee3abcd393343dcc78e749adb8979 to your computer and use it in GitHub Desktop.
Save nikolai-shabalin/93bee3abcd393343dcc78e749adb8979 to your computer and use it in GitHub Desktop.
Вопросы к разделу «Векторная графика и оптимизация» на 19 потоке

Вопросы к разделу «Векторная графика и оптимизация»

Когда лучше svg инлайоново, а когда нет?

Доброго времени суток! В каких случаях следует выбирать вставку .svg изображений в html(иконки, логотипы, элементы управления и др.), ведь если вставить то появиться доступ к параметру fill и можно будет менять состояния объекта при взаимодействии с ним, но в другом случае это ухудшает читабельность кода? А в каких случаях достаточно будет просто перекрасить .svg элемент в редакторе? Спасибо.

Есть два случая, когда придётся вставлять <svg> в разметку.

  1. Вам нужно менять цвета иконки при изменении состояния(:hover, :active и т.д.)
  2. Вы используете svg-спрайт

В остальных случаях можете использовать svg в стилевом файле.

Можно ли растянуть svg-иконку в css?

Добрый день! Использую svg как фон псевдоэлемента after для реализации эффекта скошенного края блока (в проекте "Пинк"). Мне нужна только часть svg объекта, при этом она должна тянуться по ширине. Как я понимаю, нужно задать область viewbox для этой части, и работать с ней. Вставлять svg как инлайн объект только для этого не хочется. Это можно реализовать через css?

В этом случае вам нужно убрать размеры(атрибуты width и height) с <svg> и тогда <svg> пропорционально растянется по контейнеру. Если вам нужно изменить размеры, то используйте свойство background-size.

vh и vw в продакшене возможно?

Мой вопрос немного не в тему, но очень хочется узнать ваше мнение, недавно на работе возникла идея от дизайнеров, что разработчики(фронт) должны уже начать использовать vh и vw для всех отступов(внутренние и внешние), они(западные дизайнеры) говорят что, тогда все отступы будут адаптивными. Я считаю что это опасно. Может вы слышали что нибудь о таком способе или пробовали на "живых" проектах

Все единицы измерения используются в определенной ситуации.

На px мы верстаем давно и привыкли использовать их большую часть времени. С одной стороны можно задуматься и сказать, что пора бы переходить на другие единицы измерения, а с другой стороны они продолжают работать стабильно и так как мы хотим. Есть em/rem, которыми пользуются, когда есть привязка к размеру шрифта элемента. А вот vh, vw, те самые единицы измерения, когда есть привязка элемента к вьюпорту.

Подчеркну, что все единицы измерения используются по необходиомсти, а не в угоду чьих-то хотелок. Также не стоит забывать, что дизайн должен быть построен таким образом, что он учитывает, что отступы зависят от вьюпорта. Если дизайнер этого не учёл, то вам будет очень сложно поменять логику макета(заменить px, на вьюпортные единицы измерения).

В критериях есть пункт про использование спрайтов в проекте. Как нам лучше всего создать спрайт?

Мы это рассмотрели в 8 лекции. Если коротко, то использовать gulp-svgstore

Когда стоит использовать обёртки для .svg?

Можно ли использовать обертки для .svg изображений например , <iframe>, и в каких случаях лучше использовать такие обертки вместо вставки их в html? Спасибо.

Такие обёртки стоит использовать, когда нужно дополнительное взаимодейсвтие с элементами svg: изменение цвета при наведнии или другом состояние, анимации.

Как вкладываь media queries?

В демонстрации барбершопа заметил, что медиазапрос для ретины вложен в селектор. Можно ли тогда вложить в селектор медиазапрос для отображения блока в планшетной или десктопной версии, а не наоборот, как мы делаем?

Да, можно. Это изменения состояния блока, которое имеет смысл описывать в этм блоке.

Как вытягивать иконки?

Иногда попадаются 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

@dmitmokrov
Copy link

Можно еще разок уточнить по svg-спрайтам? В спрайт мы собираем вообще все svg иконки или только те, которые контентные или изменяют состояние (например, цвет)? А которые используем в качестве фонов так и оставляем отдельными svg файлами?

@nikolai-shabalin
Copy link
Author

@dmitmokrov

Как вам удобно.

Есть несколько тактик. Можно вообще иконки, которые возможно добавлять в спрайт. Можно группировать по темам: логотипы, декоративные, компании и т.д.

Ваш подход тоже подходит.

@dmitmokrov
Copy link

Я имел в виду, если декоративные svg собирать в спрайт, как их потом использовать, если нужно фоном поставить, т.е. в css?

@nikolai-shabalin
Copy link
Author

С <symbol> в css никак, поэтому такие иконки не добавляйте в спрайт.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment