Draw SVG

Free online drawing application for designers and developers.

Joseph LIARD

release 5-0

2015 November

Abstract

This document describes the use of "Draw SVG", free online drawing application for designers and developers draw-svg.appspot.com

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. Base64 Image Encoder
8.2. SVG to PNG Converter
9. Integration
9.1. Integration by URL
9.2. Integration by API
9.2.1. Function setDocumentMenu
9.2.2. Function loadStringSVG
9.2.3. Function loadUrlSVG
9.2.4. Callback saveService
9.2.5. Function getSVG

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. Base64 image Encoder
8.2. SVG to PNG Converter
9.1. Save dialog with save service button

List of Tables

1.1. Main menu map
1.2. 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
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