<MyRusakov.ru />

Создание игр на Unreal Engine 4

Создание игр на Unreal Engine 4

Данный курс научит Вас созданию игр на Unreal Engine 4. Курс состоит из 12 модулей, в которых Вы с нуля освоите этот движок и сможете создавать самые разные игры.

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

Помимо самого курса Вас ждёт ещё 5 бесплатных ценных Бонусов: «Динамическая смена дня и ночи», «Создание динамической погоды», «Создание искусственного интеллекта для NPC», «Создание игры под мобильные устройства» и «Создание прототипа RPG с открытым миром».

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

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

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

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

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

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

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

Зачем Вы изучаете программирование/создание сайтов?

Почему нужно использовать SVG графику на сайтах

Почему нужно использовать SVG графику на сайтах

Уже трудно себе представить современные сайты без иконок и вообще без графики. Вся графика, которую мы видим на сайтах может быть растровой (JPG, PNG) или векторной в SVG формате. К сожалению, фотографии или рисованные иллюстрации мы не можем отобразить на сайте в виде SVG кода. Но если есть выбор, то всегда нужно выбирать именно SVG формат.

Преимущества SVG

  • маленький вес
  • масштабируется без потери качества
  • легко анимируется
  • адаптируется под разные экраны

1) Сравнение веса

Для сравнительного анализа скачаем с сайта flaticon.com две одинаковых иконки в PNG и SVG формате.


Почему нужно использовать SVG графику на сайтах.

Мы видим, что размер файла tag.png составляет 27 КБ. В то время, как tag.svg весит всего лишь 6 КБ, что в четыре раза меньше. Как правило на странице сайта, используется десяток иконок. И при каждой загрузке страницы, только за счет иконок, сайт вынужден будет загружать около 300 килобайт.


Почему нужно использовать SVG графику на сайтах.

Как вставить на сайт SVG иконку

SVG иконка представляет из себя трудночитаемый XML код, состоящий из координат линий и кривых. Не пугаемся и сохраняем спокойствие, мы достанем оттуда кое-какую информацию и запишем ее в HTML файле.


Почему нужно использовать SVG графику на сайтах.

В HTML файл вставим два обязательных тега. Сделаем svg тег невидимым, копируем параметр viewBox и вставляем в тег symbol. Затем добавим идентификатор с любым осмысленным названием. Далее копируем из tag.svg все содержимое тегов path + circle и вставляем между тегами symbol. Это будет очень много кода, поэтому я не буду его сюда вставлять.

<svg display="none">
    <symbol viewBox="-32 0 480 480.011" id="tag">
        // path, circle
    </symbol>
</svg>

Ниже вставляем этот код, указав идентификатор иконки.

<svg>
    <use xlink:href="#tag"></use>
</svg>

В итоге иконка появилась на HTML странице.


Почему нужно использовать SVG графику на сайтах.

Как управлять SVG иконкой?

Добавим к тегу svg класс tag-icon и можем стилизовать ее как обычно, через CSS свойства.

<div class="container">
    <svg class="tag-icon">
        <use xlink:href="#tag"></use>
    </svg>
</div>

Например позиционировать, изменять размер и цвет.

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.tag-icon {
    width: 100px;
    height: 100px;
    fill: rgb(230, 19, 107);
}


Почему нужно использовать SVG графику на сайтах.

2) Масштабирование без потери качества

Вставим на сайт иконку, как растровую картинку и увеличим ее размеры в 10 раз. Края изображения стали неровными.

<img src="tag.png" alt="">

img {
    width: 3000px;
    height: 3000px;
}


Почему нужно использовать SVG графику на сайтах.

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


Почему нужно использовать SVG графику нас сайтах.

3) Возможности анимации безграничные.

Попробуем поменять цвет у иконок при наведении на более светлый. Посмотрите, как легко реализуется данный эффект у SVG иконки.

.tag-icon:hover {
    fill: darkorange;
    cursor: pointer;
}


Почему нужно использовать SVG графику на сайтах.

При наведении на PNG иконку меняется цвет фона, а не самой иконки.

img:hover {
    background-color: darkorange;
    cursor: pointer;
}


Почему нужно использовать SVG графику на сайтах.

Посмотрите пример на CodePen

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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