[OTHER] Extending wiki with tutorials for each recommended tool

[Snailedlt]

I have searched through the issues and didn't find my problem.

• [X] Confirm

What would you like to share?

It would be nice if we had a wiki page with tutorials for all the recommended tools. This can of course be added incrementally.

@BenSouchet Has already made a quick tutorial for a new tool recommendation here -> https://github.com/devicons/devicon/issues/1279#issuecomment-1195433256

We could follow the same format for the other tools that we have in the Recommended resources and tools wiki page, then add a link back in the table on that page.

Example

Tool Name	Link	Description & Usage	Tutorials
Inkscape	https://inkscape.org/	Free desktop application for editing and making SVGs	how to foo, how to bar
Visual Studio Code	https://code.visualstudio.com/	A code editor for editing code	how to vscode
vscode.dev	https://vscode.dev/	Visual Studio Code in the browser	how to vscode
Iloveimg	https://www.iloveimg.com/resize-image/resize-svg	Resizing SVGs (this doesn't work with SVGs containing complex elements like gradients, etc.). Still have to add the attribute viewBox="0 0 128 128" manually to your resized files.	cool tutorial
svgviewer.dev	https://www.svgviewer.dev/	View, save, and optimize SVGs	tutorial1
Vecta.io	https://vecta.io/nano	Compress and optimize SVGs	tutorial1

Additional information

I propose the following additions

• 1 new wiki page for tools usage and tutorials
• A new column in the table on the Recommended resources and tools wiki page (as shown in the example above)

[Snailedlt]

How to convert bitmap/raster images (PNG, JPG, JPEG, ...) into SVG's:

1. Using Inkscape: https://github.com/devicons/devicon/pull/1428#issuecomment-1271702666
2. Using Online tools (often better and faster): https://github.com/devicons/devicon/pull/1961#issuecomment-1788123861

[Snailedlt]

How to unite/unify paths in Inkscape: https://github.com/devicons/devicon/pull/1468#issuecomment-1290185341

[Snailedlt]

How to optimize and minimize SVG's with SVGOMG: https://github.com/devicons/devicon/issues/1279#issuecomment-1195433256

[lunatic-fox]

Instructions of how to resize to square in Inkscape: #1465 (comment)

[lunatic-fox]

Checking grouped layers in Inkscape: #1468 (comment)

[kilianpaquier]

Transforming plain or original logos into outline ones :

1. First of all, select the path (right panel, section Layers and Objects) you want to transform into an outline.
2. Head to the section Fill and Stroke on the right panel and select the sub-section Stroke paint.
3. Here, select the first option Flat color.
4. If needed, you can adjust the border width on the sub-section Stroke style of the same section Fill and Stroke.
5. Now that you are all set, head to the top navigation and open the Path menu, select Stroke to Path.
6. Now, you can head back to the section Layers and Objects, you'll now see a folder containing both the stroke (as a path) and the initial path.
7. Move the stroke to the root of the SVG, and delete both the folder and the initial path.
8. You're all set, you should have a beautiful outline path.

NB : Keep in mind that the width will also vary if you resize the logo afterhand. You also can't modify the outline width after the transformation Stroke to Path.

[Snailedlt]

How to resize and center a SVG in Inkscape: https://github.com/devicons/devicon/pull/1938#discussion_r1378205483