Интернет магазин шабонов
Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Использование SVG (часть первая)

Дата добавления: 11.02.2015 - 07:02
Добавил: Buger
Количество просмотров: 434
Количество комментариев: 0
Рейтинг материала: 0.0 / 0
Использование SVG (часть первая)
БЕСПЛАТНО
Для скачивания файлов, необходима авторизация или регистрация на нашем ресурсе.
рейтинг 0.0
/
голосов 0
Данная статья/урок будет рассказываться от имени автора данного материала, тем самым не относится к арт юкоз.

И так, читаем и познаем вместе...

При создании front-end я разделяю всю графику на две категории:
контент” — изображения, которые меняются в зависимости от содежимого
UI” — всё, что интегрировано в сайт

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

Содержимое
Для изображений «контента» нет ничего лучше старого доброго . Он будет работать* с SVG и растровыми картинками (PNG, JPEG и др.). Все зависит лишь от того, что загрузит владелец сайта.

* в том случае, если сервер и CMS не блокируют MIME тип: image/svg+xml

По моему мнению, хорошая поддержка тэга браузерами не вынуждает нас искать каких-либо альтернатив для работы с SVG.

Однако!
При использовании отзывчивого дизайна Internet Explorer не масштабирует , хотя многие этого ожидают. Давайте воспользуемся таким примером:

Код
<article class="media">
  <img class="media__image" src="smile.svg" alt="Smiley">
  <div class="media__body">
  <p><strong>Media object with SVG image.</strong> … </p>
  </div>
</article>

Код
.media__image {
  max-width: 20%;
}

Тестируя SVG и PNG, обнаруживается ошибка, уникальная лишь для IE (в данный момент SVG поддерживается в версиях 9–11):



Обычно мы можем задать параметр max-width в CSS, и все картинки будут хорошо масштабированы (но они не станут больше, чем исходное изображение). В IE этот принцип не работает.

Мы должны сами задать width для изображений. Вот так:
Код
.media__image {
  width: 20%;
  max-width: 300px;
}


Либо можно задать глобальный параметр max-width для родительского элемента:
Код
img {
  display: block;
  width: 100%;
}

Код
.media__image {
  max-width: 20%;
}

Код
<article class="media">
  <div class="media__image">
  <img src="smile.svg" alt="Smiley">
  </div>
  <div class="media__body">
  <p><strong>Media object with SVG image.</strong> … </p>
  </div>
</article>

То же самое можно сделать тогда, когда хочется сделать текст обтекаемым рядом с изображением:



Код
<article class="prose">
  <img src="smile.svg" class="prose__image">
  <p><strong>Media object with SVG image.</strong> … </p>
</article>


В идеале мы должны использовать .prose__image { max-width: 20%; }. В результате будут выполнять эти условия:
- Может быть шире родительского элемента не более, чем на 20%;
- Не шире исходного изображения (300px).

Вывод
В этом уроке мы поговорили о создании отзывчивых изображений. А почему бы и нет? Дело в том, что неправильно добавлять их с помощью одного лишь тэга . Необходимо как минимум указывать ширину и высоту, а еще лучше создать отдельный элемент для полного контроля над изображением.
Звучит легко, но, если Вы раньше не использовали SVG, могут возникнуть неприятности с IE.

В части 2 мы рассмотрим использование SVG для категории «UI».

Все самое интересное впереди!

Источник: http://habrahabr.ru/post/250129/
Добавлять комментарии могут только зарегистрированные пользователи.