Problems with SVG in Synfig

When I import my SVG (created in Figma) to Synfig, the graphics displayed incorrectly.
Some are not displayed at all. Some are wrong colors. Some are displayed differently as in Figma.

Do I have to pay attention to something when i import SVG to Synfig?

1 Like

Synfig importing SVG is not that good, and sometimes may not work.

So I recommend you to install Inkscape and then save the file as .sif (Synfig animation file). Even if this cause any issue then you can

  1. Open file in Inkscape
  2. Cut all the contents
  3. Paste in place (Ctrl + Alt + V)
  4. And then try saving the file as .sif (Synfig Animation) from the Save As option.

Hopefully, this guide will be helpful, Figma exports SVG files optimized so that SVG files are not too large. This is good as well as bad, hopefully, Inkscape supports everything.

Also, development on SVG importer in Synfig is going on, features for writing importer and exporter in Pythons is also in progress, so we can export better import/export support in future.

2 Likes

I’m working (a few) in improving SVG importing.
It would be good if I have your SVG file for some tests.

My next step is fixing some wrong implementations of SVG “path” element.

1 Like

Many thanks for the answers!

I tried a little with the graphics in figma and then added some in Synfig. Unfortunately the way over Inscape did not work for me.

Apparently there are problems with the application of strokes and circles.

Here are some example graphics. Please note, I’m not professional and maybe the fault is on my side. In this case it might be better to use other graphics for testing.

[offtopic] btw: Synfig is a great program. And it’s fantastic that the developers are in contact with the users here.


#1

fibonacci-circles


#2

medal


#3

badge

Thank you @BigBang .

The original code of SVG importer was dedicated to render SVG produced by (old versions of) Inkscape.
At the time, ellipses and circles were made by another element (<path>) than current available one (<ellipse> and <circle>). Current importer code doesn’t even know those two elements.

Indeed, current implementation doesn’t recognize stroke for rectangle neither its rounded corners.

I’m working on SVG importer too, and I hope I implement those element parsers. :slight_smile: