[Inkscape] : How to import inkscape SVGs in Html file

[Inkscape To Web]: Make beautiful sites with SVGs

In this tutorial we will make a SVG drawing in Inkscape and will use it in a webpage. The goal of this tutorial is to know how to make beautiful SVG Drawing for your website.

Before starting you should have following things,

• Familiarity with SVGs/Inkscape and HTML 
• Inkscape Installed.

How to Embbed

Step 1: Open Inkscape. Now make a simple Shape. I am making a polygon,

            

                      

  [Click on the Image to Enlarge]

Step 2: Now save it as a svg. The inkscape saves its files as svgs but it is not compatiable with html. It a lot Inkscape specific(useless) data. To save it as plain Svg. Click on File->Save as. Then from dropdown box in the dialog box. Choose the .PlainSvg.

 [Click on the Image to Enlarge]
Step 3: Now open your favorite code editor i am using the brackets. Now open this .svg File that we just saved using Inkscape.

  [Click on the Image to Enlarge]
Once opened it should look like this, you can delete metadata and other information.Only the <svg> tag and the path(encircled in red in below image) is required atleast.

 [Click on the Image to Enlarge]

Step 4:Now Create a .HTML file and open it with your code editor. Write simple boilerplate webpage.
      

Step 5: Copy all the contents of the .SVG file in this HTML file.

 [Click on the Image to Enlarge]

Step 6: Done!!. now open you .HTML file in browser.You will be able to see your svg drawing there.

How to Animate 

One of the cool thing about svg is that they can be animated. We will create a simple code for animating our svg. It will animate stroke width.

Write simple css code for animating stroke width of our svg path like this,

<style>

.path
{
    stroke-width: 1px;
   animation: thick inifinte alternate;
}
@keyframes thick
{
     to{stroke-width:20px};
}
</style>

Add this class to your svg path tag.,

  [Click on the Image to Enlarge]


You can also save you inkscape drawing it as optimized SVG. Its not included in this tutorial because it have a lot of options, that you can export it with. Which will make this tutorial complicated and unnecessarily longer.