Do you now what Inkscape is? OK. Probably, most of you know, but for some of you who don’t, it’s free Open Source Software for vectors. I like vectors, for me it is so exciting that combine vectors with HTML and CSS.
I made a little tutorial how to create vector clip in Inkscape.

Step 1

Open Inscape, click on File > Document properties (or CTRL + Shift +D). In section Orientation set for Landskape. You specify dimensions.


Step 2


On the left side you can see a selection of toolbars. Find and click on the icon with the star and polygon, or simply click on the Shift + 8 or the numeric keypad *. In the upper part we have the option to choose whether we want a star or polygon. For this tutorial I’ll take the example of a polygon, and will choose to have 4 corners.

Step 3



To square the same size, it is necessary to keep the Ctrl button on the keyboard

 Step 4



Now that we have formed a square, you need to convert it to a curve. First, click on the square, and then in the menu on the left side of the icon that is different. the keyboard shortcut F2 button, and then in the top menu, click the icon to convert.


Step 5


To hunt the training ground and the lower left corner was in the same line, I will use guides (Guidelines). They are located on the left and up. It is only necessary that we put the mouse cursor on the ruler, in this case the left and hold the left mouse button, and then to draw up a polygon, all the while keeping the left mouse button. Let him go when you draw polygons.


Step 6



Now dip the upper left corner and descend down if desired. If you want to place it on the web site as SVG, you must first lift the cursor to the Guidelines on the keyboard and then click Delete. Then click F1 or first icon, and then on the ground. Now we need to settle it. Click Shift + Ctrl + A, and on the right side it appears as in picture.


Step 7




In the section Align set on Page – here we want to adjust any form of settlement. Click that we want to align to the left side and bottom. This is the second icon in the first row and fourth icon in the second row.


Step 8




Now we need to reduce the canvas. For this, I suggest you take advantage of Guidelines. Set one that the top of the highest point of the polygon, and the other at right angles polygons. If you need to zoom in, click the button Z and zoom. When everything is good aligned, in order to reduce size you need to click on the button Z, and then hold down Shift. There is another option, but I'll write about that another time.


Step 9

Now click on the above Guidelines, and we get information of the Y axis. Copy that, and then get out of there (by clicking Cancel), click Ctrl + Shift + D and copied into the field height. Do the same with the guide on the side (right angles polygons), except that here we get the information for the X axis and copied that to the field width. Align polygon if necessary. Delete guides and click on File > Save as. In the lower right corner we have the option to choose an extension. We will choose as Optimized SVG. Named your polygon anything you like and save it.



Step 10

For settings, I took a screenshots for you.




Final step that is that you open your file with text editor, copy code and place it in your HTML/PHP file.

Congratulations! You just have create polygon by yourself and put it on the web site.