03

SVG

Создание и использование графики в формате SVG

Цель: изучение принципов векторной графики, получение навыков создания и подключения изображений в формате SVG.

Содержание и порядок выполнения лабораторной работы:

  1. Изучить элементы и возможности работы SVG и его свойств:

    • Базовые фигуры (circle, rect, ellipse, path, line, polyline и polygon);
    • Путь - path;
    • Группировка и повторное использование (g, def, symbol и use);
    • viewBox и viewPort для SVG;
    • Способы подключения SVG-графики;
    • Анимации в SVG.
    • Пропорции изображения preserveAspectRatio

  2. Продолжить работу в репозитории из прошлой работы, но в новой ветке.

  3. Создать “библиотеку” многократно используемых иконок с помощью элемента <symbol>. Пиктограммы должны быть выполнены в едином стиле и быть легко узнаваемыми, каждая из них должна иметь уникальный идентификатор, на который можно будет ссылаться в дальнейшем в документе SVG. Для цвета используйте значение currentColor. В “библиотеку” должны входить иконки:

    • закрытия модального окна,
    • бургер-меню,
    • поиска,
    • домашней страницы,

  4. Используя “библиотеку”, создайте кнопки или ссылки используя <use> и идентификаторы. Иконки в них должны быть разноцветными, при наведении курсора они должны менять цвет, иконка бургер-меню при клике должна с помощью анимации преобразовываться в крестик.

  5. Создать городской пейзаж с несколькими планами. Используйте элемент для группировки нескольких элементов SVG. В нем следует использовать трансформации и анимации для создания эффекта параллакса с горизонтальной прокруткой за счет разной скорости движения планов города Пример. Для создания глубины и визуального интереса на разные планы добавьте фильтр размытия, используя код в конце раздела. Для разных планов используйте разные значения stdDeviation.

  6. Создать карту родного квартала с помощью SVG. Карта должна включать кликабельные объекты, при нажатии на которые будет отображаться информация.

<defs>
  <filter id="blur">
    <feGaussianBlur in="SourceGraphic" stdDeviation="1" />
  </filter>
</defs>

Требования к html и css:

  • Удобочитаемый код;
  • Код отформатирован;
  • Отсутствие ошибок на валидаторе для html и css.

Результаты выполнения лабораторной работы:

Результаты работы проверены наставником.

Статическая веб-страница на хостинге проверенная, со структурой и оформлением, которая соответствует требованиям и сохранена в системе контроля версий.

Источники

  1. Спецификация
  2. О SVG на MDN
  3. SVG свойства
  4. SVG SPRITES

Дополнительные источники:

  1. Пример, где один из элементов нарисован с помощью SVG
  2. Один из большого числа наборов иконок
  3. Узоры на фон

Вопросы для защиты

  1. Что такое SVG и чем он отличается от других форматов изображений?
  2. Что такое атрибут viewBox в SVG и как он используется?
  3. Каковы наиболее распространенные элементы SVG и каково их назначение?
  4. В чем разница между элементами <g> и <symbol> в SVG?
  5. Каково назначение элемента <defs> в SVG?
  6. Как можно использовать элемент <use> в SVG для повторного использования элементов?
  7. Как анимировать элементы SVG с помощью CSS и JavaScript?
  8. Каковы некоторые приемы создания отзывчивых SVG-изображений?
  9. Как можно оптимизировать SVG-изображения?
  10. Как можно добавить интерактивность в SVG-изображения с помощью JavaScript?
  11. Как можно использовать градиенты для стилизации элементов SVG?
  12. Как создавать сложные формы в SVG с помощью элемента <path>?
  13. Как использовать фильтры SVG для применения визуальных эффектов к изображениям?
  14. Как можно использовать SVG-изображения в сочетании с HTML и CSS?
  15. Какова роль атрибута viewBox в SVG-анимации?
Предыдущая Следующая