Problems with SVG in Synfig

Development Debugging
1

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
2

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
3

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
4

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

5

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:

6

@BigBang By the way, these SVG files are successfully imported now in not-released code.
It will be available in the next development release (1.5.2).

We don’t have plans to full support for SVG importing however. Some elements are still missing: <image>, <text> and <use>/<symbol> are some examples. Besides, no SVG animation is supported yet. As a last note, dashed stroke is not perfectly imported.

1 Like
8

Very thanks for the solution!

I used the version SynfigStudio-1.5.1-2021.10.21-win64-2cb6c.exe. That worked very well for me to import the SVGs. Stupidly I deleted them. And now the file is no longer there.

Edit BobSynfig: Modification of the link. Please avoid to post links to unofficial or obscure direct internal url

EDIT:
Sorry, found the version again!

But unfortunately the next problem: The plugins from veermetri05 don’t work in the version.

This error comes up Cant open plugin

How I can set a path environment?

Is there any way I can add the relevant code for the SVGs to the stable version?

EDIT 2:
I am really sorry. It was my fault.

I forgot to save as .sif in Inkscape… :man_facepalming:
Also, the error with the plugins went away after I switched to the stable version.
I have now installed the stable version directly in C://Synfig as a precaution to avoid problems with spaces in the path.

Everything works now. As you said.

Thank you for your help!

1 Like