Centralize paths of svg images

Anh-Thi Dinh
Web Dev
You can either using <img> or svg for inserting an svg photo to your website. If you wanna change the color using css (eg. fill=), you should use svg. However, the paths inside the <svg> aren't always centrally aligned.
We can use IcoMoon App to do this.
  1. You should create an IcoMoon account (not required but recommended).
  1. Copy all the codes in svg image (open it with VSCode, for example).
  1. Click "Import Icons" and upload your svg images. Tip: You can drag and drop your file into IcoMoon. Note: If you meet some warning like "have to convert stroke to fill", you can use this online tool.
  1. Choose the pen icon (for editing)
  1. Click on an imported icon, a modal appears.
  1. Click on "Canvas/Alignment" tool > Choose "Square Canvas" then "Align to center".
  1. Click on "Scale" > "Fit to Canvas".
  1. Dowload you edited svg.
  1. Open it with a text editor. Copy all the code inside and use it.
There are many other tools you can use for editing svg image. You can even create a font with your svg image.