Featured image of post SVG Path Icon for Hugo Static Website

SVG Path Icon for Hugo Static Website

in this article I will discuss blog optimization to improve the performance of faster blog access, I follow these tips from the results of a speed test on the Google speed test

main topics

In this article I will discuss blog optimization to improve the performance of faster blog access, I follow these tips from the results of a speed test on the Google speed test, then I follow every optimization guide that must be done. One of them is here. I did an optimization that slowed down access to my blog due to the svg file that I used in the blog content.

Then how to overcome all this?

What I did was, I had to find a solution to using image files in the SVG format, which I apply a lot on blogs, which causes slow blogs, but it needs to be underlined that using SVG format files is actually much better than using JPG or PNG format.

to overcome this all I have a solution, iemy-export the svg file that I used thenmy-import that svg file uses SVG PATH CODE. The application that I use is the applicationopen sorece namedGIMP (GNU Image Manipulation) to convert SVG formatted image files into path code.

What’s the result?

I found that the blog increased in performance when tested using itGoogle Speed. Then below I will explain how to use the applicationGIMP to convert an SVG format image file to a filePATH

  1. First, here I assume that everyone has installed the Gimp application on their respective laptops or computers.

  2. Next, you open the SVG format file which will be imported into the fileSVG Path Code

  3. Once open, then select the menuWINDOWS -> Docable Dialogs -> Path

  4. After the third step, look at the lower right corner next to the image there is a menu path like the image below.

1
![import file svg to path file](/images/pathicon.png)
  1. Select on the section**+** which is at the bottom henceforth a menu will appear to change the file name, then replace the file name with what you want.

  2. Then right-click on the layer in the path menu on the lower right, then selectImport Path, then find the image file that was selected earlier.

  3. After that, right-click again on the image that is in the path menu but in this step select itExport Path, then specify the location where you will save this file.

  4. Finally open the file that was just inExport with your favorite text editor application.

  5. You can use the result codeExport that is to be included in articles or property features of your website or blog.

Hopefully this article is useful, happy learning!

comments powered by Disqus
Built with Hugo
Theme Stack designed by Jimmy