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)