Add custom svg elements on toolbar

[Bykiev]

Hi,

I'm new to svgedit, I want to integrate svgedit in my application. Is it possible to add custom svg elements on toolbar or any other place to allow users select from predefined elements?

[brettz9]

You can build an extension to have them added to the top or left panels. See https://svg-edit.github.io/svgedit/releases/latest/docs/jsdoc/tutorial-ExtensionDocs.html and specifically the section "Creating buttons" (and follow links through to the APIs). The button's events.click event handler and/or mouseDown returned by the extensions's init can be used to add calls such as svgCanvas.addSVGElementFromJson (see editor/extensions/ext-foreignobject.js for an example of either usage; view the foreign object extension in action at https://svg-edit.github.io/svgedit/releases/latest/editor/svg-editor-es.html?extensions=ext-foreignobject.js ). If added in this way, be sure to add an id to attr in the call to addSVGElementFromJson so the element can later be found for modification/removal.

There is also a svgCanvas.setSvgString, but this is for setting the entire canvas.

[brettz9]

Will close as that should address the question and get you started, but feel free to comment further.

[rishabhjain2110]

the link you shared is not opening. Can you share some reference material how to make extensions?
I am using svgedit-5.1.0

[brettz9]

The docs are not currently online as they need to be built (npm run build-docs). However, you can see a version without fully functional links at https://github.com/SVG-Edit/svgedit/blob/master/docs/tutorials/ExtensionDocs.md

(And the demo URL I shared is now at https://svg-edit.github.io/svgedit/src/editor/svg-editor-es.html?extensions=ext-foreignobject.js )

[rishabhjain2110]

i need to create one extension which will return buttons. No of buttons and label will get from ajax call..
can u write extension file for this for svgedit-5.1.0.

[brettz9]

It can be done, yes. If you need help, look in src/editor/extensions, or possibly ask in StackOverflow.