Creating SVGs
Why use SVG (Scalable Vector Graphics)files across your website?
-SVGs generate crisp graphics at any scale: perfect for websites with responsive design
-Your client does not have the budget to purchase licenses forspecificicons/images
-Your client requires extremely specific icons for accessibility purposes
-Accessibility reader/viewer and SEO optimized
-Smaller than other formats
https://blog.hubspot.com/website/what-is-an-svg-file
How to create an .SVG file from a regular image file.
This tutorial utilizes a free software called Inkscape that you can download here: https://inkscape.org/.
Please see the end of this article for other software.
1.Open Inkscape.
2.Choose "File -Import" to import a bitmap file(png, jpeg, etc.). In my case, I used the free image editing software GIMP to draw my icons and save them as PNG files.
3.Choose to "embed" the image.
4.Select the image with the select tool (↖).
5.Select Path -Trace Bitmap... for settings (below shown for 5colorlayers= "Scans" ):
6.Select "Update" for a preview until settings are fine.
7.Start tracing with "OK".
8.Now a vectorized image of your original bitmap will be seen on top of the bitmap. Delete the original bitmap layer by selecting it and pressing delete/backspace.
9.Use “Edit –Resize Page to Selection” to auto crop your SVG file.
10.Use "File -Save As" to save your file in SVG format.
https://askubuntu.com/questions/301540/export-image-as-svg-in-gimp
Editing the colors of your .SVG file
1. Using the Select tool, single-click on the color you want to change.
2.Your color should populate in the Fill and Stroke window.
3.Use the sliders to find your desired color or enter a hex color code in the space next to “RGBA”.
Drawing your own paths
SVG images are drawn with “paths” that websites read to draw your images in real-time. There is a bit of a learning curve when it comes to working with paths, so here are popular software that provide a lot of documentation you can use to learn more:
-Photoshop (commonly used, but costs money)
-GIMP (free software that is commonly used for a wide range of image editing needs, but path drawing feature is more difficult to use than Photoshop)
-Inkscape (free software with a lot of documentation, used only for creating SVG)