Creating SVG from InkScape to use on your website's HTML

In working with a chart heavy project, the designer has literally think out of the box and make some nice little triangle in the bubble of a tooltip. Making it even look nicer he added border to the polygon shaped tooltip.

I wanted to implement that design using SVG graphic and embed that in the HTML page. To create the shape I used the free opensource vector graphic software "Inkscape". Yet the output SVG from inkscape contain many irrelevant data. Then I found a way to clean up all the irrelevant data.

Suggested workflow (adapt to your needs) for making a typical Inkscape document web ready:

1. Fit the document size to the picture size: Menu File->Document Properties. In the Custom size panel, open Resize page to content, then click Resize page to drawing or selection.
2. Remove unused DEF's: File->Vacuum Defs.
3. Optimize SVG': File -> Save as... -> Optimized SVG. Tick "Enable viewboxing in the save dialog. This operation will do several things, in particular, insert correct viewBox, width and height attributes.
4. Remove non-standard SVG/Inkscape XML: File -> Save as... -> plain SVG (Since this operation will remove layers and other Inkscape specific information, keep a copy of the old file if necessary). As of Jan 2014, this can trigger a display error as shown in Using Inkscape for web animation. Reopen the saved file and the blackness may be gone ....

After following that workflow, I can extract the bit of SVG I need to type that into the HTML I am working on.

read on : Using SVG with HTML5 tutorial