Cooking pizza with SVG

Translation from English: How to cook Pizza with SVG?

In this article, we will learn how to cook low-calorie pizza, which should appeal to fans of SVG. Pizza will consist of svg-test and delicious toppings.

Let's start with the test!

SVG dough

Making dough using SVG is much easier than doing it with a regular dough. We do not need eggs, flour, milk, etc. Our dough will consist of a radial gradient:

<radialGradientid="doughGradient"><stopclass="dough"offset="0%"/><stopclass="dough"offset="80%"/><stopclass="brownish-side"offset="97%"/><stopclass="dough"offset="100%"/></radialGradient>

we will give the test a circle shape:

<circleid="dough"cx="310"cy="310"r="300"style="fill:url(#doughGradient)" />

Next, in external CSS, we will define stop colors for the gradient:

#doughGradient.brownish-side {
  stop-color: #ff9955
}
#doughGradient.dough {
  stop-color: #ffeeaa
}

Perfectionists will ask why the fill property for the circle is not rendered in external CSS?

#dough {
  fill: url(#doughGradient)
}

It's simple, this is pizza for EVERYONE, and not just for Chromium users. Unfortunately, Opera and Firefox still do not support such circular links.
In order not to offend Opera lovers, I note that support for SVG specifications is a couple of steps ahead of other browsers, well, everything is fine with the rendering speed.

Our SVG dough is ready.

Toppings

Salami

Smoked sausages are commonly called pepperoni in North America, and salami in Russia and Europe. In fact, the difference between them is minimal and it’s rather difficult to distinguish between them. In this case, we need a circle.

<circlecx="50"cy="50"r="50"class="pepperoni-base"/>

On this circle we place the characteristic inclusions of fat. Here is an example of one of them:

<pathd="M23,23 16,30C16,30 16,25 18,24 20,23 23,23 23,23z"class="pepperoni-inc"/>

there should be several such inclusions. If several inclusions have the same color, they can be placed sequentially inside one path element inside the d parameter . Please note that the next sequence of numbers should only begin after the letter z .

You can draw a circle using the following declaration in external CSS:

#pepperoni.pepperoni-base {
  fill: #a02c2c;
  stroke-width: 2
}

To design fatty inclusions, you can use the following template:

#pepperoni.pepperoni-inc {
  fill: #782121;
  stroke: none
}

All you need is to come up with colors for these inclusions and names for the classes.

In order for the decoration from these classes to connect, you need to group the contents inside the g element with the identifier #pepperoni .

The result is one circle of salami .

A tomato

What pizza without tomatoes? Typically, a tomato consists of a contour on which several fragments are placed and seeds are scattered in each fragment.
So the outline:

<pathd="M 107,52 A 52,48 0 0 1 3,52 52,48 0 1 1 107,52z"class="tomato-base"/>

A fragment can be like this:

<pathd="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"/>

They can also be written all in one path element.

Tomato seeds can also be divided into fragments and written to path.

<pathd="M62,38C62,38 59,33 61,31 62,30 63,31 63,31 64,34 62,38 62,38z"class="tomato-seed" />

By adding simple CSS, you can give your tomatoes, slices, and seeds a look.

#tomato.tomato-base {
  fill: #ff333f;
  stroke: none
}
#tomato.tomato-segment {
  fill: #d40000;
  stroke: none
}
#tomato.tomato-seed {
  fill: #ffaaaa;
  stroke: none
}

At the end, the tomato will look like this .

Olives

The prototype of olives can be made using the following SVG code:

<pathid=”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" />

Further, using use, you can make the green and black versions of this prototype:

<useid="greenOlive"xlink:href="#olive" /><useid="blackOlive"xlink:href="#olive" />

The middle of the olives, if we got a stone - empty. Therefore, the following CSS code will help us with the design of the prototype:

#olive {
  fill: none;
  stroke-width: 22;
}

Next, you can assign colors to the green and black versions:

#greenOlive {
  stroke: #7db000;
}
#blackOlive {
  stroke: #000;
}

The result is a pair of SVG olives

Mushrooms

Mushrooms should also be added to our pizza. To speed up the process, it makes sense to use the Inkscape vector editor , about which there was already material .
The contour of champignon can be made as follows:

<pathd="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"/>

You can also draw plates on champignons.

<pathd="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"/>

Group the champignon:

<gid="champignon"></g>

and assign colors to the outline and gills:

#champignon.champignon-shape {
  fill: #f6e5ae
}
#champignon.champignon-gills {
  fill: #957f66
}

SVG champignon is ready .

Bell pepper

Add a bell pepper prototype. It is also easier to draw with Inkscape.

<pathid="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"/>

Now you can use this prototype to create a green, red and yellow version of pepper.

<useid="redBellPepper"xlink:href="#bellPepper" /><useid="greenBellPepper"xlink:href="#bellPepper" /><useid="yellowBellPepper"xlink:href="#bellPepper" />

Our peppers should be empty inside. Therefore, we define the following CSS for the prototype:

#bellPepper {
  fill-rule: evenodd
}

it tells the browser that the fragments nested in our path must be empty.

Now you can assign colors to peppers:

#redBellPepper {
  fill: #DA251D;
}
#greenBellPepper {
  fill: #008000;
}
#yellowBellPepper {
  fill: #ffcc00;
}

Three SVG peppers are ready .

Chilli pepper

To spice up our pizza, add Chilli pepper. His shape is curved:

<pathd="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"/>

and green tail:

<pathd="M296,2C294,2 257,26 253,23 L250,14C234,25 244,30 249,40L253,32C256,34 316,1 296,2z"class="chili-pepper-tail"/>

put it in a group:

<gid="chiliPepper"></g>

and add color:

#chiliPepper.chili-pepper-body {
  fill: #aa0000
}
#chiliPepper.chili-pepper-tail {
  fill: #008000
}

As a result, you can eat the SVG pepper , but it is very spicy.

Cooking pizza

After all the components are ready, you can do the assembly.
To do this, we need a lot of use elements. For example, the dough can be placed as follows:

<usexlink:href="#dough"/>

or shift it a bit using the x, y parameters .

A piece of salami can be laid out like this:

<usexlink:href="#pepperoni"x="130"y="130" />

and so on with tomatoes, olives, mushrooms and peppers.

That's it, SVG pizza is ready.

findings

The main goal of this article is to attract beginner web developers to use SVG. Using SVG is much easier than HTML, and the results can impress even sophisticated employers. Plus, demonstrate some useful tricks:
1. Use one prototype to place similar elements. This will save resources.
2. Group the figures that belong to the same semantic object (tomato, mushroom, etc.).
3. If components with the same shape can have different colors, use use and assign colors to new objects.

Tags: