Draw elements
Review of elements drawing tasks and options
This category contains 20 showcases
Play all Draw elements showcases continuously
Drawing circle, cubic and quadratic arcs
Arcs
Showcase steps
- Click circle arc icon.
- Click circle arc start point
- Click circle arc end point
- Click circle arc middle point
- Click cubic arc icon.
- Click cubic arc start point.
- Click cubic arc end point.
- Click the control point at the origin of the arc.
- Click the control point at the end of the arc.
- Click quadratic arc icon.
- Click arc start point.
- Click arc end point.
- Click the control point at the origin of the arc.
- Edit arc
Drawing with point capture to connect elements
Draw with point capture
Showcase steps
- Activate point capture mode.
- Draw a line.
- Move the cursor to a point.Wait highlight circle and click on it.
- Select another element.
- Move the point to near another one.
- The merge points function is enabled.Click on the circle to merge points.
- Point capture is available on all geometric drawing tasks.
Choosing and drawing emoji icons
Emoji
Showcase steps
- Open Shapes menu.
- Click the Emojis icon in the Shapes menu.
- Select the Faces category.
- Click the 'thinking face' emoji.
- Click select.
- Click the first corner of the emoji.
- Select the Nature category.
- Click the 'water buffalo' emoji.
- Enter the lion key word. Select the 'lion face' suggested emoji.
- Select "lion face" emoji.
- Click New Emoji to re-draw "lion face".
Choosing and drawing FontAwesome icons
Font Awesome icon
Showcase steps
- Click the Font Awesome icon in the Shapes menu.
- Select the search mode to find an icon by its label.
- Enter a label word
- Select the label in the list containing the word.
- Click Select.
- Click the first corner of the icon.
- Click the opposite corner of the icon.The size is adjusted to the proportions of the icon.
- Set the fill color of the icon.
- Click to draw the icon again.
- Use index for alphabetical search.
- Choose from the list of ordered labels.
- Switch from one page to another.
- Click on the icon.
- Activate the grid to fix the coordinates and dimensions of the drawn icons.
- Edit icon properties.
- Check x coordinate.
- Check width.
Drawing free paths smoothed or not
Free path
Showcase steps
- Click the Free Path icon in the Elements menu.
- Press the mouse button down on the first point.Then move the mouse to draw the path.
- Release the mouse button on the last point.
- Click Many to activate repetitive drawing mode.
- Disable path smoothing
- Enable path smoothing
- Select smoothing factor
Drawing horizontal, vertical and oblique lines
Horizontal and vertical lines
Showcase steps
- Click Horizontal icon.
- Click first point.
- Click second point.
- Click Vertical icon.
- Click Line icon.
Drawing paths with horizontal and vertical lines
Horizontal and vertical path
Showcase steps
- Click the Path icon in the Elements menu.
- Click the first point of the path.
- Select the Horizontal command.
- Close the path.
- Finish.
Drawing images
Image
Showcase steps
- Click the Image icon in the Elements menu.
- Click the top left corner of the image.
- Click the 'Load image file..' icon.
- Dialog to select and load an image file on your computer.
- Click the Properties icon.
- Change the URL of the image.
- Click Close.
- Click the 'Edit geometry' icon.
- Move the position of the image.
- Move the sizing point of the image.
- Click the 'Upload and encode' icon.
- This dialog load the HTTP URL referenced by the element, then encode its content as a data URI to set the href attribute of the image element.
- Click OK.
- The href attribute contains an encoded image.
- Click Close.
Drawing lines
Line
Showcase steps
- Click the Line icon in the Elements menu.
- First method:Press the mouse button on the first point.
- Release the button on the second point.
- Second method:Click the first point.
- Click the second point.
- Move a point.
- Set the stroke style.
- Click the palette icon to set the stroke color.
- Click a color, or define it with RGB/HSV values.
- Select the color rectangle to apply.
- Set the dash style.
- Set the stroke width
- Apply a gradient
- Set the marker style
Insert and edit a Google Map in your SVG drawing
Map
Showcase steps
- Click the Map icon in the Elements menu.
- Click the first corner of the map.
- Click the opposite corner of the map.
- Type the adresse of the map location.
- Click the Search button.
- Click the OK button.
- Resize the map.
- Edit the map location.
- Click the OK button to update the image map.
Drawing paths with curves
Path with curves
Showcase steps
- Click the Path icon in the Elements menu.
- Click the first point of the path.
- Select the Circle arc command.
- Click the end point of the arc.
- Click the middle point of the arc.
- Select the Cubic arc command.
- Click the end point of the cubic arc.
- Click the direction point of the tangent at the origin.
- Click the direction point of the tangent at the extremity.
- Close the path.
- Finish.
Drawing paths with holes
Path with a hole
Showcase steps
- Open the Elements menu.
- Click the Path icon in the Elements menu.
- Click the first point of the path.
- Move the menu.
- Click the Close icon.
- Change to moveto command to open a new contour.
- Click the first point of the second contour.
- Close the second contour.
- Finish.
- Click the Properties icon.
- Set the fill rule to evenodd.
- Click Close.
- Set the fill style of the path.
Drawing polylines
Polyline
Showcase steps
- Click the Polyline icon in Elements menu.
- Click first point
- Click next points
- Click the remove last point icon to redraw the point.
- Click the finish icon.
- Move drawn points
- Click new polyline icon to draw another polyline.
- Copy the polyline
- Move the copy
- Change stroke style
Drawing rectangles
Rectangle
Showcase steps
- Click the Rectangle icon in the Elements menu.
- First method:Press the mouse button on the first corner.
- Release the mouse button on opposite corner.
- Second method:Click the first corner.
- Click the opposite corner.
- Resize the rectangle.
- Move the origin without changing the dimensions.
- Set the fill style.
- Set the fill color.
- Set the stroke style.
- Set the stroke width.
- Apply a gradient.
- Apply a pattern.
Drawing multiple objects with the same task in repeating mode
Repetitive drawing
Showcase steps
- Click Many to activate drawing repetitive mode.
- Drawing repetitive tasks are marked with the star symbol.
- Click a task with star icon.
- Draw first object
- Set fill style.
- Draw next object.
- Click select icon.
- Select an object to edit.
- Click One to deactivate drawing repetitive mode
- Draw an object and edit it.
- Reactivate drawing repetitive mode.
Drawing cataloged shapes and icons
Shapes
Showcase steps
- Open the Shapes menu.
- Select a shape from the Arrows list.
- Click the first corner of the shape.
- Click the opposite corner of the shape.
- Define the fill style of the drawn shape.
- Select a Shape from the Flowcharts list.
- Select a Shape from the Symbols list.
- Click the Catalog icon in the Shapes menu.
- Viewing the shapes of the list 'Icons solid'.
- Select a shape.
- Select a shape from 'IcoMoon-Free-master' list.
- Select a Shape from 'Flat-color-icons' list.
- Re-draw last shape.
Drawing cataloged symbols
Symbols
Showcase steps
- Click symbol catalog icon in Shapes menu
- The default symbol catalog contains svg icons from icons8
- Select a symbol
- Click upper left and bottom right corners
- Repeat action
- Click Choose symbol icon to change the drawn symbol
- Select the symbol to draw
- Drawing shapes from the other catalogs add symbols
- Select Flat-color-icons collection
- Select an icon
- The symbol of the drawn icon
- Select emoji catalog
- Select an emoji
- The symbol of the drawn emoji
- Select Fontawesome catalog
- Select an icon
- The symbol of the drawn icon
Draw elements with grid snapping
Using a grid
Showcase steps
- Click the Grid icon in the Document menu.
- The grid can be displayed and can project the clicked points on its anchor points.
- Set the grid unit.
- Select the check box to display the grid.
- Select the check box to enable the grid.
- Click OK.
- Draw a rectangle.
- Click the first corner of the rectangle near a grid spot.
- Click the opposite corner.
- Edit the shape properties.
- Click the geometry tab.
- The coordinates are adjusted to the input grid.
- Click Close.
- The grid also controls the modification of points.
- Click Close.
- Change the grid style.