Логотип Beats Audio в SVG

Активное развитие мобильных устройств с разрешением экрана большим,
чем нам моем ноутбуке, заставляет задуматься. На ретина дисплеях .png иконки теряют свое качество.
Аналогично происходит и с логотипами.
Решение проблемы заключается в использовании векторной графики вместо растровой.

В рамках этого поста хочу показать очень простой пример рисования логотипа с использованием технологии SVG.
В качестве примера я взял логотип компании Beats Audio, производящей наушники с высоким качеством звучания.

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

Для начала определим холст и его размеры:

<svg width="700" height="600">
    <!-- Тут будет фигура-->
</svg>

К элементу svg можно задавать и другие атрибуты: id, class и прочее. Но сейчас нам это не нужно, поэтому обойдемся заданием размеров холста.

Определимся с координатами. Все круги рисуем в центре холста, который находится в точке (350,300). Их радиусы равны 290, 150 и 90px. Фигуры будем рисовать, используя элемент <circle>.

Осталось задать четырехугольник. Воспользуемся элементом <polygon>. Атрибут points содержит серию пар х- и у-координат, разделенных пробелами.

<svg width="700" height="600">
    <circle cx="350" cy="300" r="290" />
    <circle cx="350" cy="300" r="150" />
    <circle cx="350" cy="300" r="90" />
    <polygon points="200,300 270,180 270,0 200,0" />
</svg>

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

Для заливки фигур воспользуемся атрибутом fill. В логотипе присутствует два цвета:
#ed1c24 и белый.

<svg width="700" height="600">
    <circle cx="350" cy="300" r="290" fill="#ed1c24"/>
    <circle cx="350" cy="300" r="150" fill="#FFF"/>
    <circle cx="350" cy="300" r="90" fill="#ed1c24"/>
    <polygon points="200,300 270,180 270,0 200,0" fill="#FFF"/>
</svg>

Вывод

Мы рассмотрели простой пример рисования логотипа с использованием технологии SVG при помощи элементов circle и polygon. Обратите внимание, что нам понадобилось всего 6 строк кода, чтобы нарисовать логотип.