Перевод с английского: How to cook Pizza with SVG?
В этой статье мы научимся готовить низкокалорийную пиццу, которая должна понравиться любителям SVG. Пицца будет состоять из svg-теста и вкуснейших топпингов.
Начнем с теста!
SVG-тесто
Приготовить тесто с помощью SVG гораздо проще чем сделать это с обычным тестом. Нам не нужны яйца, мука, молоко и т.д. Наше тесто будет состоять из радиального градиента:
<radialGradient id="doughGradient">
<stop class="dough" offset="0%"/>
<stop class="dough" offset="80%"/>
<stop class="brownish-side" offset="97%"/>
<stop class="dough" offset="100%"/>
</radialGradient>
тесту мы придадим форму круга:
<circle id="dough"
cx="310" cy="310" r="300"
style="fill:url(#doughGradient)" />Далее, во внешнем CSS мы определим stop-цвета для градиента:
#doughGradient .brownish-side {
stop-color: #ff9955
}
#doughGradient .dough {
stop-color: #ffeeaa
}Перфекционисты спросят, почему свойство fill для круга не вынесено во внешний CSS?
#dough {
fill: url(#doughGradient)
}Все просто, это пицца для ВСЕХ, а не только для пользователей Chromium. К сожалению, Opera и Firefox все еще не поддерживают такие циклические ссылки.
Чтобы не обижать любителей Opera отмечу, что поддержка спецификаций SVG там на пару шагов впереди остальных браузеров ну со скоростью отрисовки все хорошо.
Наше SVG-тесто готово.
Топпинги
Салями
В Северной Америке подкопченые сосиски принято называть пепперони, а в России и Европе — салями. По сути, разница между ними минимальна и на вкус различить их довольно трудно. В данном случае нам потребуется окружность.
<circle
cx="50" cy="50"
r="50"
class="pepperoni-base"/>На этой окружности разместим характерные включения жира. Вот пример одного из них:
<path
d="M23,23 16,30C16,30 16,25 18,24 20,23 23,23 23,23z"
class="pepperoni-inc"/>таких включений должно быть несколько. Если несколько включений имеют один цвет — их можно разместить последовательно внутри одного элемента path внутри параметра d. Обратите внимание, что следующая последовательность цифр должна начиваться только после буквы z.
Оформить окружность можно с помощью вот такой декларации во внешнем CSS:
#pepperoni .pepperoni-base {
fill: #a02c2c;
stroke-width: 2
}Для оформления жировых включений можно использовать следующий шаблон:
#pepperoni .pepperoni-inc {
fill: #782121;
stroke: none
}Все что нужно — придумать цвета для этих включений и названия для классов.
Для того чтобы оформление из этих классов подключилось необходимо сгруппировать содержимое внутри элемента g с идентификатором #pepperoni.
В результате получается один кружок салями.
Помидор
Какая пицца без помидоров? Обычно помидор состоит из контура, на котором размещается несколько фрагметов и в каждом фрагменте разбросаны семена.
Итак, контур:
<path
d="M 107,52 A 52,48 0 0 1 3,52 52,48 0 1 1 107,52z"
class="tomato-base"/>Фрагмент может быть вот таким:
<path
d="M56,16 57,48C57,48 63,31 70,37 76,44 64,50 64,50L92,48C104,46 96,35 85,23 73,11 55,4 56,16z"
class="tomato-segment"/>Их тоже можно записать все в один path-элемент.
Семена помидора тоже можно распределить по фрагментам и записать в path.
<path
d="M62,38C62,38 59,33 61,31 62,30 63,31 63,31 64,34 62,38 62,38z"
class="tomato-seed" />С помощью добавления несложного CSS-кода можно придать оформление нашим помидорам, фрагментам и семенам.
#tomato .tomato-base {
fill: #ff333f;
stroke: none
}
#tomato .tomato-segment {
fill: #d40000;
stroke: none
}
#tomato .tomato-seed {
fill: #ffaaaa;
stroke: none
}В конце томат будет выглядеть следующим образом.
Оливки
Прототип оливки можно сделать с помощью следующего SVG-кода:
<path id=”olive”
d="M68,47C68,59 55,63 44,66 32,70 23,59 23,47 23,36 33,26 45,26 57,26 68,36 68,47z" />далее с помощью use можно сделать из этого прототипа зеленую и черную версии:
<use
id="greenOlive"
xlink:href="#olive" />
<use
id="blackOlive"
xlink:href="#olive" />Серединка у оливок, если мы достали косточку — пустая. Поэтому следующий CSS-код поможет нам в оформлении прототипа:
#olive {
fill: none;
stroke-width: 22;
}Далее можно назначить цвета зеленой и черной версиям:
#greenOlive {
stroke: #7db000;
}
#blackOlive {
stroke: #000;
}В результате получится пара SVG оливок
Грибы
В нашу пиццу стоит добавить еще и шампиньонов. Для ускорения процесса есть смысл воспользоваться векторным редактором Inkscape, про который уже был материал.
Контур шампиньона можно сделать следующим:
<path
d="M 37,63 C 44,67 61,69 68,62 68,52 63,42 66,32 72,26 84,32 88,38 90,42 85,42 83,42 80,47 88,50 92,46 96,41 98,34 97,28 94,16 89,9 77,4 55,0 27,-4 9,13 -1,27 1,47 15,55 21,57 23,46 17,48 12,51 10,43 12,40 15,34 22,30 28,30 38,33 32,52 37,63 z"
class="champignon-shape"/>Также у шампиньонов можно нарисовать пластинки.
<path
d="M11,45C11,30 31,22 50,21 70,20 90,26 89,39 77,31 69,39 66,33 61,25 22,34 11,45z"
class="champignon-gills"/>Группируем шампиньон:
<g id="champignon"></g>и назначаем цвета контуру и жабрам:
#champignon .champignon-shape {
fill: #f6e5ae
}
#champignon .champignon-gills {
fill: #957f66
}SVG-шампиньон готов.
Болгарский перец
Добавим прототип болгарского перца. Его тоже легче нарисовать с помощью Inkscape.
<path
id="bellPepper"
d="M 130,140 C 210,120 170,16 110,33 67,-9 31,30 26,35 3.8,57 14,89 28,110 25,140 64,220 130,140 z M 38,42 C 19,47 22,77 34,85 41,94 54,96 64,96 66,100 48,100 46,120 45,140 50,160 71,160 89,170 110,140 110,140 110,120 89,100 100,100 110,100 150,120 150,110 170,97 160,48 120,48 110,48 110,68 96,70 80,45 71,14 38,42 z"/>Теперь можно использовать этот прототип для создания зеленой, красной и желтой версии перца.
<use
id="redBellPepper" xlink:href="#bellPepper" />
<use
id="greenBellPepper" xlink:href="#bellPepper" />
<use
id="yellowBellPepper" xlink:href="#bellPepper" />Наши перецы должны быть пустыми внутри. Поэтому определим для прототипа следующий CSS:
#bellPepper {
fill-rule: evenodd
}он говорит браузеру, что вложенные в наш контур фрагменты должны быть пустыми.
Теперь можно назначить цвета перцам:
#redBellPepper {
fill: #DA251D;
}
#greenBellPepper {
fill: #008000;
}
#yellowBellPepper {
fill: #ffcc00;
}Три SVG перца готовы.
Чиллийский перец
Чтобы придать нашей пицце пикантности добавим чиллийский перчик. У него изогнута форма:
<path
d="M2,17C2,17 20,22 33,23 65,26 52,29 101,23 138,21 196,15 241,12 257,11 256,40 246,41 171,49 68,48 33,37 21,34 2,17 2,17z"
class="chili-pepper-body"/>и зеленый хвостик:
<path
d="M296,2C294,2 257,26 253,23 L250,14C234,25 244,30 249,40L253,32C256,34 316,1 296,2z"
class="chili-pepper-tail"/>соберем его в группу:
<g id="chiliPepper"></g>и добавим цвет:
#chiliPepper .chili-pepper-body {
fill: #aa0000
}
#chiliPepper .chili-pepper-tail {
fill: #008000
}В результате SVG-перчик можно есть, но он очень острый.
Готовим пиццу
После того как все компоненты готовы — можно заняться сборкой.
Для этого нам потребуется много use-элементов. Например, тесто можно разместить следующим образом:
<use xlink:href="#dough"/>или немного сместить его с помощью параметров x,y.
Кусочек салями можно выложить так:
<use xlink:href="#pepperoni" x="130" y="130" />и так далее с помидорами, оливками, грибами и перцем.
Вот и все, SVG-пицца готова.
Выводы
Главная цель этой статьи — привлечь начинающих веб-разработчиков к использованию SVG. Использовать SVG гораздо проще чем HTML, а результатами можно впечатлить даже искушенных работодателей. Плюс продемонстрировать несколько полезных приемов:
1. Используйте один прототип для размещения похожих элементов. Это сэкономит ресурсы.
2. Группируйте фигуры которые относятся к одному смысловому объекту (помидор, гриб и т.д.).
3. Если компоненты с одной формой могут иметь разные цвета используйте use и назначайте цвета новым объектам.