Source Code

Drawing Tools

Tool
(t)
 

Colour
fill
(c)

add
colour:

Border
colour
(b)

add
colour:

Line
Width
(w)

Press Space or Double Click to finish polyline

OR

Press Z to return polyline to starting point



Drag mouse across to define ellipse width



Move mouse up & down

then click to define ellipse height

Welcome!

Draw on the page to create vector graphics.

Change colour, shape and line-width with the Drawing Tools window.


Inspect the SVG code for your drawing with the Code Viewer in the dock below.

To take your SVG with you, use the Export Drawing tool in the dock.


Did you know that an SVG image can scale to any size without losing sharpness?

Learn more about SVG with the SVG Tutorial tool.


You can move or minimise any window on the page.

For more tips, refer back to this note as you navigate the website.

Introduction

This document provides practical guidance to help you code your own graphics using SVG. Navigate to specific sections using the nav menu, or scroll through section by section to complete each module from beginning to end. A brief summary of each module is provided below.

Basics

Draw

Bézier Curves

Animation