Svgedit REAL inline code sample

[cheikhnadiouf]

Can we have a working example solution to make svg edit working like an HTML inline code ?
(no iframe and no copy/past all the files please thanks)

[brettz9]

The short answer to your question is that, short of the iframe approach (as used in editor/embedapi.html), it is not really possible at present without copying essentially all of the HTML (unless you only need the SVG canvas and not the editor--see demos/canvas.html for a canvas-only demo).

The latest versions of SVGEdit bundle more of the files together than previously, but there are still the following:

1. Though we've provided single-file bundles (in dist) of just the JavaScript which you could import or include on your own, the API doesn't currently allow generation of the expected HTML. So most of the static HTML elements within svg-editor.html/svg-editor-es.html are effectively dependencies.
2. A few extra external script dependencies indicated in the svg-editor.html/svg-editor-es.html editor files may be needed at present in addition to the bundles (see below on why they are made separate).
3. Extensions, locales, and third-party dependencies are intended to be modular and loadable as needed at run-time rather than build-time, so you'd always have to make the extensions or locale files you wanted available (though they are at least dynamically required rather than needed in static HTML).

You may be interested to follow #242 (particularly the 7th item in the list) for a hoped-for future improvement to #1 (but it would require a fair amount of work, and would come at a cost in increasing initial render time).

As far as the number of separate script tags in the svg-editor files, while we could reduce the number further, here are the reasons we don't for each file. (Some reasons are listed in source, but I've expanded a little here.)

• /dist/redirect-on-lacking-support.js - If we detect from this file that the user's browser doesn't support SVG, there is no need for them to load the other (larger) files. And if a site doesn't care about providing detection for such browsers, they can remove this file without their bundles being as large.
• jquery.min.js and jquery-ui/jquery-ui-1.8.17.custom.min.js - Though we could bundle these, some may prefer to use CDN versions which browsers may already have stored in cache, whereas our bundling it would only add weight for such cases (though admittedly since our versions are old as per jquery.contextMenu.js is version 1.01 - 4 years old (js-hotkeys, jspdf, canvg/rgbcolor/stackblur-canvas, mathjax also have new versions and/or need updating from ours) #51 and update jquery (and jqueryui) -- 1.7.1 is 4 years old #52 , fewer browsers are probably including these--but we do hope someone can safely update them!).
• /dist/dom-polyfill.js and external/@babel/polyfill/polyfill.min.js - These polyfill files could be bundled, but modern browsers shouldn't need them, and may become unnecessary in the future as users stop using older browsers.
• The main bundle file for the application is and will of course remain necessary. This is the file svgedit-config-iife.js (or svgedit-config-es.js for the ES modules version, xdomain-svgedit-config.js for the cross-domain-enabled version, or xdomain-svgedit-config-es.js for the ESM-based cross-domain-enabled version).

While we could make versions which also bundled the two jquery files and the polyfills, we're already providing more dist files than are probably of interest to most. So that's the rationale at least.

[jfhenon]

V7 does not use a frame anymore. You can just make a div in your html and initialize it. Look at index.html/index.js for an example.