svgedit

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JSDoc: Tutorial: Config Options</title> <script src="scripts/prettify/prettify.js"> </script> <script src="scripts/prettify/lang-css.js"> </script>  <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css"> <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css"> </head> <body> <div id="main"> <h1 class="page-title">Tutorial: Config Options</h1> <section> <header> <h2>Config Options</h2> </header> <article> <h1>Introduction</h1> <p>SVG-edit has several options that can be overridden either by adding URL parameters or by setting the options in JavaScript (since v2.5).</p> <p>Options may be divided into "config" (which is not meant to be customized via UI by the user) and "preferences" (which are meant to be customized by UI).</p> <p>See the API definition of <a href="module-SVGEditor.Config.html"><code>Config</code></a> for the allowable values, defaults, and uses of config.</p> <p>See the API definition of <a href="module-SVGEditor.Prefs.html"><code>Preferences</code></a> for their information.</p> <p>A few among these options related to paths are disallowed via URL though they can still be set by <code>svgEditor.setConfig()</code> (since v2.7).</p> <p>These are covered in the sections below.</p> <p>One may preload a file. See "Preloading a file" below.</p> <p>One may also configure stylesheets expected by the default HTML (<code>svgedit-custom.css</code> (v3.0+) or <code>custom.css</code> (v2.8))).</p> <p>One may also add stylesheets programmatically (since v3.0). See "Customizing stylesheets" below.</p> <h2>How to set the options</h2> <h3>Setting options programmatically</h3> <p>Options of either type can be set using <code>svgEditor.setConfig(options)</code>, where <code>options</code> is an object literal of keys and values. This must be run before the actual page or DOM is loaded, otherwise it will have no effect.</p> <p>Note that one may create a <code>svgedit-config-iife.js</code> file within the project root directory as of v3.0 (or for v2.8, within <code>editor/config.js</code>) and add such configuration directives to it without needing to modify the repository editor code</p> <pre class="prettyprint source lang-js"><code>svgEditor.setConfig({ dimensions: [ 320, 240 ], canvas_expansion: 5, initFill: { color: '0000FF' } }) </code></pre> <p>This will set the default width/height of the image, the size of the outside canvas, and the default "fill" color.</p> <h4>Overwrite configuration</h4> <p>For programmatic config setting, one may optionally pass (another) object to <code>.setConfig()</code> as the second argument to further adjust configuration behavior.</p> <p>If an <code>overwrite</code> boolean is set to <code>false</code> on this additional object, it will, as occurs with all URL type configurations, prevent the current configuration from overwriting any explicitly set previous configurations. The default is <code>true</code> except for URLs which always are <code>false</code>.</p> <p>If an <code>allowInitialUserOverride</code> boolean is set to <code>true</code>, this will allow subsequent configuration overwriting via URL (e.g., if you want the user to have the option to override certain of your (<code>svgedit-config-iife.js</code>) <code>.setConfig()</code> directives via URL while still providing them with your own default value, you should add this property).</p> <h3>Setting options via URL</h3> <p>The same options from the "Setting options programmatically" section can be set in the URL as follows:</p> <pre class="prettyprint source"><code>.../svg-editor.html?dimensions=300,240&canvas_expansion=5&initFill[color]=0000FF </code></pre> <h2>Priority of programmatically-set config vs. URL config</h2> <p>If options are set both using <code>.setConfig()</code> as well as in the URL, the <code>.setConfig()</code> value will be used (as of v2.7). (The reverse was true in previous versions but was changed for security reasons.)</p> <p>See section "Overwrite configuration" above on changing this behavior.</p> <h2>Note to developers of SVGEdit on preferences vs. configuration</h2> <p>Those items marked as preferences are intended to be configuration items which can also be set via the UI (and specifically via Editor Options except where mentioned). Config and preferences should therefore not share the same name.</p> <p>There are, however, some items set in the UI which are currently stored as config, whereas a few "preferences" are not meant to be set by the user. A future version may adjust these types.</p> <h2>Preloading a file</h2> <p>It is possible to start the editor with preloaded SVG file, using either of the following approahces.</p> <h3>Preload a file (Programmatically)</h3> <p>One should bear in mind that if one wishes to immediately set a particular string regardless of previous saves by the user, especially when from the config file (<code>svgedit-config-iife.js</code> in v3.0 or <code>editor/config.js</code> in v2.8) which runs early, one should first set the config option <code>noStorageOnLoad</code> to <code>true</code> or otherwise any previous local storage that is found will overwrite your own string. Bear in mind that if this option is set, the user will be prevented thereby from saving their own text locally.</p> <p>If you wish to store a one-time default and let the user subsequently save locally, you do not need to set <code>noStorageOnLoad</code> as storage will only be set if storage is found.</p> <pre class="prettyprint source lang-js"><code>// Serialized string: svgEditor.loadFromString('<svg xmlns="...">...</svg>') // Data URI: svgEditor.loadFromDataURI('data:image/svg+xml;base64,...') // Local URL: svgEditor.loadFromURL('images/logo.svg') </code></pre> <h3>Preload a file (by URL)</h3> <p>As a URL parameter, one can pre-load an SVG file in the following manner:</p> <pre class="prettyprint source lang-js"><code>// Data URI location.href += '?source=' + encodeURIComponent('data:image/svg+xml;utf8,' + svgText) // Data URI (base 64): location.href += '?source=' + encodeURIComponent('data:image/svg+xml;base64,' + svgTextAsBase64) // data%3Aimage%2Fsvg%2Bxml%3Bbase64%2C ... // Local URL: location.href += '?url=' + encodeURIComponent('images/logo.svg') // images%2Flogo.svg </code></pre> <p><strong>Note:</strong> There is currently a bug that prevents data URIs ending with equals (=) characters from being parsed. Removing these characters seem to allow the import to work as expected.</p>  <h2>Customizing stylesheets</h2> <p>As of version 3.0, stylesheets can be indicated dynamically (and asynchronously loaded though applied serially) via <code>svgEditor.setConfig({stylesheets: [...]})</code>.</p> <p>To add your own stylesheets along with the default stylesheets, ensure <code>"@default"</code> is present in the array along with your own. For example:</p> <pre class="prettyprint source lang-js"><code>svgEditor.setConfig({ stylesheets: [ '@default', 'myStylesheet.css' ] }) </code></pre> <p>(In version 2.8, the CSS file <code>editor/custom.css</code> was included by default, whether the file existed or not. With version 3.0, the move was made to be fully modular and let plugins add their default stylesheets to <code>$.loadingStylesheets</code> which SVGEdit would load dynamically, so that HTML would not need to indicate such style-information in a non-modular fashion.)</p> </article> </section> </div> <nav> <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="editor_extensions_ext-layer_view_locale_zh-CN.module_js.html">editor/extensions/ext-layer_view/locale/zh-CN.js</a></li><li><a href="module-SVGEditor.html">SVGEditor</a></li><li><a href="module-contextmenu.html">contextmenu</a></li><li><a href="module-jGraduate.html">jGraduate</a></li><li><a href="module-jPicker.html">jPicker</a></li><li><a href="module-locale.html">locale</a></li></ul><h3>Externals</h3><ul><li><a href="external-JamilihArray.html">JamilihArray</a></li><li><a href="external-Math.html">Math</a></li><li><a href="external-Window.html">Window</a></li><li><a href="external-jQuery.html">jQuery</a></li></ul><h3>Namespaces</h3><ul><li><a href="external-jQuery.fn.html">fn</a></li><li><a href="external-jQuery.fn.$.fn.jPicker.defaults.html">defaults</a></li><li><a href="external-jQuery.fn.exports.jPickerMethod.html">exports.jPickerMethod</a></li><li><a href="external-jQuery.fn.jGraduateDefaults.html">jGraduateDefaults</a></li><li><a href="external-jQuery.fn.jGraduateDefaults.images.html">images</a></li><li><a href="external-jQuery.fn.jGraduateDefaults.window.html">window</a></li><li><a href="external-jQuery.jGraduate.html">jGraduate</a></li><li><a href="external-jQuery.jPicker.html">jPicker</a></li><li><a href="external-jQuery.jPicker.ColorMethods.html">ColorMethods</a></li></ul><h3>Classes</h3><ul><li><a href="BottomPanel.html">BottomPanel</a></li><li><a href="Dropdown.html">Dropdown</a></li><li><a href="EditorStartup.html">EditorStartup</a></li><li><a href="ElixMenuButton.html">ElixMenuButton</a></li><li><a href="ElixNumberSpinBox.html">ElixNumberSpinBox</a></li><li><a href="ExplorerButton.html">ExplorerButton</a></li><li><a href="FlyingButton.html">FlyingButton</a></li><li><a href="LayersPanel.html">LayersPanel</a></li><li><a href="LeftPanel.html">LeftPanel</a></li><li><a href="MainMenu.html">MainMenu</a></li><li><a href="NumberSpinBox.html">NumberSpinBox</a></li><li><a href="PaintBox.html">PaintBox</a></li><li><a href="PlainNumberSpinBox.html">PlainNumberSpinBox</a></li><li><a href="Rulers.html">Rulers</a></li><li><a href="SEInput.html">SEInput</a></li><li><a href="SEPalette.html">SEPalette</a></li><li><a href="SESpinInput.html">SESpinInput</a></li><li><a href="SeCMenuDialog.html">SeCMenuDialog</a></li><li><a href="SeCMenuLayerDialog.html">SeCMenuLayerDialog</a></li><li><a href="SeColorPicker.html">SeColorPicker</a></li><li><a href="SeEditPrefsDialog.html">SeEditPrefsDialog</a></li><li><a href="SeExportDialog.html">SeExportDialog</a></li><li><a href="SeImgPropDialog.html">SeImgPropDialog</a></li><li><a href="SeList.html">SeList</a></li><li><a href="SeMenu.html">SeMenu</a></li><li><a href="SeMenuItem.html">SeMenuItem</a></li><li><a href="SePlainAlertDialog.html">SePlainAlertDialog</a></li><li><a href="SePlainBorderButton.html">SePlainBorderButton</a></li><li><a href="SePromptDialog.html">SePromptDialog</a></li><li><a href="SeStorageDialog.html">SeStorageDialog</a></li><li><a href="SeSvgSourceEditorDialog.html">SeSvgSourceEditorDialog</a></li><li><a href="SeText.html">SeText</a></li><li><a href="ToolButton.html">ToolButton</a></li><li><a href="TopPanel.html">TopPanel</a></li><li><a href="configObj.html">configObj</a></li><li><a href="external-jQuery.jGraduate.Paint.html">Paint</a></li><li><a href="external-jQuery.jPicker.Color.html">Color</a></li><li><a href="module.exports.html">exports</a></li><li><a href="module.exports_module.exports.html">exports</a></li><li><a href="module-SVGEditor-Editor.html">Editor</a></li><li><a href="module-jPicker.module.exports.html">module.exports</a></li></ul><h3>Interfaces</h3><ul><li><a href="module-SVGEditor.Config.html">Config</a></li><li><a href="module-SVGEditor.Prefs.html">Prefs</a></li><li><a href="module-SVGthis.CustomHandler.html">CustomHandler</a></li><li><a href="module-locale.LocaleEditorInit.html">LocaleEditorInit</a></li></ul><h3>Events</h3><ul><li><a href="module-SVGEditor.html#event:event:svgEditorReadyEvent">svgEditorReadyEvent</a></li></ul><h3>Tutorials</h3><ul><li><a href="tutorial-CanvasAPI.html">CanvasAPI</a></li><li><a href="tutorial-Editor.html">Editor</a></li><li><a href="tutorial-EditorAPI.html">EditorAPI</a></li><li><a href="tutorial-Events.html">Events</a></li><li><a href="tutorial-FrequentlyAskedQuestions.html">Frequently Asked Questions (FAQ)</a></li></ul><h3>Global</h3><ul><li><a href="global.html#attributeChangedCallback">attributeChangedCallback</a></li><li><a href="global.html#connectedCallback">connectedCallback</a></li><li><a href="global.html#constructor">constructor</a></li><li><a href="global.html#createTemplate">createTemplate</a></li><li><a href="global.html#decrement">decrement</a></li><li><a href="global.html#expireCookie">expireCookie</a></li><li><a href="global.html#formatValueFormatthenumericvalueasastring.Thisisusedafterincrementing/decrementingthevaluetoreformatthevalueasastring.">formatValue Format the numeric value as a string. This is used after incrementing/decrementing the value to reformat the value as a string.</a></li><li><a href="global.html#get">get</a></li><li><a href="global.html#handleClick">handleClick</a></li><li><a href="global.html#handleClose">handleClose</a></li><li><a href="global.html#handleInput">handleInput</a></li><li><a href="global.html#handleKeyDown">handleKeyDown</a></li><li><a href="global.html#handleMouseDown">handleMouseDown</a></li><li><a href="global.html#handleMouseUp">handleMouseUp</a></li><li><a href="global.html#handleOptionsChange">handleOptionsChange</a></li><li><a href="global.html#handleSelect">handleSelect</a></li><li><a href="global.html#handleShow">handleShow</a></li><li><a href="global.html#increment">increment</a></li><li><a href="global.html#init">init</a></li><li><a href="global.html#inputsize">inputsize</a></li><li><a href="global.html#isNullish">isNullish</a></li><li><a href="global.html#loadloadConfig">load load Config</a></li><li><a href="global.html#loadFromURLLoadconfig/datafromURLifgiven">loadFromURL Load config/data from URL if given</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#observedAttributes">observedAttributes</a></li><li><a href="global.html#parseValue">parseValue</a></li><li><a href="global.html#pref">pref</a></li><li><a href="global.html#readySignal">readySignal</a></li><li><a href="global.html#regexEscape">regexEscape</a></li><li><a href="global.html#removeStoragePrefCookie">removeStoragePrefCookie</a></li><li><a href="global.html#replaceStoragePrompt">replaceStoragePrompt</a></li><li><a href="global.html#set">set</a></li><li><a href="global.html#setupCurConfig">setupCurConfig</a></li><li><a href="global.html#setupCurPrefs">setupCurPrefs</a></li><li><a href="global.html#src">src</a></li><li><a href="global.html#stateEffects">stateEffects</a></li><li><a href="global.html#stepDown">stepDown</a></li><li><a href="global.html#stepUp">stepUp</a></li><li><a href="global.html#triggerInputChanged">triggerInputChanged</a></li><li><a href="global.html#updateLib">updateLib</a></li><li><a href="global.html#value">value</a></li></ul> </nav> <br class="clear"> <footer> Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.5</a> on Sun Dec 07 2025 19:46:40 GMT+0100 (Central European Standard Time) </footer> <script> prettyPrint(); </script> <script src="scripts/linenumber.js"> </script> </body> </html>