How to export and SVG from Photoshop to HTML

in this tutorial, i will show you how to create an SVG using Photoshop and export the SVG code to an HTML file.

SVG is a good way to insert illustration to your page, you can use some effect on it and it will make your web page design more dynamic.

you will see that this tutorial is very simple and it will help you a lot with your future project. so let's start this tutorial

I-Open a new project in photoshop 

we will, first, open photoshop and create a new project, you can call it whatever you want.

Then we will select our pen tool and we will create a random shape using it.

select the pen tool ( red box )

the new shape was created 

as you can see our shape was created ( red box in the layer view ). after we created the shape that we want to export it's easy. All that we have to do is right-click on the shape and we will choose copy SVG. 

after selected copy SVG we go to our text editor and copy the code then we open our browser and you can see the SVG appear.
an example using sublime text: 

the SVG code 

As you can see the code was copied and when we save our page and open the browser, Tada, our SVG is displayed 

the final result

and that's it.

As you can see it's pretty simple, it saves time and the result is very clean and beautiful.