SVGtrace: A Free Cloud Computing Application to Trace SVG curved paths over a background sketch or image

SVGtrace⁺ Cloud Computing Application : Trace curved paths over a background image

This is an online free cloud computing application that can be freely used Trace background image and place SVG elements over it. The curved traced SVG path element contruction is arranged specifically for tracing underlying curved lines of the image. Function keys(Z,S,X) provide a seamless link between the cursor and keyboard. The traced SVG path can be paused(Z), straight line segments can be inserted(S), and points can be back-deleted(X).

Trace The Curved traced SVG path

The curved traced SVG path is started with three(3) points: the start point, this start-segment peak, and this start-segment end point. Thereafter, each segment has two(2) points: the curve-segment peak, and the segment end point. Each point includes a corresponding drag/drop circle. Each circle can be used to morph the traced SVG path. Straight segments can be inserted anywhere along the traced SVG path.

Trace Pause Key (Z)

The traced SVG path can be paused/restarted at anytime by toggeling the keyboard Z key. This allows the current drag/drop points to be used to adjust the traced SVG path before continuing.

Trace Straight Line Key (S)

The S key is selected when a stright line is desired within the traced SVG path. This starts a straight line from the last segment end point. The traced SVG path reverts back to curved segments, following the straight line segment end point selection. Each straight segment requires the S key to be selected.

Trace Back-Delete Key (X)

Each time the X key is toggled a previous traced SVG path segment is deleted. The traced SVG path will continue from the last visible point. After a deletion the traced SVG path defaults as curved segments. However, the S key can be toggled to provide a straight line.

Getting Started: Trace an Oval

Tracing an oval(ellipse) is a good excercise to become familiar with curve tracing techniques.
1. Select the 'refresh' button to clear all elements from the workspace. Then place a large oval in the center of the workspace.
2. Select the Curved traced SVG path and place 7 points, starting at 12 O'clock, clockwise. Select Pause(Z) after point 7, to allow drag/drop of the points. 3. Zoom-in and drag/drop the circles until the curvature is satisfactory.
4. Continue clockwise, placing points 8 thru 13. Point 13 is on top of point 1. Select Pause(Z) following point 13. 5. Zoom-in and drag/drop all points to get a satisfactory tracing of the oval.
6. Select 'end', then 'finish' to complete the oval trace traced SVG path. (Points can be drag/dropped prior to selecting 'finish')

Arranging Traced traced SVG path Elements

There are multiple traced SVG path elements created during the tracing process. The traced SVG element is a skeleton of the finished element with a stroke color chosen so it highly contrasts the underlying area, and with no fill color. Also, the traced SVG elements are created in a sequence that, typically, may not represent the final stacking of the completed image. To address this the following features are employed:
Protect/Unprotect - After each trace element skeleton is completed it is selected as protected. This fades it and places it beyond further changes as other elements are being created.
Top/Bottom - This used on each completed element to produce the final stacking arrangement.
Change - This is used for each element to lay in its final stroke/fill colors. Select each traced SVG path then place its desired colors and stroke-width.

Importing a Trace Background Image

A Trace image can imported from a URL or from your computer files.
1. Determine your workspace size. Generally, larger is better, with the same aspect ratio as the imported image, or finished image.
2. Insert the imported image x,y,width,height values. (Following its import the values can be changed and/or it can be selected to 'center' or fill the workspace.)
3. Either paste a URL or browse your computer for the image file location.
4. Select 'insert' to place the image into the workspace. Values can be changed at anytime. Reselect 'insert' to update the changes.

Airplane Tutorial

The Airplane Tutorial demonstrates how to trace an image with multiple curved paths. The various paths are completed then 'protected' to be assembled after all are completed. Because of the 'Move to Top' and 'Send to Bottom' features, they can be completed in any sequence then re-stacked as required. Also, the various fill/stroke colors can be placed on each traced SVG path by selecting 'change'.

