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-dough and delicious toppings.
')


Let's start with the test!

SVG dough

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

<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> 

dough we give the shape of a circle:

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

Further, in external CSS we 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 a circle is not rendered into external CSS?

 #dough { fill: url(#doughGradient) } 

It's simple, this is pizza for ALL, 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 the support for the SVG specifications is a couple of steps ahead of the rest of the browsers, but at the rendering speed everything is fine.

Our SVG dough is ready.

Toppings

Salami

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

 <circle cx="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:

 <path d="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 the same path element inside the d parameter. Please note that the following sequence of numbers should begin only after the letter z .

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

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

For registration of 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 design of these classes to connect, you must group the contents inside the g element with the identifier #pepperoni .

The result is one circle of salami .

A tomato

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

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

A fragment could be like this:

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

They can also be written all in one path-element.

Tomato seeds can also be divided into fragments and recorded in the 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" /> 

With the addition of simple CSS-code, you can design your tomatoes, slices and seeds.

 #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

Prototype olives can be made using the following SVG-code:

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

then with the help of use you can make green and black versions of this prototype:

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

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

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

You can then assign colors to the green and black versions:

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

The result is a pair of SVG olives.

Mushrooms

In our pizza, you should add champignons. To speed up the process, it makes sense to use the vector editor Inkscape, about which there was already material .
The contour of the mushroom can be done as follows:

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

Also, champignons can draw plates.

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

Group the champignon:

 <g id="champignon"></g> 

and assign colors to the contour and gills:

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

SVG champignon ready .

Bulgarian pepper

Add a prototype of bell pepper. It is also easier to draw with 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"/> 

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

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

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

 #bellPepper { fill-rule: evenodd } 

he tells the browser that the fragments nested in our contour must be empty.

Now you can assign colors to the peppers:

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

Three SVG peppers are ready .

Chilli pepper

To make our pizza spicy add chilli pepper. His shape is curved:

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

and green tail:

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

let's put it in a group:

 <g id="chiliPepper"></g> 

and add color:

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

As a result, you can eat SVG-peppers , but it is very sharp.

Cooking pizza

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

 <use xlink:href="#dough"/> 

or slightly shift it using the x, y parameters.

A slice of salami can be laid out like this:

 <use xlink: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 get newbie web developers to use SVG. Using SVG is much easier than HTML, and you can be impressed with even experienced employers. Plus, demonstrate some useful tricks:
1. Use one prototype to place similar elements. It will save resources.
2. Group the figures that belong to the same semantic object (tomato, mushroom, etc.).
3. If components with one shape can have different colors, use use and assign colors to new objects.