NextContentsPDF

Draw SVG

Free online drawing application for designers and developers.

Joseph LIARD

release 8-0

2020 April

Abstract

This document introduced the use of "Draw SVG", free online drawing application for designers and developers drawsvg.org

In addition to this document, the showcases tool can gives more details and explanations with features interactive demonstrations.

This application uses the SVG drawing format, standard defined by the W3C.

Draw freely, save and print your documents.

Know the full potential of vector graphics with SVG.

You can perform a wide variety of designs, art as the icon of DRAW-SVG, mapping, technical, presentation slides, etc. ..

Some examples of well-known drawings and other from DRAW-SVG:

This documentation is also available in pdf format at the following address: draw-svg pdf doc.


Table of Contents

1. Quick Start
1.1. Introducing GUI DRAW-SVG
1.1.1. Main menu
1.1.2. Actions bar
1.1.3. Selection floating menu
1.1.4. Dialog panels
1.2. Create your document
1.3. Drawing a line
1.4. Editing a line
1.5. Drawing a rectangle
1.6. Editing a rectangle
1.7. Drawing a text
1.8. Editing a text
1.9. Using patterns
1.10. Using gradients
1.11. Using markers
2. Manage documents
2.1. Document menu
2.2. Create new document
2.3. Open a document
2.3.1. Loading a SVG file
2.3.2. Loading an image file
2.3.3. Loading an URL
2.3.4. Loading a svg from openclipart gallery
2.4. Save the document
2.5. Print the document
2.6. Export the document as PNG
2.7. Define document dimensions
2.8. Resize document
2.9. Grid definition
2.10. Import definitions
2.11. Gradient definitions
2.12. Pattern definitions
2.13. Filter definitions
2.14. Marker definitions
3. Editing selection
3.1. Selection menu
3.2. Select elements
3.3. Apply style
3.4. Select background rectangle
3.5. Select drawn elements
3.6. Order front
3.7. Order back
3.8. Align
3.9. Space equally
3.10. Marker definition
3.11. Pattern definition
3.12. Editors
3.13. Editor panels
3.13.1. Map editor dialog panel
3.13.2. Filter path svg panel
3.13.3. TextPath offset svg panel
3.13.4. Transform gradient svg panel
3.13.5. Transform pattern svg panel
3.13.6. Image file load panel
3.13.7. Image url load panel
3.13.8. Properties dialog panel
4. Drawing elements
4.1. Drawing menu
4.2. Drawing tasks
5. Drawing shapes
6. Style properties
6.1. Stroke style properties
6.2. Fill style properties
6.3. Text style properties
6.4. Marker style properties
6.5. Style panels
6.5.1. Color chooser svg panel
6.5.2. Gradient dialog panel
6.5.3. Marker dialog panel
6.5.4. Pattern dialog panel
6.5.5. Filter dialog panel
7. Options
8. Tools
8.1. Photo to drawing
8.2. Base64 Image Encoder
8.3. SVG to PNG Converter
8.4. Optimize SVG
9. Integration
9.1. Integration by URL
9.2. Integration by API
9.2.1. Introduction
9.2.2. Function setDocumentMenu
9.2.3. Function loadStringSVG
9.2.4. Function loadUrlSVG
9.2.5. Callback saveService
9.2.6. Function getSVG
9.2.7. Function getSVGObject
9.2.8. Function addLayer
9.2.9. Function setInputLayerId
9.2.10. Function setCustomShapeCatalog
10. Customization
10.1. Define a custom shape catalog
10.2. Customize Edrawsvg color theme
10.3. Customize DRAW SVG UI
10.3.1. Introduction
10.3.2. The MVP pattern
10.3.3. The SVG viewing area
10.3.4. The application
10.3.5. The DRAWSVG engine
10.3.6. The drwapp sample application
10.3.7. Website integration

List of Figures

1.1. Introduction GUI
1.2. Open a menu
1.3. Image floating menu
1.4. Image properties panel
1.5. Create document
1.6. document dimensions
1.7. Drawing a line
1.8. Styling a line
1.9. Drawing a rectangle
1.10. Styling a rectangle
1.11. Drawing a text
1.12. Styling a text
2.1. New SVG
2.2. Loading a SVG file
2.3. Loading an image file
2.4. Loading a SVG URL
2.5. Saving a SVG URL
2.6. Loading a SVG from OpenClipart gallery
2.7. Save dialog box
2.8. Saving a SVG URL
2.9. Saving with a jsChannel service
2.10. Print dialog box
2.11. Dimensions dialog box
2.12. Resize document
2.13. Import definitions panel
3.1. Map editor panel
3.2. Filter path svg panel
3.3. TextPath offset svg panel
3.4. Transform gradient svg panel
3.5. Transform pattern svg panel
3.6. Image file load panel
3.7. Image URL load panel
5.1. Shape full catalog
6.1. Gradient dialog panel
6.2. Gradient chooser
6.3. Markers tool
6.4. Marker chooser
6.5. Patterns tool
6.6. Pattern chooser
6.7. Filter tool
8.1. Photo to drawing tool
8.2. Base64 image Encoder
8.3. SVG to PNG Converter
8.4. Optimize SVG tool
9.1. Save dialog with save service button

List of Tables

1.1. Main menu map
1.2. Sub-menus features
1.3. Actions bar
2.1. Document menu
2.2. Export PNG
2.3. Grid definition
3.1. Selection menu
3.2. Editors
3.3. Properties tab element panel
3.4. Properties tab stroke style panel
3.5. Properties tab fill style panel
3.6. Properties tab marker style panel
3.7. Properties tab geometry panel
3.8. Properties CSS styles panel
4.1. Menu drawing elements
4.2. floating drawing task menu
4.3. Drawing tasks
6.1. Stroke style properties
6.2. Fill style properties
6.3. Text style properties
6.4. Marker style properties
6.5. Color chooser svg panel
6.6. Examples of filters
7.1. Options menu
10.1. DRAWSVG views and presenters