{"unitKey":"PIXEL","unitValue":1,"drawingScale":1,"findAllElementAtPoint":1,"optimizeZoom":false,"mantainAspectRatio":true,"interactionLabelVisibility":true,"svgAlignmentPreserveAspectRatio":"xMidYMin slice","snap":{"distance":10,"offsetDistance":50,"snapToPoints":true,"snapToContour":true,"snapToPerpendicular":true,"snapToTangent":true,"snapToIntersection":true,"snapToCenter":true,"snapToGrid":true,"snapToOffset":true,"snapToAngles":true,"snapAngleList":[30,45],"useSmartPoints":true,"useSmartGuides":true},"fixedDecimals":0,"rulersVisibility":false,"gridVisibility":false,"elementOriginVisibility":false,"gridStep":1,"origin":{"x":0,"y":0},"selectMainNodes":true,"scaleStrokeAndEffects":true,"scaleText":true,"moveStep":1,"rotateStep":45} toolshomepanelsmenussvg+codepurchaseVector Graphics EditorCreate and Edit SVG onlineENESFRDEITENESFRDEIT {"unitKey":"PIXEL","unitValue":1,"drawingScale":1,"findAllElementAtPoint":1,"optimizeZoom":false,"mantainAspectRatio":true,"interactionLabelVisibility":true,"svgAlignmentPreserveAspectRatio":"xMidYMin slice","snap":{"distance":10,"offsetDistance":50,"snapToPoints":true,"snapToContour":true,"snapToPerpendicular":true,"snapToTangent":true,"snapToIntersection":true,"snapToCenter":true,"snapToGrid":true,"snapToOffset":true,"snapToAngles":true,"snapAngleList":[30,45],"useSmartPoints":true,"useSmartGuides":true},"fixedDecimals":0,"rulersVisibility":false,"gridVisibility":false,"elementOriginVisibility":false,"gridStep":1,"origin":{"x":0,"y":0},"selectMainNodes":true,"scaleStrokeAndEffects":true,"scaleText":true,"moveStep":1,"rotateStep":45} Inspect and edit the properties of SVG elements such as: position, rotation, size, stroke and fill.svg inspector properties - edit svg properties online The properties panel for a selected element with mask shows the buttons that allow you to: - Edit the content and the mask on an isolated layer. - Remove the clipping mask.Mask propertiesThe group of buttons at the top right of the janvas user interface shows the panels and properties related to the document and the current page. Clicking the "Library" button will open the "Library" window. The "Library" window contains different categories of elements: colors, shades, patterns, shapes, symbols, markers, etc. Clicking on the "Pages" button will display the panel with the list of the document pages. By clicking on the "Layers" button, the window with the list of layers on the page will open. Clicking the "Snap" button will display a panel with the list of document snap properties. Clicking on the "Settings" button will display a panel with the list of the general properties of the document.librarylayerspagesdocument settingssnap settingsPanels and properties of the documentThe properties panel for a selected symbol shows the field relative to its ID. The buttons allow you to: - Create a new symbol by duplicating it. - Edit the symbol on an isolated layer. - Expand the geometry in the current page layer.Symbol propertiesThe Pages Panel lists all the pages contained in the document. Select a page by clicking on it. The bar at the top of the panel shows the buttons for: - Adding a new page to the document. - Deleting the selected page. - Move the selected page down the list. - Move the selected page up the list. The last icon in the toolbar shows a menu for the magagement of the pages. - Duplicate pages Duplicates the selected pages. - Copy pages copies the selected pages. - Cut pages copies and cuts the selected pages. - Paste pages pastes the pages previously copied from a document. - Import pages imports the pages of a previously saved document. toolbarpage listPage listThe layers panel shows the list of layers present on the current page. By clicking on the "eye" icon you can choose to hide a layer or not. By clicking on the "padlock" icon you can choose to lock a layer or not. When a graphic element in the page is selected, the layer it belongs to is automatically selected The bar at the top of the panel shows the buttons for: - Adding a new layer. - Deleting the selected layer. - Moving the selected layer up the list. - Moving the selected layer down the list. - Moving the selected graphic elements within the layer currently selected.Layer listtoolbarlayer listWhen a graphic element placed on the page is selected, the inspector panel displays its properties. For example, selecting a rectangle will display the properties: position, size, rotation, fill and stroke color, etc.The set of properties are displayed based on the type of item selected. For example, if you click on the page, the inspection panel will show the properties of the page.The properties inspector panelpage formats listpage sizePage propertiesThe Inspector properties show the size of the current page. There is a drop-down menu with some standard page sizes already set up. The check box "apply to all page" allows you to apply the same settings to all other pages of the document.The "Snap Properties" panel contains a series of check boxes that enable or disable snaps. Snaps allow you to align objects more precisely thanks to the magnet effect activated by the points that form the geometric elements, the midpoints, the intersections and the grid. In addition to the snaps already described there are smart points and smart guides. These snaps are activated by dwelling on the vertices and linear segments for a few thousandths of a second. The parameters present in the panel define: snap distance Value in pixels that defines the distance of attraction of the pointer. snap grid step Value that defines the step of the grid. snap angles Angular values to which the pointer will have to align near the indicated angles. offset Offset value that, through smart guides, will be used as a snap to a linear segment.Snaps panelThe Document Settings Panel allows you to set the unit of measurement, the drawing scale and other properties: - Unit of measure - Number of decimals to be displayed in the numeric data display. - Drawing scale There are checkboxes to enable / disable behaviors related to: - Resize line weight and effects when resizing a graphic element - Resize text when you resize a text box element - Show linear rulers - Show size labels - Optimize the zoom - Shows the origin of the element - Show document grid - Select the main nodes There are properties related to: - Step value used to move the selection with the arrow keys - Angle value used to rotate the selection using the arrow keys + ALT key - SVG alignment to define the way used by the browser to align the svg document.Document settingsfilling typesFill and Stroke"Fill" and "Stroke" can be set with 4 fill types: "none", "color", "gradient" or "pattern". These coloring types can be assigned from the menu (see image below) or by clicking on the fill type icons. The last icon is for swapping the stroke and fill properties.StrokeFillAppearance panelThe "Appearance" panel shows the transparency and blending mode. The "opacity" parameter defines the level of transparency to be applied to the entire graphic element. The first drop-down menu defines the blending mode. From the second drop-down menu it is possible to set whether the stroke should be drawn over the fill or vice versa and if the markers should be drawn over the stroke or vice versa.AppearanceStroke propertiesThe "Stroke" property panel shows the "thickness" property of the stroke. The "no stroke scaling" checkbox allows you to choose whether the line should keep its thickness regardless of whether the page is zoomed or the graphic is scaled. There are the properties of the stroke and bevel closure styles.StrokeDash line style propertiesFrom the "Dash Style" panel, you can set the dashed line of the stroke. You can set a dashed line from the dash stroke list. The style of the dashed line can be changed by changing the "dash / gap" fields. The "dash offset" property defines the offset of the start of the dashed line.Stroke dash styleColor styleBy clicking on the fill or stroke icon, when the coloring type is "Color", you can change the color and transparency from the "Color Picker" panel.color styleGradient styleBy clicking on the fill or stroke icon, when the color type is "Gradient", the gradient properties panel will appear where you can change the gradient properties Gradients are assigned by reference. The "Duplicate" button allows you to duplicate the current gradient.