SVG-edit - JavaScript-driven SVG drawing editor

Mar 26, 2014 in Drawing & SVG 6991 views

Download

Overview
Documents

User Rating: 5/5 ( 2 votes)

Your Rating:

Features

SVG-edit is an online vector graphics editor that uses only JavaScript, HTML5, CSS and SVG (i.e. no server-side functionality). SVG-edit has the following features:

Free-hand drawing
Lines, Polylines
Rects/Squares
Ellipses/Circles
Polygons/Curved Paths
Stylable Text
Raster Images
Select/move/resize/rotate
Undo/Redo
Color/Gradient picker
Group/ungroup
Align
Zoom
Layers

Convert Shapes to Path
Wireframe Mode
Save drawing to SVG
Linear Gradient Picking
View and Edit SVG Source
UI Localization
Resizable Canvas
Change Background
Draggable Dialogs
Resizable UI (SVG icons)
Open Local Files
Import SVG into Drawing
Connector lines and Arrows

Plugin Architecture
Smoother freehand paths
Editing outside the canvas
Increased support for SVG elements
Add/edit Sub-paths
Multiple path segment selection
Support for foreign markup (MathML)
Radial Gradients
Configurable Options
Eye-dropper tool
Stroke linejoin and linecap
Export to PNG

Introduction

As of version 2.5, SVG-edit has several configuration settings that can be overridden either by adding URL parameters or by setting the options in JavaScript.

How to set the options

Options can be set using svgEditor.setConfig(options), where "options" is an object literal of keys and values. This must be run before the actual page or DOM is loaded, else it will have no effect.

Example:

svgEditor.setConfig({
        dimensions: [320, 240],
        canvas_expansion: 5,
        initFill: {
                color: '0000FF'
        }
});

This will set the default width/height of the image, the size of the outside canvas, and the default "fill" color.

The same options can be set in the URL like this:

.../svg-editor.html?dimensions=300,240&canvas_expansion=5&initFill[color]=0000FF

If options are set both using .setConfig() as well as in the URL, the URL value will be used.

Configurable options

Property	Description	Default
lang	Two-letter language code. The language must exist in the Editor Preferences language list	en
bkgd_url	Background raster image URL. This image will fill the background of the document, useful for tracing purposes	(none)
img_save	Defines whether included raster images should be saved as Data URIs when possible, or as URL references. Must be either 'embed' or 'ref'	embed
dimensions	The default width/height of a new document. Use an array in setConfig (i.e. [800, 600]) and comma separated numbers in the URL	[640, 480]
initFill[color]	The initial fill color. Must be a hex code string.	FF0000
initFill[opacity]	The initial fill opacity. Must be a number between 0 and 1	1
initStroke[color]	The initial stroke color. Must be a hex code.	000000
initStroke[width]	The initial stroke width. Must be a positive number.	5
initStroke[opacity]	The initial stroke opacity. Must be a number between 0 and 1	1
initTool	The initially selected tool. Must be either the ID of the button for the tool, or the ID without "tool" prefix	select
imgPath	The path where the SVG icons are located, with trailing slash	images/
langPath	The path where the language files are located, with trailing slash	locale/
extPath	The path used for extension files, with trailing slash	extensions/
extensions	Extensions to load on startup. Use an array in setConfig and comma separated file names in the URL. Note that this list entirely overrides the default list, so the default extensions will not be included if not in the list.	['ext-arrows.js','ext-connector.js']
showlayers	Open the layers side-panel by default	false
wireframe	Start in wireframe mode	false
gridSnapping	Enable snap to grid by default	false
snappingStep	Set the default grid snapping value	10
no_save_warning	A boolean that when true prevents the warning dialog box from appearing when closing/reloading the page. Mostly useful for testing.	false
canvas_expansion	The minimum area visible outside the canvas, as a multiple of the image dimensions. The larger the number, the more one can scroll outside the canvas.	3
show_outside_canvas	A boolean that defines whether or not elements outside the canvas should be visible	true
iconsize	Size of the toolbar icons. Must be one of the following: 's', 'm', 'l', 'xl'	m
bkgd_color	Canvas background color	#FFF (white)
showRulers	Initial state of ruler display (v2.6)	true
selectNew	Initial state of option to automatically select objects after they are created (v2.6)	true

Preload a file

It is also possible to start the editor with preloaded SVG file, using the following methods:

// Serialized string:
svgEditor.loadFromString('<svg>...</svg>');

// Data URI: 
svgEditor.loadFromDataURI("data:image/svg+xml;base64,...");

// Local URL:
svgEditor.loadFromURL("images/logo.svg");

Or as URL parameter:

// Data URI: 
?source=data:image/svg+xml;base64,...

// Local URL:
?url=images/logo.svg

Note: 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.

JS Tutorial