2012-05-17 22:50:00 +00:00
<!DOCTYPE html>
< html >
2020-08-01 13:14:30 +00:00
2012-05-17 22:50:00 +00:00
< head >
2020-08-02 10:26:22 +00:00
< meta http-equiv = "X-UA-Compatible" content = "chrome=1" / >
2020-12-15 02:06:44 +00:00
< link rel = "icon" href = "images/favicon.svg" sizes = "any" type = "image/svg+xml" >
2015-12-29 06:28:39 +00:00
< meta name = "viewport" content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" / >
2012-06-23 19:40:40 +00:00
< meta name = "apple-mobile-web-app-capable" content = "yes" / >
2021-01-05 22:45:33 +00:00
< title > Method Draw Vector Editor< / title >
2020-08-02 10:26:22 +00:00
< meta charset = "utf-8" >
2021-01-05 22:45:33 +00:00
< meta name = "description" content = "Method Draw is an open source SVG editor for the web, you can use it online without signing up." >
2012-05-17 22:50:00 +00:00
2020-08-02 10:26:22 +00:00
<!-- build:css all.css -->
< link rel = "stylesheet" href = "css/jpicker.css" type = "text/css" / >
< link rel = "stylesheet" href = "css/jgraduate.css" type = "text/css" / >
< link rel = "stylesheet" href = "css/fonts.css" type = "text/css" / >
2020-08-05 00:50:03 +00:00
< link rel = "stylesheet" href = "css/dropdown.css" type = "text/css" / >
< link rel = "stylesheet" href = "css/draginput.css" type = "text/css" / >
< link rel = "stylesheet" href = "css/menu.css" type = "text/css" / >
< link rel = "stylesheet" href = "css/rulers.css" type = "text/css" / >
< link rel = "stylesheet" href = "css/palette.css" type = "text/css" / >
< link rel = "stylesheet" href = "css/color-tool.css" type = "text/css" / >
< link rel = "stylesheet" href = "css/context-menu.css" type = "text/css" / >
< link rel = "stylesheet" href = "css/shapelib.css" type = "text/css" / >
< link rel = "stylesheet" href = "css/method-draw.css" type = "text/css" / >
2020-08-02 10:26:22 +00:00
<!-- endbuild -->
2012-05-17 22:50:00 +00:00
< / head >
< body >
2020-08-02 10:26:22 +00:00
< div id = "svg_editor" >
2012-05-17 22:50:00 +00:00
< div id = "rulers" >
2015-12-22 05:05:03 +00:00
< div id = "ruler_corner" > < / div >
< div id = "ruler_x" >
< div id = "ruler_x_cursor" > < / div >
< div >
< canvas height = "15" > < / canvas >
< / div >
< / div >
< div id = "ruler_y" >
< div id = "ruler_y_cursor" > < / div >
< div >
< canvas width = "15" > < / canvas >
< / div >
< / div >
2012-05-17 22:50:00 +00:00
< / div >
< div id = "workarea" >
2021-01-18 15:35:26 +00:00
< div id = "svgcanvas" >
2012-05-17 22:50:00 +00:00
< / div >
< / div >
2012-05-30 04:55:00 +00:00
< div id = "menu_bar" >
2012-06-12 01:31:43 +00:00
< a class = "menu" >
2020-08-05 00:50:03 +00:00
< div class = "menu_title" id = "logo" >
2021-01-05 22:45:33 +00:00
< svg viewBox = "0 0 16 16" width = "16" height = "16" xmlns = "http://www.w3.org/2000/svg" >
< path d = "M-.1 16.1L16 .04V16.1H-.1z" fill = "#ccc" > < / path >
< path d = "M0 16.1V.1l16 16H0z" fill = "#666" > < / path >
2020-08-05 00:50:03 +00:00
< / svg >
< / div >
2012-06-12 01:31:43 +00:00
< div class = "menu_list" >
< div id = "tool_about" class = "menu_item" > About this Editor...< / div >
2012-07-26 03:44:15 +00:00
< div class = "separator" > < / div >
2021-01-26 23:07:55 +00:00
< div id = "tool_about" class = "menu_item" > Preferences...< / div >
2013-08-30 22:30:48 +00:00
< div id = "tool_about" class = "menu_item" > Keyboard Shortcuts...< / div >
2012-06-12 01:31:43 +00:00
< / div >
< / a >
2012-05-30 04:55:00 +00:00
< div class = "menu" >
2015-12-22 05:05:03 +00:00
< div class = "menu_title" > File< / div >
< div class = "menu_list" id = "file_menu" >
< div id = "tool_clear" class = "menu_item" > New Document< / div >
< div id = "tool_open" class = "menu_item" style = "display: none;" > < div id = "fileinputs" > < / div > Open SVG...< / div >
< div id = "tool_import" class = "menu_item" style = "display: none;" > < div id = "fileinputs_import" > < / div > Import Image...< / div >
< div id = "tool_save" class = "menu_item" > Save Image... < span class = "shortcut" > ⌘S< / span > < / div >
< div id = "tool_export" class = "menu_item" > Export as PNG< / div >
< / div >
2012-05-30 04:55:00 +00:00
< / div >
2012-05-17 22:50:00 +00:00
2012-05-30 04:55:00 +00:00
< div class = "menu" >
< div class = "menu_title" > Edit< / div >
2015-12-22 05:05:03 +00:00
< div class = "menu_list" id = "edit_menu" >
< div class = "menu_item" id = "tool_undo" > Undo < span class = "shortcut" > ⌘Z< / span > < / div >
< div class = "menu_item" id = "tool_redo" > Redo < span class = "shortcut" > ⌘Y< / span > < / div >
< div class = "separator" > < / div >
< div class = "menu_item action_selected disabled" id = "tool_cut" > Cut < span class = "shortcut" > ⌘X< / span > < / div >
< div class = "menu_item action_selected disabled" id = "tool_copy" > Copy < span class = "shortcut" > ⌘C< / span > < / div >
< div class = "menu_item action_selected disabled" id = "tool_paste" > Paste < span class = "shortcut" > ⌘V< / span > < / div >
< div class = "menu_item action_selected disabled" id = "tool_clone" > Duplicate < span class = "shortcut" > ⌘D< / span > < / div >
< div class = "menu_item action_selected disabled" id = "tool_delete" > Delete < span > ⌫< / span > < / div >
2012-05-30 04:55:00 +00:00
< / div >
< / div >
< div class = "menu" >
< div class = "menu_title" > Object< / div >
2015-12-22 05:05:03 +00:00
< div class = "menu_list" id = "object_menu" >
< div class = "menu_item action_selected disabled" id = "tool_move_top" > Bring to Front < span class = "shortcut" > ⌘⇧↑< / span > < / div >
< div class = "menu_item action_selected disabled" id = "tool_move_up" > Bring Forward < span class = "shortcut" > ⌘↑< / span > < / div >
< div class = "menu_item action_selected disabled" id = "tool_move_down" > Send Backward < span class = "shortcut" > ⌘↓< / span > < / div >
< div class = "menu_item action_selected disabled" id = "tool_move_bottom" > Send to Back < span class = "shortcut" > ⌘⇧↓< / span > < / div >
< div class = "separator" > < / div >
< div class = "menu_item action_multi_selected disabled" id = "tool_group" > Group Elements < span class = "shortcut" > ⌘G< / span > < / div >
< div class = "menu_item action_group_selected disabled" id = "tool_ungroup" > Ungroup Elements < span class = "shortcut" > ⌘⇧G< / span > < / div >
< div class = "separator" > < / div >
< div class = "menu_item action_path_convert_selected disabled" id = "tool_topath" > Convert to Path< / div >
< div class = "menu_item action_path_selected disabled" id = "tool_reorient" > Reorient path< / div >
2012-05-30 04:55:00 +00:00
< / div >
< / div >
2012-05-17 22:50:00 +00:00
2012-05-30 04:55:00 +00:00
< div class = "menu" >
< div class = "menu_title" > View< / div >
2015-12-22 05:05:03 +00:00
< div class = "menu_list" id = "view_menu" >
< div class = "menu_item push_button_pressed" id = "tool_rulers" > View Rulers< / div >
< div class = "menu_item" id = "tool_wireframe" > View Wireframe< / div >
< div class = "menu_item" id = "tool_snap" > Snap to Grid< / div >
< div class = "separator" > < / div >
< div class = "menu_item" id = "tool_source" > Source... < span class = "shortcut" > ⌘U< / span > < / div >
2012-05-30 04:55:00 +00:00
< / div >
< / div >
< / div >
2012-05-17 22:50:00 +00:00
2021-01-17 02:49:34 +00:00
< div id = "panels" class = "tools_panel" >
2012-05-17 22:50:00 +00:00
2015-12-22 05:05:03 +00:00
< div id = "canvas_panel" class = "context_panel" >
< h4 class = "clearfix" > Canvas< / h4 >
2021-01-17 02:49:34 +00:00
2021-01-18 15:35:26 +00:00
< label data-title = "Change canvas width" >
< input size = "3" id = "canvas_width" type = "text" pattern = "[0-9]*" value = "800" / >
< span class = "icon_label" > Width< / span >
< / label >
2021-01-17 02:49:34 +00:00
2021-01-18 15:35:26 +00:00
< label data-title = "Change canvas height" >
< input id = "canvas_height" size = "3" type = "text" pattern = "[0-9]*" value = "600" / >
< span class = "icon_label" > Height< / span >
< / label >
2015-12-22 05:05:03 +00:00
< label data-title = "Change canvas color" class = "draginput" >
< span > Color< / span >
< div id = "color_canvas_tools" >
< div class = "color_tool active" id = "tool_canvas" >
< div class = "color_block" >
< div id = "canvas_bg" > < / div >
< div id = "canvas_color" > < / div >
< / div >
< / div >
< / div >
< / label >
< div class = "draginput" >
< span > Sizes< / span >
< select id = "resolution" >
< option id = "selectedPredefined" selected = "selected" > Custom< / option >
< option > 640x480< / option >
< option > 800x600< / option >
< option > 1024x768< / option >
< option > 1280x960< / option >
< option > 1600x1200< / option >
< option id = "fitToContent" value = "content" > Fit to Content< / option >
< / select >
< div class = "caret" > < / div >
< label id = "resolution_label" > Custom< / label >
< / div >
< / div >
< div id = "rect_panel" class = "context_panel" >
< h4 class = "clearfix" > Rectangle< / h4 >
< label >
< input id = "rect_x" class = "attr_changer" data-title = "Change X coordinate" size = "3" data-attr = "x" pattern = "[0-9]*" / >
< span > X< / span >
< / label >
< label >
< input id = "rect_y" class = "attr_changer" data-title = "Change Y coordinate" size = "3" data-attr = "y" pattern = "[0-9]*" / >
< span > Y< / span >
< / label >
< label id = "rect_width_tool attr_changer" data-title = "Change rectangle width" >
< input id = "rect_width" class = "attr_changer" size = "3" data-attr = "width" type = "text" pattern = "[0-9]*" / >
< span class = "icon_label" > Width< / span >
< / label >
< label id = "rect_height_tool" data-title = "Change rectangle height" >
< input id = "rect_height" class = "attr_changer" size = "3" data-attr = "height" type = "text" pattern = "[0-9]*" / >
< span class = "icon_label" > Height< / span >
< / label >
< / div >
< div id = "path_panel" class = "context_panel clearfix" >
< h4 class = "clearfix" > Path< / h4 >
< label >
< input id = "path_x" class = "attr_changer" data-title = "Change ellipse's cx coordinate" size = "3" data-attr = "x" pattern = "[0-9]*" / >
< span > X< / span >
< / label >
< label >
< input id = "path_y" class = "attr_changer" data-title = "Change ellipse's cy coordinate" size = "3" data-attr = "y" pattern = "[0-9]*" / >
< span > Y< / span >
< / label >
< / div >
< div id = "image_panel" class = "context_panel clearfix" >
< h4 > Image< / h4 >
< label >
< input id = "image_x" class = "attr_changer" data-title = "Change X coordinate" size = "3" data-attr = "x" pattern = "[0-9]*" / >
< span > X< / span >
< / label >
< label >
< input id = "image_y" class = "attr_changer" data-title = "Change Y coordinate" size = "3" data-attr = "y" pattern = "[0-9]*" / >
< span > Y< / span >
< / label >
< label >
< input id = "image_width" class = "attr_changer" data-title = "Change image width" size = "3" data-attr = "width" pattern = "[0-9]*" / >
< span class = "icon_label" > Width< / span >
< / label >
< label >
< input id = "image_height" class = "attr_changer" data-title = "Change image height" size = "3" data-attr = "height" pattern = "[0-9]*" / >
< span class = "icon_label" > Height< / span >
< / label >
2012-05-17 22:50:00 +00:00
< / div >
2012-07-28 00:59:43 +00:00
< div id = "circle_panel" class = "context_panel" >
< h4 > Circle< / h4 >
2015-12-22 05:05:03 +00:00
< label id = "tool_circle_cx" >
< span > Center X< / span >
< input id = "circle_cx" class = "attr_changer" title = "Change circle's cx coordinate" size = "3" data-attr = "cx" / >
< / label >
< label id = "tool_circle_cy" >
< span > Center Y< / span >
< input id = "circle_cy" class = "attr_changer" title = "Change circle's cy coordinate" size = "3" data-attr = "cy" / >
< / label >
< label id = "tool_circle_r" >
< span > Radius< / span >
< input id = "circle_r" class = "attr_changer" title = "Change circle's radius" size = "3" data-attr = "r" / >
< / label >
< / div >
< div id = "ellipse_panel" class = "context_panel clearfix" >
< h4 > Ellipse< / h4 >
< label id = "tool_ellipse_cx" >
< input id = "ellipse_cx" class = "attr_changer" data-title = "Change ellipse's cx coordinate" size = "3" data-attr = "cx" pattern = "[0-9]*" / >
< span > X< / span >
< / label >
< label id = "tool_ellipse_cy" >
< input id = "ellipse_cy" class = "attr_changer" data-title = "Change ellipse's cy coordinate" size = "3" data-attr = "cy" pattern = "[0-9]*" / >
< span > Y< / span >
< / label >
< label id = "tool_ellipse_rx" >
< input id = "ellipse_rx" class = "attr_changer" data-title = "Change ellipse's x radius" size = "3" data-attr = "rx" pattern = "[0-9]*" / >
< span > Radius X< / span >
< / label >
< label id = "tool_ellipse_ry" >
< input id = "ellipse_ry" class = "attr_changer" data-title = "Change ellipse's y radius" size = "3" data-attr = "ry" pattern = "[0-9]*" / >
< span > Radius Y< / span >
< / label >
< / div >
< div id = "line_panel" class = "context_panel clearfix" >
< h4 > Line< / h4 >
< label id = "tool_line_x1" >
< input id = "line_x1" class = "attr_changer" data-title = "Change line's starting x coordinate" size = "3" data-attr = "x1" pattern = "[0-9]*" / >
< span > Start X< / span >
< / label >
< label id = "tool_line_y1" >
< input id = "line_y1" class = "attr_changer" data-title = "Change line's starting y coordinate" size = "3" data-attr = "y1" pattern = "[0-9]*" / >
< span > Start Y< / span >
< / label >
< label id = "tool_line_x2" >
< input id = "line_x2" class = "attr_changer" data-title = "Change line's ending x coordinate" size = "3" data-attr = "x2" pattern = "[0-9]*" / >
< span > End X< / span >
< / label >
< label id = "tool_line_y2" >
< input id = "line_y2" class = "attr_changer" data-title = "Change line's ending y coordinate" size = "3" data-attr = "y2" pattern = "[0-9]*" / >
< span > End Y< / span >
< / label >
< / div >
< div id = "text_panel" class = "context_panel" >
< h4 > Text< / h4 >
< label >
< input id = "text_x" class = "attr_changer" data-title = "Change text x coordinate" size = "3" data-attr = "x" pattern = "[0-9]*" / >
< span > X< / span >
< / label >
< label >
< input id = "text_y" class = "attr_changer" data-title = "Change text y coordinate" size = "3" data-attr = "y" pattern = "[0-9]*" / >
< span > Y< / span >
< / label >
< div class = "toolset draginput select twocol" id = "tool_font_family" >
<!-- Font family -->
< span > Font< / span >
2021-01-05 23:06:41 +00:00
< div id = "preview_font" style = "font-family: sans-serif" > sans-serif< / div >
2015-12-22 05:05:03 +00:00
< div class = "caret" > < / div >
< input id = "font_family" data-title = "Change Font Family" size = "12" type = "hidden" / >
< select id = "font_family_dropdown" >
< / select >
2012-07-26 22:10:49 +00:00
< div class = "tool_button" id = "tool_bold" data-title = "Bold Text [B]" > B< / div >
< div class = "tool_button" id = "tool_italic" data-title = "Italic Text [I]" > i< / div >
2015-12-22 05:05:03 +00:00
< / div >
< label id = "tool_font_size" data-title = "Change Font Size" >
< input id = "font_size" size = "3" value = "0" / >
< span id = "font_sizeLabel" class = "icon_label" > Font Size< / span >
< / label >
<!-- Not visible, but still used -->
< input id = "text" type = "text" size = "35" / >
< / div >
<!-- formerly gsvg_panel -->
< div id = "container_panel" class = "context_panel clearfix" >
< / div >
< div id = "use_panel" class = "context_panel clearfix" >
< div class = "tool_button clearfix" id = "tool_unlink_use" data-title = "Break link to reference element (make unique)" > Break link reference< / div >
< / div >
< div id = "g_panel" class = "context_panel clearfix" >
< h4 > Group< / h4 >
< label >
< input id = "g_x" class = "attr_changer" data-title = "Change groups's x coordinate" size = "3" data-attr = "x" pattern = "[0-9]*" / >
< span > X< / span >
< / label >
< label >
< input id = "g_y" class = "attr_changer" data-title = "Change groups's y coordinate" size = "3" data-attr = "y" pattern = "[0-9]*" / >
< span > Y< / span >
< / label >
< / div >
< div id = "path_node_panel" class = "context_panel clearfix" >
< h4 > Edit Path< / h4 >
< label id = "tool_node_x" >
< input id = "path_node_x" class = "attr_changer" data-title = "Change node's x coordinate" size = "3" data-attr = "x" / >
< span > X< / span >
< / label >
< label id = "tool_node_y" >
< input id = "path_node_y" class = "attr_changer" data-title = "Change node's y coordinate" size = "3" data-attr = "y" / >
< span > Y< / span >
< / label >
< div id = "segment_type" class = "draginput label" >
< span > Segment Type< / span >
< select id = "seg_type" data-title = "Change Segment type" >
< option id = "straight_segments" selected = "selected" value = "4" > Straight< / option >
< option id = "curve_segments" value = "6" > Curve< / option >
< / select >
< div class = "caret" > < / div >
< label id = "seg_type_label" > Straight< / label >
< / div >
<!--
< label class = "draginput checkbox" data-title = "Link Control Points" >
< span > Linked Control Points< / span >
< div class = "push_bottom" > < input type = "checkbox" id = "tool_node_link" checked = "checked" / > < / div >
< / label >
-->
< div class = "clearfix" > < / div >
< div class = "tool_button" id = "tool_node_clone" title = "Adds a node" > Add Node< / div >
< div class = "tool_button" id = "tool_node_delete" title = "Delete Node" > Delete Node< / div >
< div class = "tool_button" id = "tool_openclose_path" title = "Open/close sub-path" > Open Path< / div >
<!-- <div class="tool_button" id="tool_add_subpath" title="Add sub - path"></div> -->
< / div >
<!-- Buttons when a single element is selected -->
< div id = "selected_panel" class = "context_panel" >
< label id = "tool_angle" data-title = "Change rotation angle" class = "draginput" >
< input id = "angle" class = "attr_changer" size = "2" value = "0" data-attr = "transform" data-min = "-180" data-max = "180" type = "text" / >
< span class = "icon_label" > Rotation< / span >
< div id = "tool_angle_indicator" >
< div id = "tool_angle_indicator_cursor" > < / div >
< / div >
< / label >
< label class = "toolset" id = "tool_opacity" data-title = "Change selected item opacity" >
2021-01-18 15:35:26 +00:00
< input id = "group_opacity" class = "attr_changer" data-attr = "opacity" size = "3" value = "100" step = "5" min = "0" max = "100" / >
2015-12-22 05:05:03 +00:00
< span id = "group_opacityLabel" class = "icon_label" > Opacity< / span >
< / label >
< div class = "toolset" id = "tool_blur" data-title = "Change gaussian blur value" >
< label >
< input id = "blur" size = "2" value = "0" step = ".1" min = "0" max = "10" / >
< span class = "icon_label" > Blur< / span >
< / label >
< / div >
< label id = "cornerRadiusLabel" data-title = "Change Rectangle Corner Radius" >
< input id = "rect_rx" size = "3" value = "0" data-attr = "rx" class = "attr_changer" type = "text" pattern = "[0-9]*" / >
< span class = "icon_label" > Roundness< / span >
< / label >
< div class = "clearfix" > < / div >
< div id = "align_tools" >
< h4 > Align< / h4 >
< div class = "toolset align_buttons" id = "tool_position" >
< label >
< div class = "col last clear" id = "position_opts" >
2020-08-05 00:50:03 +00:00
< div class = "draginput_cell" id = "tool_posleft" title = "Align Left" >
< svg viewBox = "0 0 27 27" xmlns = "http://www.w3.org/2000/svg" width = "27" height = "27" >
< path d = "M 2 1 L 2 5 L 14 5 L 14 11 L 2 11 L 2 16 L 20 16 L 20 22 L 2 22 L 2 26 L 1 26 L 1 1 L 2 1 Z" / >
< / svg >
< / div >
< div class = "draginput_cell" id = "tool_poscenter" title = "Align Center" >
< svg viewBox = "0 0 27 27" xmlns = "http://www.w3.org/2000/svg" width = "27" height = "27" >
< path d = "M 13 1 L 14 1 L 14 6 L 22 6 L 22 12 L 14 12 L 14 15 L 19 15 L 19 21 L 14 21 L 14 26 L 13 26 L 13 21 L 8 21 L 8 15 L 13 15 L 13 12 L 5 12 L 5 6 L 13 6 L 13 1 Z" / >
< / svg >
< / div >
< div class = "draginput_cell" id = "tool_posright" title = "Align Right" >
< svg viewBox = "0 0 27 27" xmlns = "http://www.w3.org/2000/svg" width = "27" height = "27" >
< path d = "M 25 1 L 25 5 L 13 5 L 13 11 L 25 11 L 25 16 L 7 16 L 7 22 L 25 22 L 25 26 L 26 26 L 26 1 L 25 1 Z" / >
< / svg >
< / div >
< div class = "draginput_cell" id = "tool_postop" title = "Align Top" >
< svg viewBox = "0 0 27 27" xmlns = "http://www.w3.org/2000/svg" width = "27" height = "27" >
< path d = "M 1 2 L 5 2 L 5 14 L 11 14 L 11 2 L 16 2 L 16 20 L 22 20 L 22 2 L 26 2 L 26 1 L 1 1 L 1 2 Z" / >
< / svg >
< / div >
< div class = "draginput_cell" id = "tool_posmiddle" title = "Align Middle" >
< svg viewBox = "0 0 27 27" xmlns = "http://www.w3.org/2000/svg" width = "27" height = "27" >
< path d = "M 26 13 L 26 14 L 21 14 L 21 22 L 15 22 L 15 14 L 12 14 L 12 19 L 6 19 L 6 14 L 1 14 L 1 13 L 6 13 L 6 8 L 12 8 L 12 13 L 15 13 L 15 5 L 21 5 L 21 13 L 26 13 Z" / >
< / svg >
< / div >
< div class = "draginput_cell" id = "tool_posbottom" title = "Align Bottom" >
< svg viewBox = "0 0 27 27" xmlns = "http://www.w3.org/2000/svg" width = "27" height = "27" >
< path d = "M 1 25 L 5 25 L 5 13 L 11 13 L 11 25 L 16 25 L 16 7 L 22 7 L 22 25 L 26 25 L 26 26 L 1 26 L 1 25" / >
< / svg >
< / div >
2015-12-22 05:05:03 +00:00
< / div >
< / label >
< / div >
< / div >
< / div >
<!-- Buttons when multiple elements are selected -->
< div id = "multiselected_panel" class = "context_panel clearfix" >
< h4 class = "hidable" > Multiple Elements< / h4 >
< div class = "toolset align_buttons" style = "position: relative" >
< label id = "tool_align_relative" style = "margin-top: 10px;" >
< select id = "align_relative_to" title = "Align relative to ..." >
< option id = "selected_objects" value = "selected" > Align to objects< / option >
< option id = "page" value = "page" > Align to page< / option >
< / select >
< / label >
< h4 > .< / h4 >
< div class = "col last clear" >
2020-11-25 07:13:00 +00:00
< div class = "draginput_cell" id = "tool_alignleft" title = "Align Left" >
< svg viewBox = "0 0 27 27" xmlns = "http://www.w3.org/2000/svg" width = "27" height = "27" >
< path d = "M 2 1 L 2 5 L 14 5 L 14 11 L 2 11 L 2 16 L 20 16 L 20 22 L 2 22 L 2 26 L 1 26 L 1 1 L 2 1 Z" / >
< / svg >
< / div >
< div class = "draginput_cell" id = "tool_aligncenter" title = "Align Center" >
< svg viewBox = "0 0 27 27" xmlns = "http://www.w3.org/2000/svg" width = "27" height = "27" >
< path d = "M 13 1 L 14 1 L 14 6 L 22 6 L 22 12 L 14 12 L 14 15 L 19 15 L 19 21 L 14 21 L 14 26 L 13 26 L 13 21 L 8 21 L 8 15 L 13 15 L 13 12 L 5 12 L 5 6 L 13 6 L 13 1 Z" / >
< / svg >
< / div >
< div class = "draginput_cell" id = "tool_alignright" title = "Align Right" >
< svg viewBox = "0 0 27 27" xmlns = "http://www.w3.org/2000/svg" width = "27" height = "27" >
< path d = "M 25 1 L 25 5 L 13 5 L 13 11 L 25 11 L 25 16 L 7 16 L 7 22 L 25 22 L 25 26 L 26 26 L 26 1 L 25 1 Z" / >
< / svg >
< / div >
< div class = "draginput_cell" id = "tool_aligntop" title = "Align Top" >
< svg viewBox = "0 0 27 27" xmlns = "http://www.w3.org/2000/svg" width = "27" height = "27" >
< path d = "M 1 2 L 5 2 L 5 14 L 11 14 L 11 2 L 16 2 L 16 20 L 22 20 L 22 2 L 26 2 L 26 1 L 1 1 L 1 2 Z" / >
< / svg >
< / div >
< div class = "draginput_cell" id = "tool_alignmiddle" title = "Align Middle" >
< svg viewBox = "0 0 27 27" xmlns = "http://www.w3.org/2000/svg" width = "27" height = "27" >
< path d = "M 26 13 L 26 14 L 21 14 L 21 22 L 15 22 L 15 14 L 12 14 L 12 19 L 6 19 L 6 14 L 1 14 L 1 13 L 6 13 L 6 8 L 12 8 L 12 13 L 15 13 L 15 5 L 21 5 L 21 13 L 26 13 Z" / >
< / svg >
< / div >
< div class = "draginput_cell" id = "tool_alignbottom" title = "Align Bottom" >
< svg viewBox = "0 0 27 27" xmlns = "http://www.w3.org/2000/svg" width = "27" height = "27" >
< path d = "M 1 25 L 5 25 L 5 13 L 11 13 L 11 25 L 16 25 L 16 7 L 22 7 L 22 25 L 26 25 L 26 26 L 1 26 L 1 25" / >
< / svg >
< / div >
2015-12-22 05:05:03 +00:00
< / div >
< / div >
< div class = "clearfix" > < / div >
< / div >
< div id = "stroke_panel" class = "context_panel clearfix" >
< div class = "clearfix" > < / div >
< h4 > Stroke< / h4 >
< div class = "toolset" data-title = "Change stroke" >
< label >
< input id = "stroke_width" size = "2" value = "5" data-attr = "stroke-width" min = "0" max = "99" step = "1" / >
< span class = "icon_label" > Stroke Width< / span >
< / label >
< / div >
< div class = "stroke_tool draginput" >
< span > Stroke Dash< / span >
< select id = "stroke_style" data-title = "Change stroke dash style" >
< option selected = "selected" value = "none" > —< / option >
< option value = "2,2" > ···< / option >
< option value = "5,5" > - -< / option >
< option value = "5,2,2,2" > -·-< / option >
< option value = "5,2,2,2,2,2" > -··-< / option >
< / select >
< div class = "caret" > < / div >
< label id = "stroke_style_label" > —< / label >
< / div >
2012-07-25 06:32:18 +00:00
< label style = "display: none;" >
< span class = "icon_label" > Stroke Join< / span >
< / label >
< label style = "display: none;" >
< span class = "icon_label" > Stroke Cap< / span >
2015-12-22 05:05:03 +00:00
< / label >
< / div >
2012-05-30 04:55:00 +00:00
2012-05-17 22:50:00 +00:00
< / div > <!-- tools_top -->
2015-12-22 05:05:03 +00:00
< div id = "cur_context_panel" >
< / div >
2012-05-17 22:50:00 +00:00
< div id = "tools_left" class = "tools_panel" >
2021-01-17 02:49:34 +00:00
< div class = "tool_button" id = "tool_select" data-mode = "select" title = "Select Tool [V]" >
2020-08-05 00:50:03 +00:00
< svg viewBox = "0 0 24 24" width = "24" height = "24" >
< path d = "M17.15 20.76l-2.94 1.5-3.68-6-4.41 3V1.24l12.5 12.01-4.41 1.5 2.94 6z" / >
< / svg >
< / div >
2021-01-17 02:49:34 +00:00
< div class = "tool_button" id = "tool_fhpath" data-mode = "fhpath" title = "Pencil Tool [P]" >
2020-08-05 00:50:03 +00:00
< svg xmlns = "http://www.w3.org/2000/svg" height = "24" viewBox = "0 0 24 24" width = "24" style = "transform: scale(-1,1)" > < path d = "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" / > < / svg >
< / div >
2021-01-17 02:49:34 +00:00
< div class = "tool_button" id = "tool_line" data-mode = "line" title = "Line Tool [L]" >
2020-08-05 00:50:03 +00:00
< svg viewBox = "0 0 27 27" xmlns = "http://www.w3.org/2000/svg" width = "24" height = "24" >
< path d = "M 3 1 L 26 24 L 24 26 L 1 3 L 3 1 Z" > < / path >
< / svg >
< / div >
2021-01-17 02:49:34 +00:00
< div class = "tool_button" id = "tool_rect" data-mode = "rect" title = "Square/Rect Tool [R]" >
2020-08-05 00:50:03 +00:00
< svg viewBox = "0 0 27 27" xmlns = "http://www.w3.org/2000/svg" width = "24" height = "24" >
< path d = "M 0 8 L 0 24 L 24 24 L 25 8 L 0 8 Z" / >
< / svg >
< / div >
2021-01-17 02:49:34 +00:00
< div class = "tool_button" id = "tool_ellipse" data-mode = "ellipse" title = "Ellipse/Circle Tool [C]" >
2020-08-05 00:50:03 +00:00
< svg viewBox = "0 0 27 27" xmlns = "http://www.w3.org/2000/svg" width = "24" height = "24" >
< ellipse cx = "13" cy = "13" rx = "13" ry = "9" > < / ellipse >
< / svg >
< / div >
2021-01-18 15:35:26 +00:00
< div class = "tool_button" id = "tool_shapelib" data-mode = "shapelib" title = "Shape Tool [s]" >
2020-08-05 00:50:03 +00:00
< svg xmlns = "http://www.w3.org/2000/svg" height = "27" width = "27" viewBox = "0 0 24 24" >
< polygon points = "14.43,10 12,2 9.57,10 2,10 8.18,14.41 5.83,22 12,17.31 18.18,22 15.83,14.41 22,10" / >
< / svg >
< div class = "tool_menu" >
< / div >
< / div >
2021-01-17 02:49:34 +00:00
< div class = "tool_button" id = "tool_path" data-mode = "path" title = "Path Tool [P]" >
2020-08-05 00:50:03 +00:00
< svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 27 27" width = "27" height = "27" >
< path d = "M12.2 1.9c0-.36.86 0 .86 0V14a1.3 1.3 0 10.88 0V1.9s.87-.36.87 0c0 6.81 5.22 11.68 5.22 11.68l-3.25 8.2h-6.55l-3.26-8.2s5.22-4.87 5.22-11.68zM7.83 25.26v-2.61h11.32v2.6H7.84z" / >
< / svg >
< / div >
2021-01-17 02:49:34 +00:00
< div class = "tool_button" id = "tool_text" data-mode = "text" title = "Text Tool [T]" >
2020-08-05 00:50:03 +00:00
< svg xmlns = "http://www.w3.org/2000/svg" height = "24" viewBox = "2 2 20 20" width = "27" height = "27" > < path d = "M5 4v3h5.5v12h3V7H19V4z" / > < / svg >
< / div >
2021-01-17 02:49:34 +00:00
< div class = "tool_button" id = "tool_zoom" data-mode = "zoom" title = "Zoom Tool [Z]" >
2020-08-05 00:50:03 +00:00
< svg xmlns = "http://www.w3.org/2000/svg" height = "24" viewBox = "2 2 20 20" width = "27" > < path d = "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" / > < / svg >
< / div >
2021-01-18 15:35:26 +00:00
< div class = "tool_button" id = "tool_eyedropper" data-mode = "eyedropper" title = "Eyedropper Tool [e]" >
2020-08-05 00:50:03 +00:00
< svg xmlns = "http://www.w3.org/2000/svg" height = "24" viewBox = "2 2 20 20" width = "27" style = "transform: scale(-1, 1)" > < path d = "M20.71 5.63l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-3.12 3.12-1.93-1.91-1.41 1.41 1.42 1.42L3 16.25V21h4.75l8.92-8.92 1.42 1.42 1.41-1.41-1.92-1.92 3.12-3.12c.4-.4.4-1.03.01-1.42zM6.92 19L5 17.08l8.06-8.06 1.92 1.92L6.92 19z" / > < / svg >
< / div >
2015-12-22 05:05:03 +00:00
2012-06-17 14:41:39 +00:00
< div id = "color_tools" >
2012-07-24 02:30:12 +00:00
< div id = "tool_switch" title = "Switch stroke and fill colors [X]" > < / div >
2015-12-22 05:05:03 +00:00
< div class = "color_tool active" id = "tool_fill" >
< label class = "icon_label" title = "Change fill color" > < / label >
< div class = "color_block" >
< div id = "fill_bg" > < / div >
< div id = "fill_color" class = "color_block" > < / div >
< / div >
< / div >
< div class = "color_tool" id = "tool_stroke" >
< label class = "icon_label" title = "Change stroke color" > < / label >
< div class = "color_block" >
< div id = "stroke_bg" > < / div >
< div id = "stroke_color" class = "color_block" title = "Change stroke color" > < / div >
< / div >
< / div >
< / div >
2012-05-17 22:50:00 +00:00
< / div > <!-- tools_left -->
< div id = "tools_bottom" class = "tools_panel" >
<!-- Zoom buttons -->
2015-12-22 05:05:03 +00:00
< div id = "zoom_panel" class = "toolset" title = "Change zoom level" >
< div class = "draginput select" id = "zoom_label" >
2020-08-05 00:50:03 +00:00
< span id = "zoomLabel" class = "zoom_tool icon_label" >
< svg xmlns = "http://www.w3.org/2000/svg" height = "24" viewBox = "2 2 20 20" width = "27" > < path d = "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" / > < / svg >
< / span >
2015-12-22 05:05:03 +00:00
< select id = "zoom_select" >
< option value = "6" > 6%< / option >
< option value = "12" > 12%< / option >
< option value = "16" > 16%< / option >
< option value = "25" > 25%< / option >
< option value = "50" > 50%< / option >
< option value = "75" > 75%< / option >
< option value = "100" selected = "selected" > 100%< / option >
< option value = "150" > 150%< / option >
< option value = "200" > 200%< / option >
< option value = "300" > 300%< / option >
< option value = "400" > 400%< / option >
< option value = "600" > 600%< / option >
< option value = "800" > 800%< / option >
< option value = "1600" > 1600%< / option >
< / select >
< div class = "caret" > < / div >
< input id = "zoom" size = "3" value = "100%" type = "text" readonly = "readonly" / >
< / div >
< / div >
2020-08-05 00:50:03 +00:00
< div id = "palette" title = "Click to change fill color, shift-click to change stroke color" > < / div >
2012-05-17 22:50:00 +00:00
< / div >
<!-- hidden divs -->
< div id = "color_picker" > < / div >
< / div > <!-- svg_editor -->
< div id = "svg_source_editor" >
2015-12-22 05:05:03 +00:00
< div id = "svg_source_overlay" > < / div >
< div id = "svg_source_container" >
< div id = "save_output_btns" >
< p id = "copy_save_note" > Copy the contents of this box into a text editor, then save the file with a .svg extension.< / p >
< button id = "copy_save_done" > Done< / button >
< / div >
< form >
< textarea id = "svg_source_textarea" spellcheck = "false" > < / textarea >
< / form >
< div id = "tool_source_back" class = "toolbar_button" >
< button id = "tool_source_cancel" class = "cancel" > Cancel< / button >
< button id = "tool_source_save" class = "ok" > Apply Changes< / button >
< / div >
< / div >
2012-05-17 22:50:00 +00:00
< / div >
< div id = "dialog_box" >
2015-12-22 05:05:03 +00:00
< div id = "dialog_box_overlay" > < / div >
< div id = "dialog_container" >
< div id = "dialog_content" > < / div >
< div id = "dialog_buttons" > < / div >
< / div >
2012-05-17 22:50:00 +00:00
< / div >
< ul id = "cmenu_canvas" class = "contextMenu" >
2015-12-22 05:05:03 +00:00
< li > < a href = "#cut" > Cut < span class = "shortcut" > ⌘X;< / span > < / a > < / li >
< li > < a href = "#copy" > Copy< span class = "shortcut" > ⌘C< / span > < / a > < / li >
< li > < a href = "#paste" > Paste< span class = "shortcut" > ⌘V< / span > < / a > < / li >
< li class = "separator" > < a href = "#delete" > Delete< span class = "shortcut" > ⌫< / span > < / a > < / li >
< li class = "separator" > < a href = "#group" > Group< span class = "shortcut" > ⌘G< / span > < / a > < / li >
< li > < a href = "#ungroup" > Ungroup< span class = "shortcut" > ⌘⇧G< / span > < / a > < / li >
2012-08-25 21:02:58 +00:00
< li class = "separator" > < a href = "#move_front" > Bring to Front< span class = "shortcut" > ⌘⇧↑< / span > < / a > < / li >
2015-12-22 05:05:03 +00:00
< li > < a href = "#move_up" > Bring Forward< span class = "shortcut" > ⌘↑< / span > < / a > < / li >
< li > < a href = "#move_down" > Send Backward< span class = "shortcut" > ⌘↓< / span > < / a > < / li >
2012-08-25 21:02:58 +00:00
< li > < a href = "#move_back" > Send to Back< span class = "shortcut" > ⌘⇧↓< / span > < / a > < / li >
2012-05-17 22:50:00 +00:00
< / ul >
2020-08-05 00:50:03 +00:00
< div class = "tools_flyout" id = "tools_shapelib" >
< div id = "shape_buttons" > < / div >
< / div >
2020-08-02 10:26:22 +00:00
<!-- build:js all.js -->
< script type = "text/javascript" src = "js/lib/jquery-3.5.1.min.js" > < / script >
< script type = "text/javascript" src = "js/lib/pathseg.js" > < / script >
< script type = "text/javascript" src = "js/lib/jquery.hotkeys.min.js" > < / script >
< script type = "text/javascript" src = "js/lib/jquery.jgraduate.js" > < / script >
< script type = "text/javascript" src = "js/lib/jquery.contextMenu.js" > < / script >
< script type = "text/javascript" src = "js/lib/jquery-ui-1.8.17.custom.min.js" > < / script >
2021-01-18 15:35:26 +00:00
< script type = "text/javascript" src = "js/lib/jquery-draginput.js" > < / script >
2021-01-17 02:49:34 +00:00
< script type = "text/javascript" src = "js/jquery.attr.js" > < / script >
< script type = "text/javascript" src = "js/utils.js" > < / script >
< script type = "text/javascript" src = "js/dao.js" > < / script >
< script type = "text/javascript" src = "js/state.js" > < / script >
< script type = "text/javascript" src = "js/sanitize.js" > < / script >
2020-08-02 10:26:22 +00:00
< script type = "text/javascript" src = "js/browser.js" > < / script >
< script type = "text/javascript" src = "js/svgutils.js" > < / script >
< script type = "text/javascript" src = "js/history.js" > < / script >
< script type = "text/javascript" src = "js/select.js" > < / script >
< script type = "text/javascript" src = "js/path.js" > < / script >
2021-01-17 02:49:34 +00:00
< script type = "text/javascript" src = "js/sanitize.js" > < / script >
< script type = "text/javascript" src = "js/units.js" > < / script >
< script type = "text/javascript" src = "js/math.js" > < / script >
< script type = "text/javascript" src = "js/translate.js" > < / script >
< script type = "text/javascript" src = "js/svgtransformlist.js" > < / script >
< script type = "text/javascript" src = "js/draw.js" > < / script >
2020-08-02 10:26:22 +00:00
< script type = "text/javascript" src = "js/svgcanvas.js" > < / script >
2021-01-17 02:49:34 +00:00
< script type = "text/javascript" src = "js/editor.js" > < / script >
2021-01-18 15:35:26 +00:00
< script type = "text/javascript" src = "js/Canvas.js" > < / script >
< script type = "text/javascript" src = "js/Panel.js" > < / script >
2021-01-17 02:49:34 +00:00
< script type = "text/javascript" src = "js/Rulers.js" > < / script >
< script type = "text/javascript" src = "js/Toolbar.js" > < / script >
< script type = "text/javascript" src = "js/Menu.js" > < / script >
2021-01-18 15:35:26 +00:00
< script type = "text/javascript" src = "js/Keyboard.js" > < / script >
2021-01-26 23:07:55 +00:00
< script type = "text/javascript" src = "js/PaintBox.js" > < / script >
< script type = "text/javascript" src = "js/Palette.js" > < / script >
2021-01-17 02:49:34 +00:00
< script type = "text/javascript" src = "js/start.js" > < / script >
< script type = "text/javascript" src = "js/fonts.js" > < / script >
< script type = "text/javascript" src = "js/dialog.js" > < / script >
< script type = "text/javascript" src = "js/contextChanged.js" > < / script >
< script type = "text/javascript" src = "js/zoomChanged.js" > < / script >
< script type = "text/javascript" src = "js/exportHandler.js" > < / script >
< script type = "text/javascript" src = "js/elementChanged.js" > < / script >
< script type = "text/javascript" src = "js/elementTransition.js" > < / script >
< script type = "text/javascript" src = "js/bindCanvas.js" > < / script >
2020-08-02 10:26:22 +00:00
< script type = "text/javascript" src = "js/lib/contextmenu.js" > < / script >
2020-12-10 22:09:53 +00:00
< script type = "text/javascript" src = "js/lib/jpicker.min.js" > < / script >
2020-08-02 10:26:22 +00:00
< script type = "text/javascript" src = "js/lib/mousewheel.js" > < / script >
< script type = "text/javascript" src = "js/eyedropper.js" > < / script >
< script type = "text/javascript" src = "js/shapes.js" > < / script >
< script type = "text/javascript" src = "js/grid.js" > < / script >
< script type = "text/javascript" src = "js/lib/requestanimationframe.js" > < / script >
< script type = "text/javascript" src = "js/lib/taphold.js" > < / script >
< script type = "text/javascript" src = "js/lib/filesaver.js" > < / script >
2020-08-05 02:30:45 +00:00
< script type = "text/javascript" src = "js/paste.js" > < / script >
2020-08-02 10:26:22 +00:00
<!-- endbuild -->
2012-05-17 22:50:00 +00:00
< / body >
< / html >
2020-08-02 10:26:22 +00:00
