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 Creating SVG from InkScape to use on your website’s HTML 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.

Creating SVGs suitable for use as website icons

The easiest way I can think of is to draw the icons, perhaps using a stroke and no fill, so that you can see what you’re doing, and just don’t give them any fill color. 

Then there will be no inline color value.  I guess you’d have to remove the stroke right before you save the file.  And then of course the file will appear to be blank, by looking at the canvas.  But the file won’t be empty, it will just have an invisible object in it.

However, I’m thinking that perhaps whoever told you that meant to manually remove the color value from the SVG file, using a text editor. 

Also Read Best Investment books 2020 That You Need To Read.

I might choose this way, because then I could save 2 files – one file with the original color (so you can see it if you need to edit) and another file with the proper code which is missing the color values.

In case you were taking the long way around to ask how to use Inkscape, Try Inkscape’s Help menu > Tutorials > Basics, Shapes, and Advanced (don’t worry, the one named advanced really isn’t, and in fact is an introduction to the most basic and important parts of vector graphics).  Also don’t miss Help menu > Inkscape Manual.  The tutorials will help you learn the terminology that you need to use the manual. 

1 thought on “Creating SVG from InkScape to use on your website’s HTML”

Leave a Comment

Share via
Copy link
Powered by Social Snap