devicons
[OTHER] Extending wiki with tutorials for each recommended tool
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)
How to convert bitmap/raster images (PNG, JPG, JPEG, ...) into SVG's:
- Using Inkscape: https://github.com/devicons/devicon/pull/1428#issuecomment-1271702666
- Using Online tools (often better and faster): https://github.com/devicons/devicon/pull/1961#issuecomment-1788123861
How to unite/unify paths in Inkscape: https://github.com/devicons/devicon/pull/1468#issuecomment-1290185341
How to optimize and minimize SVG's with SVGOMG: https://github.com/devicons/devicon/issues/1279#issuecomment-1195433256
Transforming plain or original logos into outline ones :
- First of all, select the path (right panel, section
Layers and Objects) you want to transform into an outline. - Head to the section
Fill and Strokeon the right panel and select the sub-sectionStroke paint. - Here, select the first option
Flat color. - If needed, you can adjust the border width on the sub-section
Stroke styleof the same sectionFill and Stroke. - Now that you are all set, head to the top navigation and open the
Pathmenu, selectStroke to Path. - 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. - Move the stroke to the root of the SVG, and delete both the folder and the initial path.
- 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.
