The last modifications of this post were around 1 year ago, some information may be outdated!
You can either using
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.