<MyRusakov.ru />

Программирование на Python с Нуля до Гуру

Программирование на Python с Нуля до Гуру

Данный курс научит Вас программировать на языке Python, который крайне желательно знать любому, кто хоть иногда имеет дело с компьютерами. Курс состоит из 6 разделов, в которых Вы с нуля освоите этот язык и сможете создавать самые разные программы для самых разных задач любой сложности.

К курсу прилагается множество упражнений и все исходники из уроков.

Наконец, Вы получите ещё несколько бонусов: "Создание калькулятора на Python", "Создание игры на Python" и "Правильная работа со справочником".

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

SVG-спрайты

SVG-спрайты

В очередной раз, просматривая вакансии на HTML-верстальщика, на предмет поиска темы для новой статьи, в списке требований работодателя, наткнулся на пункт – использовать в верстке SVG-спрайты.

Нам, верстальщикам, не стоит игнорировать требование работодателей, а идти в ногу с современными приёмами в верстке. Что по отдельности обозначают эти модные термины?

SVG – это масштабируемый формат векторной графики. В SVG формате хранится инструкция по построению изображения, по точкам и кривым, в виде текста. А это значит, что его можно открывать и редактировать в любом редакторе кода, работать с ним как с HTML файлом.

Спрайт – это один файл с графикой, состоящий из нескольких маленьких графических файлов, например иконок. Тогда, как SVG-спрайт – это масштабируемый один большой графический файл.

Почему SVG-спрайты – это хорошо?

Почему они так нравятся работодателям и заказчикам? Все дело в скорости загрузки сайта: чем меньше HTTP-запросов к серверу, тем быстрее работает сайт. Чем быстрее работает сайт, тем больше его любят поисковые системы и посетители.

Используя на сайте SVG-спрайты, вы убиваете сразу двух зайцев – получаете меньший вес у графики (SVG формат в разы легче, чем PNG и JPG) и меньше запросов к серверу.

В этом коде целых три HTTP-запроса, на больших экранах появится замыливание и весят иконки в PNG формате больше:

<img src="icons/pinterest.png" alt="">
<img src="icons/twitter.png" alt="">
<img src="icons/facebook.png" alt="">

А здесь один запрос, при масштабирование векторная графика не теряет в качестве и меньше весит.

<svg class="icon">
  <use xlink:href="sprite.svg#facebook"></use>
</svg>

Как сделать SVG-спрайт?

  1. Скачиваем на сайте flaticon две иконки pinterest + github, в формате SVG. Теперь нужно два SVG-файла объединить в один.
  2. В редакторе кода создадим sprite.svg и пропишем следующий код.

  3. <svg display="none" xmlns="http://www.w3.org/2000/svg">
      <symbol id="pinterest" viewBox="0 0 455.731 455.731">
        <g>
          <path ..здесь код отрисовки pinterest../>
        </g>
      </symbol>
      <symbol id="github" viewBox="0 0 512 512">
        <g>
          <path ..здесь код отрисовки github../>
        </g>
      </symbol>
    </svg>

  4. Значения атрибутов viewBox, копируем из pinterest.svg и github.svg.
  5. Открываем содержимое двух скачанных файлов и копируем внушительный код отрисовки иконки, тега path и вставляем между тегами <g></g>. Мы вынесли код иконок в отдельный файл sprite.svg.
  6. Важно: Удаляем из path, инлайн стиль с цветом заливки style="fill:#FFFFFF;. Иначе, потом мы не сможем поменять дефолтный цвет иконки на свой, в CSS стилях.

  7. Открываем заготовленный HTML файл и вставляем, туда ссылки на id иконок.

  8. <svg class="icon">
      <use xlink:href="sprite.svg#pinterest"></use>
    </svg>
    <svg class="icon">
      <use xlink:href="sprite.svg#github"></use>
    </svg>

Теперь, через CSS стили мы можем задавать иконкам любой цвет, размер, а также менять им цвет при наведении. Не стоит паниковать, если иконки не отображаются в Chrome на вашем компьютере, откройте другим браузером или загрузите страницу на сервер.

SVG-спрайты vs иконочных шрифтов

Чем SVG-спрайты лучше иконочных шрифтов, ведь все иконки можно упаковать в один файл и загружать с одним HTTP-запросом? Перечислим некоторые преимущества:

  • проще управлять позиционированием
  • удобнее делать многоцветные иконки
  • можно делать анимированные иконки

Поддержка браузерами

Формат SVG поддерживается всеми современными браузерами и начиная с
IE 11+.

Пример SVG-спрайта

Код на Github: ссылка

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.