How to Create an SVG

There are two ways to create an SVG: by writing CSS code or using a dedicated design tool and focus on the creative part.

In this video I'll show you how easy it is to use SVGator to create this SVG representing an ecommerce illustration.

After you logged into your SVGator account, click on the New project button. I'll name my project "Online Shop".

Step 1 - Enable the Grid

Leave the canvas size 300 by 300 pixels and click on Create. First, let's enable the Grid from this menu here. Also, make sure to have the Snap to Grid option enabled.

Step 2 - Create the first object

Now, select Rectangle from the Shapes drop down and click and drag on the canvas to draw it just like this.

Next, I want to change the fill color to do so I need to go to the Appearance panel and click on the Fill property and choose a dark blue for this rectangle.

Also, I'll set the corner Radius to 12 pixels. With the transform tool, here, you can select and move the objects you just created.

Now I need to draw the monitor stand. For this, I'll need the Pen tool which I'll find right here in the toolbar. I'll simply click to place the first node right here in the center and then continue drawing half of the stand.

The Snap to Grid option helps me draw precisely and obtain uniform lines. After closing the path, press A on your keyboard to switch to the Node tool. You can see it here and adjust the bezier handles if needed.

Like I'm doing right now with this one done. Now press V on your keyboard to switch to the Transform tool. Then go to the appearance panel and swap the color from Stroke to fill.

Now with the shape still selected, hold down the Alt key and drag it to the right to create a copy of it.

Then go up here in the toolbar and click on the flip horizontal option to flip it. Then select both of the shapes and merge them together by clicking on the union option.

I want the monitor stand to have the same color as the rounded rectangle. So I'll use the Eyedrop tool next to the fill option to pick the same dark blue color

To draw the screen of this monitor, I'll use the Shape tool again and create another rectangle right over the other one just like this.  

For the fill color, I'm going to select the fourth option, Radial gradient, here. Click on the outer color and pick a light blue for it. Actually, let's make it more purple. For the inner color, I'll go with white.

To adjust the shape of the Radial gradient drag this black square, here.

In this case, I want it to be a circle instead of an ellipse. Ok, it looks good enough. I just want to add one extra detail here. So I'll select the Ellipse tool and draw a little circle on the monitor's bottom bezel.

But first, I'll disable the snapping option to be able to freely drag the ellipse. To start dragging from the center, hold down Alt or option key on your keyboard and Shift to maintain the proportion of a perfect circle.

Then pick the dark blue color again and starting from it, I'll just choose a slightly lighter blue.

Step 3 - Organize elements into groups

Good, now that I'm done drawing the computer, I'll select all the elements by clicking on an empty spot in the canvas and dragging over all of them, and then put them into a single group.

To do so, simply Right-click and group or you can also press Control or command G on your keyboard.

To keep things well organized, double click here and rename the group, I'll just type in "Computer" and then press Enter.  

Step 4 - Create the second object

Next, I will draw a shopping cart icon on the computer screen.

For this, I'll use the Pen tool. Let's just zoom in a little and click to add the first node of the path. Then continue drawing adding nodes one by one. I'll just draw the back and the bottom of the cart for now. And I'll add the rest of it as a separate path.

To end drawing the current path and start a new one, simply press the P key on your keyboard, then start drawing the basket of the cart. Hold down the Shift key to draw a line perfectly horizontal or vertical, there.

Now to further adjust the paths, node, press A on your keyboard to select the Node tool. Select the nodes you want to adjust and freely move them around.

I'll adjust the bottom as well and make this line shorter by dragging this node right about here. Oh, and this one here. I'll bring it right on top of the other line.

Now that we have the body, let's work a little on the style of our Stroke path.

First, select both of them and in the Stroke width input, here. Increase the value by pressing the arrow up key on your keyboard and bring the value to three or maybe a little thicker. How about four?

Now, let's have rounded joins and also rounded ends. It looks way better now.

