Media object with SVG image.…
[Перевод] Используем SVG (часть первая)
Я люблю использовать SVG везде, где это только возможно.При создании front-end я разделяю всю графику на две категории:
«контент» — изображения, которые меняются в зависимости от содежимого
«UI» — всё, что интегрировано в сайт
Названия не сильно важны, а вот распознавать эти две категории важно. Мы можем объединять все иконки в один спрайт (что будет рассмотрено во второй части), но никогда такого не сделаешь для изображений, используемых в статье.СодержимоеДля изображений «контента» нет ничего лучше старого доброго . Он будет работать* с SVG и растровыми картинками (PNG, JPEG и др.). Все зависит лишь от того, что загрузит владелец сайта.
* в том случае, если сервер и CMS не блокируют MIME тип: image/svg+xml
По моему мнению, хорошая поддержка тэга браузерами не вынуждает нас искать каких-либо альтернатив для работы с SVG.Однако! При использовании отзывчивого дизайна Internet Explorer не масштабирует , хотя многие этого ожидают. Давайте воспользуемся таким примером:
Обычно мы можем задать параметр max-width в CSS, и все картинки будут хорошо масштабированы (но они не станут больше, чем исходное изображение). В IE этот принцип не работает.
Мы должны сами задать width для изображений. Вот так:
.media__image { width: 20%; max-width: 300 px; } Либо можно задать глобальный параметр max-width для родительского элемента: img { display: block; width: 100%; }
.media__image {
max-width: 20%;
}
Media object with SVG image.…
Media object with SVG image.…
. Необходимо как минимум указывать ширину и высоту, а еще лучше создать отдельный элемент для полного контроля над изображениемЗвучит легко, но, если Вы раньше не использовали SVG, могут возникнуть неприятности с IE. Если Вы хотите увидеть все своими глазами, то демо доступно здесь: проблема, решение, и обтекаемость текста.
В части 2 мы рассмотрим использование SVG для категории «UI».
Все самое интересное впереди!
Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.
