SVG Importing Issues

[neurowave]

These files need further investigation: SVGs Causing Errors.zip

[luigi-rosso]

Made some progress on this, the cartoon character now imports correctly.

[joao-cesar]

Thanks a lot!

[SirStancelot]

Hey all,

Attached some additional files that may be of use for comparison. The Illustrator file did import with all pieces in place, but every element imported transparent. Then I copied the Illustrator vectors to Sketch (v5.2) and created a new SVG and everything worked as it should when imported in Flare.

I've tried various settings in Illustrator, but didn't get any version to work. Sorry, didn't record the settings in my quick iterations... :/ Anyway the version in the folder is with the settings as I would use them on a website (I have to say that I usually use Sketch, or run it through an SVG minifier first if made in Illustrator).

Hope this helps :)

day 3 assets.zip

(The file name with "sketch" in it is the Sketch SVG)

[neurowave]

Looks like Sketch radial gradients don't import correctly.

This is the original file in Sketch:

This is in Flare, after import. You can see that the background is missing (which has a radial gradient) and the glow around the sun is missing (which is created with a radial gradient).

Here's the Sketch source file: space_reload.zip

Here's the SVG exported by Sketch: space reload svg.zip

[PatrickUsperity]

Having trouble with this .svg. It just shows a 'node' when I drag it on the Artboard. usperityvector.svg.zip

[luigi-rosso]

Looks like this SVG contains an image. We don't have image support yet, but it is coming soon!

[PatrickUsperity]

Vectored the image and it works perfect. Thanks! Looking forward to image support.

[CLucera]

Attached you can find a zip with my logo svg, made with Coreldraw X8, the shapes seem fine, but all the colors are rendered to black also the rectangle in the original is clipped by the circle shape, but in Flare it's shown on its own.

SVG file complete.zip

Original as seen in Coreldraw

Imported on flare

[luigi-rosso]

Thanks for the example, it's really helpful!

It looks like we're not handling style nodes in the defs, which basically allow for CSS styling by assigning classes to paths. @neurowave we should add this to our roadmap. Similar issue with how the clip is defined as style with clip-path reference. We have all the pieces to make this work we just don't have it working for this specific syntax.

[neurowave]

Added to Planned in our Roadmap! https://portal.productboard.com/twodimensions/tabs/2-planned

[luigi-rosso]

I made some progress on this. There are still a few fills not resolving properly, and there's a particularly interesting case in this file of a clip path existing only in the defs. We have to insert that path into our hierarchy for it to resolve.

[luigi-rosso]

I think this is working properly now!

[CLucera]

Wow! didn't expected you resolved this the time i was sleeping :D congratulations! your projects is really interesting and innovative!

[killermonk]

I'm having issues with the SVG import 1) handling gradients, 2) handling what adobe illustrator calls "internal css"

This rather complicated path was created in Adobe Illustrator. It looks like the gradients are being placed in the wrong position on the art board.

Zip file with relevantly svg files: svn import issues.zip

Original in AI:

All black import (internal css):

Import missing gradients (inline css):

Gradient in wrong place:

[neurowave]

Adding an SVG issue provided by a user on Spectrum:

The original post is here: https://spectrum.chat/2d/general/fail-to-import-svg-properly-in-flare~ce6278f7-86b0-42c2-bf6a-db46547c8048

I'm trying to load an svg inside flare but for some reason after importing, the transformation seems to be wrong.

You can try it yourself

https://gist.githubusercontent.com/gweltaz-calori/6518f1ae960be2dd17622590a8658150/raw/0e76bcd5daeefe0b25d2c581af225192550edad3/Group.svg

[orestesgaolin]

I didn't want to raise another issue related to the same problem, so I thought I'd ask here.

I'm trying to import simple linear gradient to my Flare project. Unfortunately none of them is displayed correctly in Flare - only black rectangle is visible.

Attached in zip you may find file saved in Inkscape (bg2.svg) and file with inlined css styles with svgo (bg3.svg).

svg_with_gradient.zip

[g33kidd]

I tried importing an SVG and it came out similar to the ones above. Attached the few svg files I tried to upload and use.

Expected to look like this:

Got this when imported into Flare:

pizza_svg.zip

