Inkscape, Affiniy Designer, Illustrator vs SVG.js

1

What is SVG.js?

I cloned a repo that uses it for building guitar chord images.

It blew my mind when I saw someone open a .svg file into VS Code and instead of displaying the image it displayed the paths. I had no idea you could do that.

IMO, my guitar chords are visually “better” than what I see on other websites. I built my chords using Inkscape but when I brought an SVG version into VS Code the code was different - it was a bunch of Inkscape “junk”. I love the program but it is freeware.

Does only Illustrator create SVG files that are strictly paths and the other aspects of an SVG file, or can Affinity Designer do the same?

I have over 2500+ guitar chords to build! But if I could program the overall design with JS then I could build all my chords very quickly plus they could be queried by note, key, scale, or fret number.

I ask because I bought Affinity Designer but I don’t want to waste my time learning it if ONLY SVG files created with Illustrator can be manipulated. Or am I wrong and only SVG’s created with HTML can be manipulated? Here is an example of a chord I built with Inkscape:

C13-4-6-8-6-8

Any thoughts on how to create this image only with HML, CSS, and JS? What exactly does SVG.js do?

2

I mean they’re just SVGs, there’s no difference, an SVG is an SVG. All of them normally add some junk one way or another by default, but all of them also provide some way to configure the output so that it doesn’t do that.

3

Ok, let me look into the settings.

4

SVGOMG - SVGO's Missing GUI will optimise SVGs as well, step out most of the junk

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.