Знакомство с SVG / Привет, SVG! [1/15]
×

Привет, SVG! [1/15]

SVG — это формат векторной графики. В отличие от растровой графики — PNG, GIF, JPEG — SVG может растягиваться и сжиматься без потери качества, то есть такие картинки будут одинаково чёткими и на обычных экранах, и на ретине.

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

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

Давайте познакомимся с ним поближе. Вот простой пример кода:

<svg>
    <circle r="50" cx="50%" cy="50%" fill="yellowgreen"/>
</svg>

SVG-элемент вставляется с помощью тега svg, внутри которого уже находится остальное содержимое: фигуры, картинки или текст.

Содержимое в этом примере — это кружок (circle) зелёного цвета (fill="yellowgreen"). Вот так будет выглядеть действие этого кода в браузере:

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

Без классных наклеек и значков сейчас никуда. Заходите к нам в магазин.

Выполнить задание
HTML
<svg> <circle r="50" cx="50%" cy="50%" fill="yellowgreen"/> </svg>
CSS
svg { border: 1px solid #dddddd; }
HTML Academy
  1. Поменяйте цвет кружка на оранжевый (orange).
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.