[mountainsights]

My grid SVG came out a bit odd in flare. Expected:

What I got in Flare:

Here's my SVG file: svg.zip

[arthur109]

I've also got an SVG that's not working, its from figma and has gradients, inner shadows and drop shadows. svg.zip

[Lecarvalho]

Same problem here. When I import directly from Illustrator, the pieces are not at the good place, but when I import / export the same SVG from Figma, it works partially. The pieces are now at the good place on Flare, but I lost the gradients. For my project this is not so important, so I just changed the shapes for a solid color and that's good enough for now.

Illustrator:

Figma:

Flare

Here's my source file. Greenbacks_ai.zip

[neurowave]

The "line" object in this file from feathericons.com isn't importing.

I got it to work by opening it in a text editor and converting "line" to "polyline" and changed the x1 y1 attributes to the points attribute. But we should probably support the line object too (or figure out why this particular one wasn't working).

arrow_down.zip

[FrankenApps]

radialGradient does not work for me, too. I created the SVG in affinity designer, but I think it does not matter, what software is used. The items with radial gradients are rendered with a black fill only in flare.

[tunctn]

Hi, I can not import my attached SVG file. It says that 'You have found a bug!' and forces me to reload the page. source.zip

[luigi-rosso]

@trkmntnc we just submitted a fix for the crash on import!

[treglu]

File in Inkscape

happy_car - animation.zip

[ifiokjr]

This svg which contains linearGradient

Ends up looking like this:

Head_Front.svg.zip

SVG Code

```svg ```

[danzaner]

Hi,

I'm creating text in Affinity Designer and then saving as an SVG with the text converted to outlines so that no font files are required. My SVG looks ok outside of Flare. For example, Adobe Illustrator can open it. No luck getting Flare to display it properly, though, (but strangely, the thumbnail in the Assets pane of Flare looks pretty good -- you can sort of see the general shape of the SVG's contents.) Can you please take a look (or suggest a way to get text into an SVG that is compatible with Flare)?

Best, Dan

SVG issue.zip

[Ocelyn]

Hi the team, Here is my SVG file made with the latest version of illustrator, the gradients are not displaying properly, the mask on the mouth too and the tail line is bugged. error-monster.zip

[persello]

Hello, I add my issue here. This is what I see when I import my svg logo in Rive. The file is exported from Affinity Designer.

The actual logo looks like this. As you can see there are fill and alignment issues. I attach the original svg file (which is correctly viewed in every browser I have and even in the Assets section in Rive). sigma-logo.zip

[gemmastekelenburg]

Hello, I imported an svg file from Adobe Illustrator in Rive and the ellipses (the eye and the nose of a dog) ended up in the wrong place. Then I changed the ellipses into paths in Illustrator with: path -> simplify and the dog did not loose his nose and eye anymore.

[Roms1383]

Hi guys I would like some guidance : I would like to create round capped line in Illustrator (using CC 2019) which I would like to animate in Rive with trim path (to get this nice effect of a drawing line)

I tried several ways but I'm kinda stuck :

• if I use Line Segment Tool, it doesn't appear in Rive
• if I draw it with Pen Tool, it doesn't appear in Rive
• if I simplify it (Object > Path > Simplify), it doesn't appear in Rive
• if I convert my line to path (Object > Path > Outline Stroke), it appear in Rive but I can't use the Trim Path feature on it

So my design has 2 rectangles for the integrated circuit and a bunch of lines for the legs :

Of course if I create the whole design directly in Rive it works fine, but I would prefer to create everything with Illustrator as it's much faster to layout the objects.

Here is a preview of what I try to achieve (done entirely on Rive though).

[jimmyff]

Exporting from Affinity Designer using any of their SVG Export presets doesn't seem to work. Here is a sample file:

svg.zip

[gino8080]

This svg cause a crash in the rive.app app or a unknow file

base-1.svg.zip

[bonosmo]

Hi,

We're having issues importing this svg file, it comes it in the wrong position and with colors that don't match our original illustrator file:

OsmoEmojis.zip

For example, take a look at the yellow circle.

Thanks! Bonnie

[JHooker-Swerv]

