Release your imagination and draw freely with DRAW SVG

DRAW SVG is a free online drawing editor with additional tools for generating, optimizing, converting your drawings and sharing them with a community.

  • Designed for all content publishers, info graphic designers and developers.
  • Edit your drawings with a powerful SVG editor.
  • Browse, publish, share and comment drawings with an original graphic social network.
  • Create memes with your favorite pictures and photos.
  • Turn your photos into Impressionist drawings with Photo to drawing Tool.
  • Discover the use of the editor with the interactive learning Showcases Tool.
  • Generate your own shape catalog to insert in your drawings.
  • Optimize the size of your SVG files before publishing them.
  • Convert your SVG drawings to PNG images for publication.
  • Encode your images (svg, png, jpeg) in base 64 for insertion into your HTML pages.
  • Pure HTML5 and CSS styles
  • Optimized for Chrome & FireFox, compatible with Edge, Safari and Opera.
  • Touch device compatible.
  • Integrate DRAW SVG editor in your website with developers integration API.
  • Customize the UI with your own application.
  • SVG editor available as desktop application on github.

news Latest news

Version 9-3on June 2021

Version 9-2on May 2021

Version 9-1on April 2021

Version 8-9on February 2021

Version 8-7on December 2020

Version 8-6on November 2020

See release notes

Introduction to DRAW SVG Tools

DRAW SVG tools are online tools totally free and easy to use, full documented and professional qualities.

  • Use the editor to create and edit your drawings.
  • Optimize their size with the optimizer tool.
  • Share and publish them with the board tool.
  • Generate kinds of aquarelle with the photo to svg generator tool.
  • Create easy simple memes with images.
  • Discover how to use editor features with the elearning tool with use cases animations.
  • Generate your personal shape catalog to import in the editor to customized it with your interest field.
  • Use additional web designer tools as the png format svg converter and the image encoder to enrich the contents of your html pages.

 DRAW-SVG editor is also available as desktop application, download it from github.

SVG editor

draw

Edit your drawings.

Draw

Drawing Board

share

Browse, publish, share and comment drawings.

Browse drawings

Meme maker

Create memes for your favorite photos.

Create memes

Photo to drawing generator

Turn your photos into artistic drawings.

Have fun

Showcases

Learn to use the editor.

Learn how to

SVG optimizer

Optimize your SVG files.

Optimize

SVG to PNG converter

Convert your SVG files in PNG images.

Convert

Encode Image

Encode images in base64 for HTML inline insert.

Encode

Custom shape catalog

Generate a drawsvg custom shape catalog.

Generate

DRAW SVG editor key features

Extract from sitepoint.com :

Maybe you’ve already found your free Web-based SVG editor among the apps so far but if you haven’t, here is more. DrawSVG is a fully standard compliant SVG editor with a lot of features. What I really like about it that it has the look and feel of a Web app – i.e. menu on the left, click to open submenu, etc. – rather than the look and feel of a desktop app ported for the Web.
With DrawSVG you can draw, modify, and render objects. This includes drawing basic shapes, Bezier curves, straight and curved text, numerous stroke and fill styles, etc. You can also export your SVG to PNG.

Below are main features ordered by usual themes.

User documentation is also available.

Draw objects

  • Basic elements (path, rectangle, circle, ellipse, line, polyline, polygon)
  • Bezier curves (cubic, quadratic, arcs, smoothed)
  • Drawing geometry with point capture to connect objects
  • Shapes, Emoji and Font Awesome icons
  • Straight and curved text, single and multi-lines, with full feature editor
  • Images and Google Maps
  • Ready-made shapes (a lot of icons, arrows, flowcharts..)
  • Media controls (YouTube, video, audio, rich text)
  • Multi-language text
  • Document composition with svg included

Modify objects

  • Click an object, select the closest point clicked or all those inside in rectangle
  • Select easy with target and points highlighting
  • Moving the control points of the geometry of an object
  • Transform objects
  • Full interactive editing text with the mouse
  • Apply constraints to objects
  • Manage layers, change the order of objects, align edges
  • Browse map location
  • Download and encode PNG into image objects
  • Import svg files into included svg objects

