Article | Date posted : 15 December, 2013 | Updated on : 26 April, 2014

How to convert & resize images to SVG and using inline HTML using free tools

Sponsored Links

I’m currently rebuilding this site and wanted to optimize a lot of elements that speeds up sites. Especially as I’m using WordPress to publish my articles. Today what I will teach you is how to convert any image to a SVG format and using that image inline into your document.

Why use inline coding?

When loading images the browser needs to open up one of its connections to download the image resource. Instead of downloading an external file, you simply use what we call an inline SVG path. This inline SVG path can be found inside the SVG image file. But don’t worry I will explain all the steps you need to do to carry out an inline image.

How does an inline SVG code look like?

An inline SVG code consists of one opening tag which is <svg> and a closing tag . And inside the SVG tag,  are the paths located which can be one or more lines. It will look something like the code below.

When you copy this code into your html editor, you will see an image in your browser.

Step 1 Converting any image type to SVG

I use an online tool that converts jpg/png to svg, it is free to use with any file size and image dimensions. Simply upload your image file and click convert. You now will be able to download a SVG file.

When uploading png files make sure there are no transparent elements, the converter can not see the edge lines on certain colors, I would recommend to have a black background, as you will be able to delete the black path in the converted SVG file. This to enable a perfect conversion.

I would also recommend to upload the largest image you have possible so that the conversion is much more accurate and higher in quality.

Step 2 Re sizing an SVG file

To re-size an SVG file you need to use Adobe Illustrator, if you are using adobe illustrator you can export svg images without the need of 3rd party tools. Or what I use is the open source Inkscape, after you have downloaded this program you can re-size an SVG image doing the following steps.

  • ctrl shift + m
  • select the scale tab and re-size your image

inkscape scale


  • Now select all your layers with the selector tool
  • In your tool bar you need to position the X and Y to 0
inkscape re position layers

inkscape re position layers

Once your image is re positioned and re-sized, you need to re-size your canvas, to match that of your image size. You can do that by going to File > Document Properties

inkscape resize canvas


Now save your svg file in File > Save file as > svg

Step 3 copy the SVG inline code to your HTML document

Open the SVG file in your favorite HTML editor and copy everything inside and include the opening and closing SVG tag.

If you have added a black background and you want to have a transparent background, simply delete the path line with your black color. Most likely the path line that has fill style applied with #000000

Once you have copied your code simply place it wherever you want to show your image.

You have now successfully reduce your page load timing.

I have written this article to accommodate how to speed up your WordPress site

Sponsored Links


Leave a Reply

Your email address will not be published. Required fields are marked *

Follow me on Google+

Google Shopping Data Feed Generator

Sponsored Links

Hire Me