Objective: Use these empty SVG Editors to practice anything you want.

Cut and paste basic shape code is available for quick starts.

The 400 X 400 window has an 10X10px and 100X100px SVG grids applied. You can delete this.

Apply SVG width statements if you need to control the editor widths.

26.1 Shape basics

<line x1="0" y1="0" x2="200" y2="200" class="l2 s-blue f-none" />

<rect x="100" y="100" width="200" height="200" class="l2 s-blue f-none" /> 

<circle cx="200" cy="200" r="100" class="l2 s-blue f-none" />

<ellipse cx="200" cy="200" rx="100" ry="50" class="l2 s-blue f-none" />

<polyline points=" 0,100 50,50 100,100 150,50 200,100" class="l2 s-blue f-none" />

<polygon points="200,100 350,300 50,300" class="l2 s-blue f-none" />

<text x="200" y="200" text-anchor="middle">Your text here</text>

<path d="M200,50 L350,160 50,160 200,50 " class="l2 s-blue f-none" />

26.2 Editor 1

26.3 Editor 2

26.4 Editor 3

26.5 Editor 4

26.6 Editor 5

26.7 Editor 6

26.8 Editor 7

26.9 Editor 8

26.10 Editor 9

26.11 Editor 10