Rendering objects

  • Copying the style of an object on another
  • WYSIWYG editing style properties
  • CSS styles management
  • Color chooser (RGB, HSV, palette)
  • Stroke style (color, scaling, width, dash, opacity, gradient, pattern, cap, join)
  • Fill style (color, opacity, gradient. pattern, rule)
  • Text style (family, size, font-style,weight, anchor, decoration)
  • Marker style (start, mid, end)
  • Customize gradients, filters, patterns and markers

Manage your drawing files

  • Save and load SVG files on your computer
  • Load images as SVG files
  • Load documents from the openclipart gallery (currently off)
  • Optimize SVG file size.
  • Conversion into PNG images
  • Publish on Board tool

Interactive editing tools

Integration in a web application

  • Use DRAW-SVG as an integrated drawing tool within your web site
  • Edit and save your svg documents
  • Integration by API based on mozilla jsSchannel
  • Customize UI with your own application using HTML, CSS and javascript
  • See jsChannel demo,  custom app,  and dev guide

DRAW SVG tutorials with interactive showcase tool

Learning the use of drawsvg is very fast and easy

In addition to the online documentation, the DRAWSVG editor has an interactive tool to learn how to use it with animated tutorials that demonstrate use cases called "showcase".

  • Showcase can be replayed step by step or full continual.
  • Reproduces user actions directly on the DRAWSVG GUI.
  • Indexed by keywords to easy find and select a use case.

Showcases are grouped into 11 themes that can be played continuously for an overview of the features :

Quick start drawing  Draw elements  Manage documents  Select elements  Style elements  Edit elements  Edit geometries  Edit points  Apply constraints  Insert media  Using layers

To explore all the editing tasks available on selected objects, see the editors page with showcase links on each task.

Publishing and sharing drawings with board tool

An original graphic social network

Is a social network that manages signed topics composed of a drawing and a description classified by keyword and emojis.
Topics can be commented and followed by answers to build threads.

  • Search latest topics by tags, keywords and emojis.
  • Browse selection.
  • Upload topics drawing.
  • Sign In with a google account to add, comment or reply topics.
  • To add a topic, select the topic's drawing creation mode from 4 different (from an image file, from a svg file, new meme, start new svg), then set the description and its classification by tags and emojis.
  • Reply to a topic by completing its drawing with the editor of DRAWSVG or by a new drawing.
  • Edit your topics, drawings and descriptions.

Meme generator tool

Creating a meme is very easy

A "meme" is an image with an added message on it.

  • Choose an image or a photo.
  • Define the meme size.
  • The meme can have up to three captions (top, center,bottom).
  • Select a caption, enter its text.
  • Adjust the text style.
  • Background style and advanced properties (stroke color and filter).
  • Then save the meme in SVG or PNG format.
  • Finaly you can edit the drawing with the editor of DRAWSVG.

Drawing generator from a photo

Generate kinds of aquarelle with the photo to svg generator tool is very easy.

  • It is achieved by reducing the dimensions of the photo and its number of colors.
  • Then by extraction of the contours of the colors with filtering and smoothing of the vertices.

Introduction to developer Tools

DRAW SVG developer tools are free software released under the GNU LGPL.
With these tools you can integrate drawsvg editor inside your web site.

  • Request an API Key to activate your DRAW SVG integration.
  • Then download Edrawsvg distribution.

JsChannel integration API

Insert DRAW SVG editor in your website with the JsChannel API.

Hosting Edrawsvg

Edrawsvg is a distribution of DRAW SVG editor, intended to developpers to be embedded into their websites.

Custom Application

Develop your own DRAW SVG editor custom app with HTML, CSS and javascript.

Contact

About the company

DrawSVG.org is a french company (SIREN 893 836 361) owned by Joseph LIARD

  • SVG and Web development technologies expert
  • Provides services to customers (DrawSVG software licence contract with support, customization and training).
Contact Join the DRAW SVG User Forum

Partners and associated tools

Stephen McLaughlin and Bart Butenaers, contributors to NODE-RED  (the flow-based development tool for visual programming).

Dave Gardiner

  • Provides professional editing, writing and illustration services.
  • Has contributed to DRAW SVG especially to the development of multi-language document functionality.

James Ingram

  • James Ingram's web application converts slur templates in SVG files to proper, pointed slurs.
  • Download SlurTemplateConverter or open online tool