Hi this svg is giving me issues. The asset imports and a thumbnail can be seen in the assets section and the layers can be seen in hierarchy but on the artboard the nodes are present but no actual rendering of the layers. problem_svg.zip

Exported from Adobe Illustrator.

Thanks!

[owenchikazawa]

Also having an SVG issue where I get the notification that I've found a bug. I don't have any embedded images. Let me know if there's any other information I can provide. Cityscape_Error.zip

[briaini]

Hi, I'm having an issue importing this svg from Affinity.

exported as so:

imports as below:

error.zip

[ghost]

same issue, gadients and mask dont copy over from illustrator. this is a critical issue and has been open for very long, can this be fixed?

before:

after:

file: svg.zip

[jpriollaud]

+1

[tgloureiro]

Hi, I exported a SVG file from Figma and the linear gradient colors doesn't match in Rive 1.

Figma's rendering: Linear gradient settings:

Rive's rendering: Rive's gradient settings:

SVG file: light.svg.zip

I tested it with another file, a simple ellipse with a linear gradient:

Rive's asset preview renders it correctly, but in artboard it has the same glitch.

Artboard render:

Simple linear gradient file: ellipse.svg.zip

I've found a workaround: If you import the file without a gradient, then you can insert a linear gradient using the "Fill" tool. The "Fill" tool doesn't works if the imported file already had a linear gradient. Looks like an issue parsing the SVG/converting to an internal representation of the linear gradient.

[pcdavis]

I created an svg map in Illustrator and optimized it at svgomg, but can't seem to get it to show up correctly in my Rive assets. Attached is a screenshot of what shows up in Rive. Also attached is the svg file. Any help would be greatly appreciated. Rendered svg: SVG zipped: base map gettysburg-01.zip

[Will-Swain-Sprout]

Hey Rive Team,

I've been trying to import simple line work .svgs from AI (similar to Feather Icons) and find they rarely import properly. They seem to always be missing some line work, or their transforms don't import / convert properly. It seems that the additional attributes such as rounded ends and corners on paths, also don't carry across into Rive.

With this particular example I have tried exporting the artwork as a whole .svg as well as breaking it down into smaller .svgs each with their own problems. I also noticed that the import thumbnails in Rive display the .svg perfectly.

The file being exported from AI:

The file once it has been imported into Rive. At the top is the .svg as a whole, and below it has been broken up into individual rows. It is worth noting that the monthly text once separated, expanded and filled in AI imported perfectly.

Similarly to others, I'd rather create the artwork predominantly in AI for the speed and layout of objects, and then use Rive to animate them.

Also cheers for all the hard work! For the most part I find Rive great to use and a really helpful tool to have in my workflow! I hope the .svg import support continues to improve.

Cheers, Will

SVG_RiveImportIssues.zip

[gemmastekelenburg]

If you change forms, like rectangles and circles into paths, by simplify them in AI, it might help.

[tnaseem]

Hi,

I hope you can help! I just exported an SVG from Illustrator CC: smiley_happy.zip

and, although it shows up fine as a thumbnail in the assets section, when dragged onto the Artboard, it's all greyscale. The origin is also the top left - I assumed it would be at the centre?

Any help greatly appreciated!

[famahmood]

Hi, Does rive editor allow importing animated SVG's? Or it only support static SVG's? When I try to import following animated SVG in to editor, I only see artboard in red back ground with no animations.

PauseAd_Coca-Cola Spot_Test_SVG.svg.zip

[chenminho]

Hi , I want to import my .svg file in to Rive but it did not work very well. After it show successfully converted svg to my rive but actually there is not thing on panel. I don't know what happen to my svg file. Would you please tell me?

Hope can get support convert my file to rive successfully!

Thank you!

0514.svg.zip

[AesaKamar]

Hello, I'm trying to import an SVG into Rive

I expect for this to import successfully, However, I end up with the SVG in the Processing state. Its been in that state for over an hour. I've attempted to open a new rive artboard, as well as importing other SVG files (which import successfully)

Other SVG files exported from Linearity Curve, albeit simpler, seem to work successfully.

Some diagnostic info

• Source Application:
  • Linearity Curve (a rebrand of vectoronator)
• Features used:
  • Radial multi-step gradients
  • Grouping
  • Masking

Copy of vector stuck in processing state: