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
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.
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
SVG images are images that are described by a path (i.e. a vector). An SVG file doesn't
contain a bitmap of the
image itself. Instead, it contains a set of descriptions that instruct the computer on how
to
draw the image. This means that the image is generated and displayed by the same computer.
So long as the computer has access to the SVG file, it can render the
image at the optimal resolution for its display, and it can re-render the image an
infinite number of times, adjusting the resolution where necessary.
The set of instructions that describe an SVG are a type of Extensible Markup Language (XML). Understanding the syntax and semantics of SVG markup will enable you to edit and manipulate SVG images or draw your own images using only code.
SVG = Scalable vector graphics.
Scalable – able to be increased or decreased in size while retaining optimal resolution.
Vector – a path, with a start point and an end point, which may contain curves and angles along the way.
Graphics – visual images; although SVG also supports: text, fonts, linking, animation, metadata and compositing.
Bitmap – a digital image comprised of a matrix of dots; when viewed at 100% each dot corresponds to an individual pixel on the display.
Raster – a matrix of cells organised into a grid; raster-based images is synonymous with bitmap images.
XML (Extensible Markup Language – a simple text-based format used to represent structured information; it is one of the most widely-used formats for sharing structured information today.
There are 6 basic shapes in SVG markup: line, polyline, rect, polygon, circle, and ellipse. Each of these elements is compiled into the Path element before being rendered for display. These tags provide a syntactic sugar that generally reduces the number of inputs required to draw a shape. In some cases, you may still prefer to use the Path tag, even where another tag could have drawn the same shape.
The line tag draws a single straight line.
The polyline tag draws a shape consisting of only straight lines.
A circle is a special case of the ellipse shape where the two radius attributes are equal i.e. rx = ry = r
cx x coordinate of the center of the circle.
cy y coordinate of the center of the circle
r Radius of the circle. (r only; not 'cr'
Bézier curves allow us to describe smooth curves using only a few control points – typically 3 or 4 points.
Coming soon.
Coming soon.
Coming soon.