How to import svgs from a library

[hnaether-c8y]

Dear FUXA team,

I want to extend the available svgs in the editor and have found the wiki page on how to add new shapes here: https://github.com/frangoteam/FUXA/wiki/HowTo-define-Shapes
I tried this approach. To me it looks like the svg file then is only used to display the icon in the menu, but if you want to use it in the editor pane, the content attribute is actually used, which seems to be a json representation of the svg contents.

While this approach works for manually adding a few icons which only contain a few paths, it's impossible to import e.g. a library of 500 svgs where each svg is complex, meaning the solution doesn't scale at all. My question now is - do you maybe have a tool available that parses a svg to this json format? This would already help alot!

Best regards,

Hendrik

[AngelFernandezSobrino]

In my opinion, it's also an important feature to add, like custom DAQs, but it also requires an improvement on the SVG animations system. For example, adding the custom animation type on the shape object or defining the transformation function inside the shape objects with anonymous functions, making a kind of custom shape component which takes some component behaviors from the shapes library file. I will maybe try to implement it in the future for my projects, I think that is a good improvement for the project, together with a parser to link the content of the shapes to an SVG file or maybe a shapes.js generator script from SVG files.

[unocelli]

I would be very happy to have help. ❤️

[unocelli]

Hi,
I have just pushed a new feature where you can add svg image as library. look in server/_images folder

[hnaether-c8y]

This works already well. Thank you for the very fast response!
Unfortunately there are still some problems I found when importing external SVGs:

• The fill color feature doesn't seem to work properly when more complex SVGs are imported to the canvas
• if SVGs have a width and height attribute in their svg tag, this malforms the display of the icon in the side menu (fixable by using background-size: contain for the span for which the backround-image is set)
• if SVGs have nested svgs tags, the dropped svg shows on the canvas but disappears once the save button is pressed (related to the getSvgString method inside of the fuxa-editor.min.js library

P.S. in my very customized fork of this project where no server is used, I created a python script which, when being run, creates a json file for every external svg folder which gets added to the assets. This then is consumed by the resources service and the side menu then displays a new section for every folder, listing all svg files of every folder. In case you're interested to see that appraoch, let me know and I'll send you.

[unocelli]

Hi,
could you send me one of these svg images that are not render correctly.
about your fork version I would be pleased to see it