1. To start the tutorial, go to full screen(F11), select the 'airplane sketch tutorial' checkbox. This will set the workspace at 500x500 and import the Airplane sketch to fill the workspace.
2. Select to draw a curved traced SVG path, and select a contrasting stroke color(14) setting, a stroke width of 8, and no fill color(0).
3. Draw the full wingspan, starting at center-left, point 1, clockwise. Place the last point on top of the first. Select 'end', and adjust the curve by drag/dropping the circles. Then select 'finish'. 4. Draw the fuselage, minus the the tail section, starting at the base if the tail, at point 1, clockwise until the traced SVG path ends at the far left bottom of the fuselage. Select 'end', and adjust the curve by drag/dropping the circles. Then select 'finish'. 5. Zoom-in to the tail section and draw a curve. 6. The next traced SVG path will be the red decoration along the fuselage. While zoomed into the tail section, select a straight traced SVG path, with a stroke width of 4 , no fill and a contrasting color(14). Then select: end,close. Adjust drag circle size slider to change the circle sizes. Adjust circles if required, then select 'finish'. 7. Continue the red section, by zooming out, select curve. and a stroke width of 3. zoom into the front area of this decoration After toggling Pause(Z), adjust the drag/drop circles of that portion. 8. zoom out and finish this curve... toggle a straight segement at the lower end, toggle another then select 'close; to connect the last point to the first. 9. The next traced SVG path is the fuselage white area. Build it in 2 sections, blue color 15, stroke 5. The first section is shown below. Start at point 1 and proceed clockwise 10. Start the 2nd section and pan to complete it. 11. Next complete the 2 wing white decoration areas. Move the fuselage. toggle between curve/straight.

12. Next complete the curves for the two engines.

13. Now choose the fill and stroke colors for each traced SVG path. Then use the Top/Bottom buttons to stack the traced SVG path elements to finish the layout. Create a circle, and make 6 copies. Move the circles to the window locations. This will complete the tutorial.

Changing Trace traced SVG path Points

After a Trace traced SVG path is finished, its points can be adjusted by selecting the above button then clicking on the traced SVG path to display its points drag/drop circles.

Saving Your Work

You may publish the partially completed or finished Trace image for access online and for editing. Also you can copy and past the source in an svg file. Please Note: for future editing capability, the file must be saved online. Before selecting 'publish', place either a user Id or an image name as the prefix to the auto-generated locator code.

Editing an SVGtrace⁺ File

An existing file can imported and changed. Firstly, however, it must have been saved/published online. Either paste the URL into the texarea or search on user ID or image name. Then select 'go'. This will place the file image into the Workspace for complete editing. It can be saved to overwrite the existing file, or it can saved as a new file.

Using Images on a Webpage

The svg image can used in a web page in any desired size by setting the style width and height values. e.g.:
<embed style="width:60;height:60" type="image/svg+xml"></embed>
<embed src="airplane.svg" style="width:100;height:100" type="image/svg+xml"></embed>

The Trace Context Menu

A context menu is displayed when the right mouse button is clicked when the cursor is over the SVG Workspace. Each element has its unique context menu. It is used when it is more convenient to right-click the mouse to display the element's selections, rather than making the selection in its selection area. (Primarily used when working in a large Workspace). The context menu for the curved path element is shown at right.

SVGtrace
Trace a Background Sketch, placing SVG Elements, including Smooth Curves

Placing curved paths that follow an underlying image is a seamless process. The curve can be paused at any point, allowing drag/drop of previous points. Also points can be sequentially back-deleted. Straight segments can be inserted at any place along the curve. Each of these features are interfaced to the keypad, cursor, and context menu.

This is a cloud computing application that can be freely used; Updated: 07/10/09

set Workspace width/height

300x300: 500x500: 800x600:
Custom Size: width:px height:px

set background color and border

border width & rounded corners:

import background image

x: y: width:px height:px
file path: paste URL or Browse local

edit existing SVGtrace image

:include Images

Download Add-on
Adobe SVG Viewer

This is my selection view