This thread is not strictly about web design, but it relates to it, so I hope it’s OK…
Using Affinity Designer 2 on a Mac, how do I export an image as a SVG with one single-path (no matrix)?
Alternatively, how do I convert a matrix SVG to a single-path one?
Can someone suggest some online service that can create a single-path SVG from my image?
BTW, I asked Leo (AI feature in Brave browser) and all answers were wrong. Leo even suggested that I use menu items and tools that do not exist in Designer 2.
Hi @fapkogi
Affinity (like Adobe illustrator) presents some problems with your goal. Here is the theory to export an SVG with a single path (no matrix) in Affinity Designer 2 on a Mac:
Convert all objects to paths: Ensure that all shapes, text, or compound objects are converted into editable paths. Use the “Convert to Curves” option in Affinity Designer for this purpose.
Combine paths into one: If your design contains multiple paths, select them all and use the “Add” operation in the Geometry tools to merge them into a single path (never worked for me).
Flatten transformations: Check for any transformations (e.g. scaling, rotation…) applied to the objects. Apply these transformations permanently by using the “Expand Stroke” or similar options to avoid having transformation matrices in the exported SVG (it’s really really theoretical, I never succeeded in it).
Export settings: When exporting, go to “File > Export” and select SVG as the format. In the export settings, ensure that rasterization is set to “Nothing,” and check options like “Export text as curves” if applicable.
Well, all this is the documented theory. I tried it several times with several different files, I never managed to get what I wanted (I think of a curse with Affinity Designer 🤪, for Adobe Illustrator I think rather of a bad design of the software). Fortunately a free solution works perfectly: Inkscape, I only use this software for my SVGs (and VSCode to edit and modify the SVG directly, I had problems with Textedit sometimes).
If you already have an SVG file with matrices and want to convert it into a single path with Inkscape:
Open the SVG in Inkscape and use “Object to Path” to convert all elements into paths.
Combine multiple paths using “Path > Combine.”
Save the file as an optimized SVG.
There are some good tutorials for this on Youtube using Inkscape.
Alternatively, online tools like Vector Magic or SVGOMG can simplify and optimize your SVG, though they may not always guarantee a single-path result. So you need manual adjustments, editing the SVG code directly in a text editor (welcome VSCode) to remove transformation matrices by applying their effects directly to path coordinates.
In conclusion only Inkscape worked correctly for my purpose (like yours), Affinity and free online solutions have always been problematic. Sorry I can’t say better.
Thank you both. I will definitely check out Inkscape.
Incidentally, the reason for me to look for this solution was also the Quick SVG stack. I looked at the product page but I didn’t notice the info Jason mentioned above.