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.
- You should create an IcoMoon account (not required but recommended).
- Copy all the codes in
svgimage (open it with VSCode, for example).
- 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.
- Choose the pen icon (for editing)
- Click on an imported icon, a modal appears.
- Click on "Canvas/Alignment" tool > Choose "Square Canvas" then "Align to center".
- Click on "Scale" > "Fit to Canvas".
- Dowload you edited svg.
- 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.