I also need to add the wheels. So I'll draw two circles real quick. Draw the first one, pick the color from the cart, then hold down Alt or option key and drag to copy it there.

Let's also organize those elements into a group. Select all four of them, press Control or command G on your keyboard, and double click to rename it.

I'll simply name it "Cart". Now, I'd like to create a background shape for this icon and have them both here in the center.

For now, I'll move it away and draw a square in the center of the screen. Same as for the circle, hold down Shift and Alt to create it from the center and maintain a square proportion.

As a fill, I'll choose the third option, which is the Linear gradient there. Now let's adjust the orientation by moving the ends of the gradient and place them on the diagonal.

Now I'll set the color from the left. And of course, the second color from the right. You can still adjust the distance between the two colors and move them out of the squares area, to have a softer blending between the colors.

Next, I want to transform this rectangle into a rounded shape. But this time I won't use the Radius slider for it, instead I'll Right-click and convert it into a path.

This operation allows me to access the nodes of the square which is now a path element. So I'll select its nodes and from the Node type options, I'll choose the second one, mirrored. Notice how the nodes change now to curved bay ears creating a shape I really like as an icon background.

All I'll do is to scale it down a little, of course, while also holding the Shift key to maintain its proportion. Now I'll bring back the cart which now is behind the shape.

To fix this, just grab the Cart group from here and move it above, to be in the top of the list. Then open the group by clicking on the folder icon, select the wheels which are the two ellipses and change their color to white.

Do the same for the two path elements and change the stroke color to white as well. Great, we have a good contrast.

Now, white on a purple gradient background works pretty well. I still have to scale the Cart group down a little to give it more space around, there, that looks better.

And we got to the final details. I'll create another circle and make it look like a notification dot. I'll give it a white stroke and make the fill color red.

Step 5 - Use the library assets

Ok, now let's save up some time and pick some elements from the library instead of drawing them. Click in the Library tab, here, next to the Elements tab.

Here you can find plenty of symbols, shapes icons and so on.

Let me expand this section a bit so we can see more of them at once. To add one element to the canvas. You can simply click on it, but you can also select more and insert them at once.

In this case, I'll select this one and I'm also looking for a hand cursor, here. Now with both of them selected, click here to add them on the canvas. Good, let's collapse this back and switch to the Elements tab.

Those assets from the library are all fully customizable SVGs. You can edit them as you please to best fit your project. For instance, I will add a fill color and I will also change the default stroke color to a dark blue and set its width to three.

Then I'll scale it down and place it right here. I'll do the same for this path. I'll first scale it and place it on the red circle, then change its color to white and maybe make it even smaller, there. Perfect.

So this is how you can create a simple SVG in SVGator using basic shapes and the Node tool. Now let's go further and export it.

Step 6 - Export the design in SVG format

Click here on the Export button and choose SVG. Because we didn't also animated it, the SVG format will be static but even so it can be responsive or with a fixed size.

Let me show you, let's choose Fixed size and then click on Refresh preview. The preview will show us the actual size of the SVG, the same size as the canvas of 300 by 300 pixels. And if we switch back to responsive, the SVG will scale up to fit all the available space. In this case, the Preview window.

Let's go ahead and export it and view it in the browser. The SVG will download instantly and you can find it in your designated download folder, I'll Right-click on it and open it in Google Chrome.

And here it is. Because it's responsive, it will scale with the browser window and because it's an SVG, basically vector image, it will never lose its quality, no matter how much you scale it, it will always look sharp and clear.

Thanks for watching this video, enjoy creating amazing SVGs.

Still have questions? Send us an email to contact@svgator.com and we will get back to you as soon as we can!

Related tutorials to help you out:

How to Create Basic Shapes - Pt. 1 - Creation

We’re going to look at how to create basic shapes in SVGator, and how they work. This is part 1 of a 3-video series. Check it out!

SVGator

How to Create Basic Shapes - Pt. 2 - Paths

In this tutorial we’re going to look at the difference between shapes and paths, and how to make changes to the basic shapes in SVGator.

SVGator