Web products   SVG  
SVG Zone
Downloads
Overview
Inspiration
Instruction
Tools
Community
Feedback
Developer track

SVG Draw demo

SVG Draw is a page markup demonstration program that is designed to serve as the basis of code for annotating another SVG graphics. For instance, an architect might e-mail a blueprint to which her client wants to suggest changes. Or a person may want to take a road map and highlight driving directions on it.

SVG Draw is not only written with SVG, but the generated image is also SVG. SVG Draw also shows how common user interaction techniques (pop up menus, tabbed panels) may be implemented with SVG.
When the program is initially opened, an introductory splash screen (generated from Adobe Illustrator) is displayed, using code in SVGDraw.svg. After a mouse click, this splash screen is unloaded, and the user may begin markup activities.
The JavaScript code that controls the markup system is the JavaScript code in main.js. draw.svg contains code for display of SVG in the drawing canvas, which is the upper portion of the demo. paletteDraw.svg includes code for changing drawing modes and also describes the tabbed panels, popup menus, and tool palette.
Generating SVG Graphics on the Canvas
The user draws on an initially empty canvas that is defined by the element drawBoard in the draw.svg file. When an element is created, a corresponding JavaScript function (drawRect(), drawLine(), etc.) is called. For elements other than text, a prototype element (found in paletteDraw.svg) is cloned, and its attributes are set, including coordinates, size, and styles. The names of each new element are changed to ensure uniqueness (in this demo, simply “rect_1”, “rect_2”, and so on).
As a user draws on the canvas, SVG Draw accumulates a list of actual SVG elements (paths, lines, rectangles, ellipses, and text) to describe what is drawn. So the result of even a simple doodle is readable, reusable SVG code. In the following example, after a small sketch is made with SVG Draw, a user can copy the SVG document into the clipboard by selecting "Copy SVG" from the browser menu:
After the copied data is pasted into a text editor, those SVG elements appear inside the drawBoard group element:
<g id="drawBoard" onmouseover="onSel(evt)"
onmouseout="offSel()" onclick="selector(evt)">
<g id="rect_1" style="fill:none;">
<rect x="160" y="363" height="65" width="78"
style="fill:#0000FF;stroke:#000099;stroke-width:6;opacity:none"/></g>
<g id="ellipse_1" style="fill:none;">
<ellipse cx="301.5" cy="394.5" rx="62.5" ry="29.5"
style="fill:none;stroke:#000099;stroke-width:6;opacity:none"/></g>
<g id="line_1" style="fill:none;">
<line x1="243" y1="395" x2="456" y2="395"
style="fill:none;stroke:#000000;stroke-width:2;opacity:none"/></g>
<g id="hilighter_1">
<path style="fill:none; stroke:#00FFFF;stroke-width:8;opacity:.50" d="M 343 423 L 340
416 339 411 338 404 338 399 340 392 341 387 345 381
350 375 355 372 360 374 365 378
370 382 374 387 379 393 385 399 392 405 397 408 403
410 407 405 408 400 409 394 410
388 412 382 414 376 419 371 425 370 433 371 439 373
444 375 449 379 454 382 459 386
464 389 472 394 477 396 482 398"/>
</g>
</g>
Creating text is only a little more complicated. First the user must use the text handler popup window to enter text strings and choose a font and size. To create SVG to represent the text, a group element is first created. For a single line of text, a single text element is all that is needed; for multiple lines, the text is broken into <tspan> elements.
Selecting an Object and The Document Object Model (DOM)
Because of the design of SVG, the same code and user interface may be reused for any drawing primitive. SVG Draw allows the user to select any object on the drawing canvas. To display a selected object, the selBox group element (in draw.svg) encapsulates the code to display a handle box that outlines the selected object and shows the icons to transform the object. The user may grab the double-arrow icon and rotate the object or grab one of the four handles (squares on the corners) to scale the object. The user may also grab the sides of the blue handle box and move (translate) the object. The plus-minus icons may be clicked to bring an element forward in the rendering order or to lower an element.
Since SVG adheres to the Document Object Model (DOM), SVG applications can take advantage of methods that support SVG hierarchical traversal, including parent/child and sibling relationships. Everytime an element is created, it is added as a last child of (appended to) the drawBoard canvas element. The sibling order also determines the drawing order. The elements on the drawBoard are drawn from first to last, with the latter objects drawn atop the earlier ones. Therefore, clicking the plus-minus icon technically changes the order of the elements in drawBoard.
Menus, Panels, and Tool Palette
Below the drawing canvas are the popup menus, tabbed panels, and tool palette, which are defined in paletteDraw.svg. The palette has two tabbed panels: Drawing Tools & Options (the default) and Symbols. In the default panel, the user can choose to select an existing SVG element or to draw a new primitive. The user can also choose style options for line width, color, and opacity or perform other operations from a series of popup menus. The icons and menus are all SVG elements themselves, and they invoke JavaScript functions to change the current attributes of the drawing canvas.
The menus and panels have been written with highly consistent coding standards to promote reuse of code. For example, the colorMenu SVG element defines a single color palette that is used for both the line color and fill color menus. The colorMenu SVG element could be further reused, if needed.
Moving the mouse point over any menu or panel selection makes the corresponding tooltip element (with the name Tip as a suffix) visible. For example, moving over the pencil element makes the pencilTip element visible, which highlights that menu selection.
The menu and panel state is updated regularly, after even minor user interaction. For example, if an existing primitive is selected on the canvas, the style attribute values that appear in the SVG elements on the panel (such as fillColor, strokeWidth, etc.) are set to reflect the selected primitive. A menu may be disabled temporarily by obscuring it with a translucent polygon (such as the elements lineCover, widthCover, and fillColor). For example, when a line element is selected or created, the fill color menus is covered and thereby disabled.
From the Options popup menu, the user may perform a variety of operations, including changing the string of a text element, deleting elements, or adding a background image to the scene. If a background image is desired, then a window is popped up with the following menu. If the user chooses a background, the image is placed in an <image> element named background.
Return to demo