Scalable Vector Graphics Symbols For Internet Explorer
Create both basic SVG drawings and build SVG symbols. The SVG source can be copied/pasted into your svg file. Also, the source can be published online, at your computer, and is designed to
be portable to other applications.
This is a cloud computing application that can be freely used.
NOTE: At this time, the Source Copy feature is specifically arranged for use for SVG in the IE9 Platform Preview. The copy format can be selected as: Svg document, Svg inline, and Svg xhtml.
Symbol Libraries can be created and edited for use in this application and deployment to others.
SVGdiscovery also includes features for importing a background
image/sketch guide, and tracing SVG smooth paths over the imported image. These curved paths can
be seamlessly paused, edited, and restarted during the tracing process.
The SVG drawing can be saved online for editing and also freely accessed by other applications as an .HTM and/or .SVG file.
Both the SVG and XML source are provided. A source editor is included to reformat the source, including namespace retrofit, for porting to other applications.
This is an online application whereby new features, upgrades, and fixes are immediately included for all users.
~ Screen Shots ~
Creating Basic SVG Elements
Each element includes its individual settings panel for fill and stroke color selection. A slider displays
and selects an element's stroke-width. Lines - includes end arrows, right-angle lines, and dimension lines. Rectangles - with rounded corners, and squares. Circles - circles can be created. Ellipses - ellipses can be created. Text - text can be typed into workspace. Icons - select from over 200 icons. Polygons,etc - build polygons, stars, and spider monkeys. Images - insert images from your computer files.
Building SVG Paths
Paths can be straight, smooth, traced, hand engraved, and spirals. Also paths can be used for clipping and as a textPath. Straight Paths - point/click for each point along a path. Smooth Paths - select a path or arc from a template. Morph its points. Trace Paths - point/click to place tracing points. Engraved Paths - hold cursor down for a freehand path. Clip Paths - use paths to clip other elements. Text Paths - place text along a path. Spirals - build spirals from a template. Path Points - existing paths points can be edited.
Editing Elements
Move - click to attach an element to the cursor for moving. Delete - click on element to delete it. Copy - make multible copies of each element. Rotate - drag/drop a rotation circle about its center. Protect - elements hidden from editing and hilite. Stacking - place elements above/below others. Settings - change settings for each element. Text Edit - change text characters and settings. Set Opacity - elements can be semi-transparent. Gradient Fill - add gradient fill for elements. Gradient Mask - blend elements with others. Source Copy/Edit - Copy, preview, and change source.
Create and Edit Symbols
A symbol is made up of one or more elements. Select existing elements to place in a symbol.
Each symbol can be copied and individually sized, via the slider.
After a symbol is built, its elements can be edited. When a symbol is edited,
all copies of that symbol will reflect the changes. Any symbol can be saved in the Symbol Library. Create Symbol - one or more elements can be included in a symbol Size Symbol - elements and symbols can be resized Edit Symbol - elements can be added/removed/edited within a symbol Save Symbol - edited symbols saved in workspace and/or symbol library Symbol Library - symbols can be stored in libraries.
Edit Default Color, Tables, Graphs, Saving Your Work
Edit Default Color - Path drag/drop points and editing highlight color can be selected.
Point Size Slider - Drag circle/ellipse sizes do automatically scale as the user zooms in/out.
However, during editing of paths, the points' drag circles/ellipses size can be changed by the slider.
Stroke Width Slider - The stroke width of paths can be temporarily overridden during the creation and
editing process. When the new path or its editing are finished, it reverts to its set value.
Tables - format colors, rows/columns, and fonts. Graphs - create grid and coordinate system. Save - save your work to local files and upload to the server.
Set Workspace, Edit Existing Files, and Import Background Image
Background Grid - Include a grid size. Toggle the grid button to turn the grid on/off. The grid color can be selected as either 'dark' or 'light' via the radio buttons.
Workspace Size - Choose from preset sizes or provide a custom size.
Select the units of length - The selected abbreviation will be displayed at element sizes.
Set scale - Provide a ratio scale of pixels to the selected units of length. The default is 1:1.
Dimension units - check this box if the units of length are to be displayed within dimension lines.
Decimal Places - Provide the number of decimal places for element values.
Background and Border Colors - Select the desired colors or include a custom color.
Border Width - Adjust the slider until the desired width is shown.
Rounded Corners - Adjust the slider if rounded corners are desired for the border.
View Files - Display all of your image files at the server. Each can be selected for editing in the workspace.
Past Source - Insert an element source in the current workspace.
Recover Last Session - Places the last editing session into the workspace.
Image Placement - Set the x/y values of the background image's left corner.
Image Size - Set the width/height values of the imported background image.
Browse.. - Choose an image file from your computer to place as the background Image.
Select 'insert' to place the image into the workspace.
Background Image Adjustments
After inserting a background image in the workspace, an adjustment pane, titled 'adjust background image', is made available.
Various slide bars are included to adjust the image x, y, width(w), height(h), aspect size(%), and rotation(a).
Also, the image can be moved.
Fade Image In/Out
The bottom slide bar is used to fade the background image in and out of view.
Also it places the image either below or above the workspace.
When the slider is centered, the image is below the workspace. Moving the
slider to the right, increases its transparency. When the slider is
moved left of center, the background image is placed above the workspace. Adjusting
the slider leftward, then increases the transparency of the image when it is above
the workspace.
- - - - - - CREATING NEW ELEMENTS - - - - - -
¥
Color Management
There are over 350 rich colors for use in this application. Therefore a means to easily access, preview, and change color selections has been provided. Each color is named and includes a reference number.
The pop-up at left displays the current settings for all elements.
Clicking on this pop-up will display the
Preview & Color Management Panel
This panel previews and changes the Workspace color and all elements' current fill and stroke colors selections.
Each element color can be
individually selected for previewing purposes. These color preview selections can then
be sent to update the current color selections for the Workspace and the elements.
Element Colors
When a new element is being created, its color selections can
be called, previewed, and changed. Select either fill or stroke radio, then move the cursor over the
colors to preview them in the element's image at right.
Stroke Width Setting : All Elements
When the stroke width button is selected, the stroke width slider will appear. As the slider is adjusted, the value is displayed and a line, located at the top of the workspace, reflects the setting at the specific zoom scale.
Lines
New line selections are: stroke color, stroke width, dashed, end arrow, start/end arrow, right-angle, dimension line, and offset.
Selecting delete[D] will remove the last created line from the workspace.
Click the workspace at the start point of the line. Hold the left-mouse button down and end point of the line will follow the cursor.
Release the mouse button and the line will be completed.
Selecting dimension lines will create lines that include the line's dimensions centered on the line.
The dimension value can be modified via a factor. Also the number of decimal places displayed can be selected.
Selecting the X button will delete all dimension lines within the workspace.
| |Offset/Join - Lines can be offset a selected distance. Join two lines to intersect at the same point.
To offset a copy(ies) of a line, place the cursor at the center of the line to be offset. Hold the left-mouse button down and move the cursor in the direction of the offset.
More than one offset line is created as the cursor moves beyond the set distance value. Release the mouse button when offset completed.
trim: Trim and Extend Lines - Select the checkbox, then draw the line used to trim and/or extend existing lines. Then click the individual lines for trim or extend. Select 'keep trim line' if the line is to be retained. Select 'finish' after the lines have been trimmed or extended.
Rectangles
New rectangle selections are: fill color, stroke color, stroke width, dashed, and rounded corners. Selecting the 'square' checkbox creates a square rather than a rectangle..
Selecting delete[D] will remove the last created rectangle from the workspace. Selecting the 'set' checkbox
will allow the rectangle's width and height to be preset.
Click the workspace to place a corner of the rectangle. Hold the left-mouse button down and a rectangle will follow the cursor.
Release the mouse button and the rectangle will be completed.
Circles
New circle selections are: fill color, stroke color, stroke width, and dashed.
Selecting delete[D] will remove the last created circle from the workspace. Selecting the 'set' checkbox
will allow the circles's radius to be preset.
Click the workspace to place the center of the circle. Hold the left-mouse button down and a circle will follow the cursor.
Release the mouse button and the circle will be completed.
Ovals
New oval selections are: fill color, stroke color, stroke width, and dashed.
Selecting delete[D] will remove the last created oval from the workspace. Selecting the 'set' checkbox
will allow the oval's x,y radii values to be preset.
Click the workspace to place the center of the oval. Hold the left-mouse button down and an oval will follow the cursor.
Release the mouse button and the oval will be completed.
Text
New text selections are: fill color, font size, font family, italic, and bold.
Selecting 'cancel' will stop and clear the currrent text. Selecting 'delete last' will remove the last completed text element.
Click the workspace to start the text. A blinking cursor will appear at that point. Type the desired characters.
To start a new text element, click at the point where it will begin.
Font Size Selection Slider
When the font size button is selected a slider will
appear, and an 'A' will display at the workspace center at the current zoom level. As the
slider is adjusted, the 'A' will respond to the size selected, providing a preview of
the sizes at the current zoom level. The font size will be set when the slider cursor is released.
Icons
New icon selections are: fill color, icon size, and icon name.
Selecting 'preview icons', will display images and a list of all icons for selection.
Selecting delete[D] will remove the last completed icon element. Click the workspace to place the selected icon.
Icon Size
When the icon size button is selected a slider will
appear, and a heart icon will display at the workspace center at the current zoom level. As the
slider is adjusted, the heart icon will respond to the size selected, providing a preview of
the sizes at the current zoom level. The icon size will be set when the slider cursor is released.
Polygons,etc.
New polygon selections are: fill color, stroke color, stroke width, and dashed. Select either stars, polygons, or spider monkeys. Select the number of star points or polygon sides.
Selecting delete[D] will remove the last completed polygon,etc. element.
Place the cursor at the center point of the element to be created. Depress the left-mouse button and move the cursor until the element is the desired size. Release the left-mouse button to finish the element.
Images
Select Browse.. to find the image file on your computer. Select a file place the cursor where the upper-left corner of the image is to start. Hold down the
left-mouse button and move the cursor to set the desired image size. The image will track the cursor.
Release the left-mouse button to set the image. The image size can be preset by checking the 'set' checkbox and inserting the desired width and height values.
Straight Paths
New straight path selections are: fill color, stroke color, stroke width, dashed stroke, end arrow, and right angle.
Click the workspace to place the first point. A 'rubber' line will track the cursor. Click at each successive point location. A 'drag circle' is placed at each point.
To modify the point locations, select 'pause[Z]' then drag/drop the circle to its desired location. Toggle 'pause[Z]' to restart the path.
Points can be back-deleted by toggling the 'undo[X]' command for each point to be removed. Select 'close[S]' if you want to connect the last point to the first.
When the path is as desired, select 'finish[F]'. Prior to finishing the path, select 'cancel[C]' to clear the points and begin a new path.
Smooth Paths
New smooth path selections are: fill color, stroke color, stroke width, dashed stroke, end arrow.
A template selection will be displayed. Choosing a template will place that path at the center of the
workspace. Each path point includes a drag/drop circle used to morph the path. Check 'close' if you want to connect the last point to the first.
When the path is as desired, select 'finish[F]'. Prior to finishing the path, select 'cancel[C]' to clear the points and begin a new path.
An arc path selection is also included. Selecting an arc will place an arc at the center of the
workspace. Each arc point includes a drag/drop circle used to morph the arc.
An Arc Path selection will also display an arc settings panel.
The arc angle, arc segment, and arc sweep are selectable.
Check 'close' if you want to connect the last point to the first.
When the arc is as desired, select 'finish[F]'. Prior to finishing the arc, select 'cancel[C]' to clear the points and begin a new path.
Trace Paths
New trace path selections are: fill color, stroke color, stroke width, dashed stroke, and end arrow.
Click the workspace to place the first point. A 'drag circle' will appear at that point. A 'rubber' line will track the cursor. Click at each successive point location. A set of 'drag ovals' is placed at each point.
To modify the point locations, select 'pause[Z]' then drag/drop the circle/ovals to their desired location. Toggle 'pause[Z]' to restart the path.
Points can be back-deleted by toggling the 'undo[X]' command for each point to be removed. Select 'close[S]' if you want to connect the last point to the first.
When the path is as desired, select 'finish[F]'. Prior to finishing the path, select 'cancel[C]' to clear the points and begin a new path.
Engrave Paths
New freehand engrave path selections are: definition=ultra|fine|medium|course, buffering=(B)|[B], fill color, stroke color, stroke width, and dashed stroke.
Place the cursor at the start point, hold down the left-mouse button and move the cursor. The path will follow the cursor to create the path. When the left-mouse button is released, a end-point circle will be placed.
Points can be deleted from the path by adjusting the path-point slider.
The path can be continued by placing the cursor at the center of the end-point circle. Hold down the left-mouse button to continue.
The path is then selected as: close[S] and/or finish[F].
Definition Settings:
Engraved Path - close up
Engraving can produce a path with a very high number of points. Therefore, select an acceptable definition: ultra-fine-medium-course.
The 'ultra' selection creates about 3X the number of points of the 'course' selection.
Engraved Path Buffering - As the path is being created, the points are placed in a buffer to prevent unwanted 'squiggles'. Toggle the 'B' key to seamlessly change between rounded and straight engraved segments.
The active buffer mode will be displayed in the selection panel as either (B)-rounded or [B]-straight.
Engraved Path Delete Point Slider -
Points can be back-deleted from the engraved path by adjusting the slider. Adjust the slider following
the placement of the end-point circle. After point deletion, a new end-point circle will appear at the end.
The path can be continued by placing the cursor at the center of the end-point circle. Hold down the left-mouse button to continue.
Clip Paths
First, click the path to be used for clipping.
As each element to be clipped is clicked, it becomes clipped by the selected clipping path. It an element is inadvertently clipped, select 'undo' to remove its clip. Check 'hide path' if the path used for clipping is
to be hidden when the clipping is finished. After all elements have been clipped, select 'finish'.
Text Paths
If the path used for the text is to be hidden, check 'hide path'. Click the path to be used for the text path.
This will display the text element selections, and place a blinking cursor at the center of the path.
Type the characters. The text will follow the path contour. When completed, select 'finish'.
Spirals
The spiral selections are: fill color, stroke color, stroke width, and dashed stroke.
A default spiral is placed at the center of the workspace and the Customize Spiral pane is displayed.
Customizing The Spiral
The following slider adjustments are available:
1) Points - The number of points along the spiral. Controls path 'smoothness'
2) Separation - The distance between each spiral revolution loop.
3) Revolutions - The number of spiral loops.
The above adjustments display immediately at the spiral, showing the size of the spiral.
Note: The spiral location can be moved at any time during the customization.
- - - - - - EDITING ELEMENTS - - - - - -
Path Points
Click on a path to display its points for editing. Each point is a drag/drop circle that is used to morph the path. Select the 'close' checkbox to add/remove closing the path(connecting the last point to the first). When completed, select 'save'.
Move
Moving an Element - Adjusting placement of elements is the most-used of editing selections.
Therefore this editing selection has been streamlined to make it efficient. Moving an element is
not a drag/drop process. Rather, on selecting an element for move, it bonds the element to the cursor.
Merely move the cursor and click at the element's desired location.
Delete
Click on an element to remove it from the workspace. Select 'undo delete' to step back to replace the deleted element(s).
Copy
Click on an element to copy It. A 'gray' copy will appear, offset over the original element. Each successive click on the last copy will create another copy.
When the copy is moved to its desired position, it will revert to its original color.
Creating copies along a line
Note: The 'rubber line' uses the current line selection settings, including right angle lines.
Copies can be offset a selected distance along a 'rubber line'. Place the cursor over the element for offset copies. When the left-mouse button is held down, a 'rubber line' will appear starting at the center of the element to be copied. Move the
cursor in the direction of the copies. As the cursor moves beyond the set distance, additional copies will be displayed.
When the copies are completed, release the left-mouse button.
Placing copies along a path
Copies of an element can be placed along a path. Select the 'path' checkbox then click on the element to be copied along the path.
The element will be highlighted in a box. Then click on an existing path where the element will be copied.
Initially, three(3) copies are placed on the path: One at the beginning, one at center, and one at end of the path. The center copy includes a drag circle and a 'rubber line' attached to the start of the path. Drag/drop
the circle toward to beginning of the path to increase the number of copies. The offset distance between copies will be displayed:.
(The offset distance shown is the length of the rubber line.)
When the number of copies are satisfactory, re-click the highlighted element to finish.
Rotate
Click on an element to rotate It. A rotation point is placed at the element's center. A dashed 'rubber' line is attached to a drag/drop circle.
Place the cursor over the drag/drop circle, holding the left-mouse button down. Adjust the circle and the element will rotate. Release the mouse button
when the element is at the desired position.
Protect
Elements are protected from changes and their highlighting is negated. Click on an element to protect/unprotect it, as chosen at the radio button.
View All Protected - Hold the left-mouse button down at this button to hilite all protected elements.
Protect All - Click button to protect all elements currently in the workspace.
Unprotect All - Click button to unprotect all elements currently in the workspace.
If the 'hide protected' is checked, all protected elements remain hidden. delete Unprotected - CAUTION: this will delete all unprotected elements from the workspace.
Stack
If 'top' or 'bottom' are selected, click on the element to place it. If 'below' is selected, first click the element to place, then click its target element, to place it below the target.
Settings
Settings for elements can be changed. Also the sizes of lines, rectangles, circles, and ovals can be changed. When the cursor moves over an element, its specific settings are shown in its selections pane. Clicking on the element will set that element's pane for changes. The changed values can then be placed on the originally selected element and/or other elements of that type.
Below is an example using a rectangle.
The cursor moves over a rectangle. It displays the rectangle settings pane with that rectangle's settings in place.
The rectangle is clicked. It locks that specific rectangle settings pane with that rectangle's settings in place.
The settings for fill color, dashed stroke, and rounded corners have been changed, and the rectangle was clicked. Other rectangles can also be clicked to receive the new settings. Use 'oops' to return the element to its previous settings.
Select 'return' to continue to change settings for other element types.
Changing Size : The 'size' radio was checked for rectangles. Then the rectangle was clicked. A drag/drop circle appears at its corner. It can be moved to change the individual size of this, or other rectangles.
Edit Text
Both settings and characters can be changed on a text element via the text-edit pane.
Opacity
Choose the desired opacity setting, then click on the element(s) to place its value.
Gradients
Radial Gradient Fill
The gradient fill is two colors. Both offset and opacity can be adjusted for each color via the sliders. When a new radial gradient is selected, the element's current fill color becomes color 2 in the gradient settings pane. Color 1 default is red. Each color can be changed.
The gradient focal point can also be adjusted via a drag/drop circle. When the gradient is satisfactory, select 'apply'.
Linear Gradient Fill
The gradient fill is two colors. Both offset and opacity can be adjusted for each color via the sliders. When a new linear gradient is selected, the element's current fill color becomes color 2 in the gradient settings pane. Color 1 default is red. Each color can be changed.
The linear gradient can be flipped 90/180 degrees. When the gradient is satisfactory, select 'apply'.
Mask
Gradient Mask
The mask is a speciality feature used to blend circular/elliptical elements, including images. It provides subtle, rich, opacity coloring and merging.
Click each element to mask. Select 'undo' to return the last-selected element to its previous unmasked state.
Source
Edit Element Source
Click an element to display its source. The source can be edited and saved to update it in the workspace. The x,y value displayed is produced by clicking any location in the workspace.
Selecting all source will provide a tool that displays/edits all elements' source that is currently in the workspace.
The 'quick view' selection is a snapshot of all elements source currently in the workspace.
Selecting 'copy source' will place all svg source into a textarea for copy and paste as an SVG document, inline SVG, or SVG xhtml.
- - - - - - CREATE AND EDIT SYMBOLS - - - - - -
Create Symbol Selecting the 'library' checkbox will also send this finished symbol to the symbol library.
First create and arrange the elements as desired.
Then select the create symbol button. Then click on each element that is to
be included in the symbol. The pane below will be displayed while elements are being added to this symbol.
Select 'finish' when all elements are added.
If the symbol was checked for the Library, the pane below will be displayed.
Start a new library and/or send the new symbol to one or more existing libraries.
Size Symbol
Both symbols and individual elements can be selected to be sized. Click on a symbol or element to size it. It will be displayed on a gray background.
Adjust the slider to increase/decrease the size of the symbol or element
Select 'finish' when the size is satisfactory.
Edit Symbol
The finished edited symbol can also be selected to be copied to the symbol library.
Click on the symbol to be changed.
cancel save
After changes, select either the cancel or the save button shown at left.
Symbol Library Open either the default Basic Library or one of your libraries.
The library is opened for either use of its symbols for the current workspace and/or editing of the library's source.
Point/Click to select a symbol from the library to place into the workspace. Also, each symbol source can be edited, and the library's xml source can be called for viewing and global editing.
Each library's xml file source can be used to add and exchange symbols between the various libraries.
A tutorial is included on the creation and use of symbols and the libraries.
- - - - - - TABLES & GRAPHS - - - - - -
Tables
To start a new table, provide the number of rows and columns, then select 'start'. This will present a table pane as shown below.
Building A Table
The new table selections are: background color, border/lines color, font color, font family, and font size.
The font size is adjusted via a slider. As the font size is changed, the actual width/height value of the completed table is displayed.
Also the row/column headers can be selected as bold font face.
The data in each table cell can be directly typed into the cell. The table's actual width/height values are automatically updated as the cells are filled with data.
When the table is completed, select 'save'. This will place the table at the center of the workspace.
Graphs
To start a new graph, provide the number of width, height and the individual grid size, then select 'start'. This will present a graph pane as shown below.
Building A Graph
The graph can be either a basic grid or include a graph coordinate system.
The grid selections are: background color, line color, and stroke width.
The coordinate units selections are: Horizontal/Vertical titles, start values, and units per grid. Also the
start corner of the coordinates can be selected. Both font family and font size for the units can be chosen.
Select 'preview' to display how the various selections will affect the graph layout.
When the graph is satisfactory, select 'finish'. This will place the graph at the center of the workspace.
Undo/Redo Commands
This steps back through all commands. A command is defined as a button selection where one or more elements have been added or edited.
It will undo all activities within a previous command. For example, if one or more new elements have been created following that element's 'new' command, then selecting 'undo' will remove all of those elements.
Also, if one or more elements have been edited within an editing command, then selecting 'undo' will remove the edit from the element(s).
Note: This undo selection retains the previous 25 commands.
- - - - - -SAVING YOUR WORK - - - - - -
Save
Your work is saved in three formats at the server: .svg, .htm, and .xml.
A unique locator number is attached to your file name.
It is available to be called from other applications.
It can also be saved on your computer with a file name of your choice.
Custom Sizing Options
Prior to saving your work, you can make changes, via the above pane, to its size and layout. The various changes can be previewed.
Editing Source
The XML and SVG source for the image can be edited, copied and published for other applications.
A tool is provided to make changes. Also new elements can be inserted and the existing elements can be manually edited. When the
changes are as desired, select the 'copy' button to place the changed source into the topmost textarea reserved for copy.
Then the XML can be validated by selecting 'Validate as XML'. If the XML is formatted correctly, the resultant SVG image can be previewed. Also,
the edited source can be saved and published online for access to other applications and available for future changes. The source can also be saved as
a file on your computer.
Your Cloud Files
Included in the cloud file management:
1) All your files will be stored in a High Performance SAN Storage. This San Infrastructure is currently the best available for file-loss protection. With the SAN storage, all your data will be protected against hard drive failures and degraded performance from a defective hard drive. Also the SAN solution delivers your content much faster than other storage methods. This enhances speed and reliability.
2) High Scalability - The SAN Storage is highly scalable. If there is a need of performance boost or a storage increase, another SAN is attached on top of the current one. The SAN will spread the data across automatically. The performance and storage space will be doubled with zero downtime.
3) The OS is running with Virtualization Technology -
This avoids unnecessary downtime during hardware upgrade or maintenance. A new machine is setup first and then moves the entire OS to a new server with no downtime and no reconfiguration time.
This makes disaster recovery extremely easy and fast. If a machine reaches the end of it's life cycle, it boots the OS from another server. Downtime is reduced to few minutes or less.
4) Extended backup - You will have a continuous historical backup during the previous 30 days of your data. We monitor the health of the extended backup files.
How to install Adobe SVG Viewer IE Add-on for Vista/Windows 7:
1. Select 'Add to Internet Explorer' button.
2. Select 'Save' to copy to your computer.
3. Right click on the dowloaded file(adobe-svg-viewer.exe)
4. Select 'Install as Administrator' to run the file.
This is a cloud computing application that can be freely used.
~ Screen Shots ~ 
Select 'finish' when the size is satisfactory.
Undo/Redo Commands
Your Cloud Files