Draw elements

Review of elements drawing tasks and options
This category contains 20 showcases

Play all Draw elements showcases continuously

Arcs

Drawing circle, cubic and quadratic arcs

×

Showcase steps

  1. Click circle arc icon.
  2. Click circle arc start point
  3. Click circle arc end point
  4. Click circle arc middle point
  5. Click cubic arc icon.
  6. Click cubic arc start point.
  7. Click cubic arc end point.
  8. Click the control point at the origin of the arc.
  9. Click the control point at the end of the arc.
  10. Click quadratic arc icon.
  11. Click arc start point.
  12. Click arc end point.
  13. Click the control point at the origin of the arc.
  14. Edit arc

Play
Draw with point capture

Drawing with point capture to connect elements

×

Showcase steps

  1. Activate point capture mode.
  2. Draw a line.
  3. Move the cursor to a point.Wait highlight circle and click on it.
  4. Select another element.
  5. Move the point to near another one.
  6. The merge points function is enabled.Click on the circle to merge points.
  7. Point capture is available on all geometric drawing tasks.

Play
Emoji

Choosing and drawing emoji icons

×

Showcase steps

  1. Open Shapes menu.
  2. Click the Emojis icon in the Shapes menu.
  3. Select the Faces category.
  4. Click the 'thinking face' emoji.
  5. Click select.
  6. Click the first corner of the emoji.
  7. Select the Nature category.
  8. Click the 'water buffalo' emoji.
  9. Enter the lion key word. Select the 'lion face' suggested emoji.
  10. Select "lion face" emoji.
  11. Click New Emoji to re-draw "lion face".

Play
Font Awesome icon

Choosing and drawing FontAwesome icons

×

Showcase steps

  1. Click the Font Awesome icon in the Shapes menu.
  2. Select the search mode to find an icon by its label.
  3. Enter a label word
  4. Select the label in the list containing the word.
  5. Click Select.
  6. Click the first corner of the icon.
  7. Click the opposite corner of the icon.The size is adjusted to the proportions of the icon.
  8. Set the fill color of the icon.
  9. Click to draw the icon again.
  10. Use index for alphabetical search.
  11. Choose from the list of ordered labels.
  12. Switch from one page to another.
  13. Click on the icon.
  14. Activate the grid to fix the coordinates and dimensions of the drawn icons.
  15. Edit icon properties.
  16. Check x coordinate.
  17. Check width.

Play
Free path

Drawing free paths smoothed or not

×

Showcase steps

  1. Click the Free Path icon in the Elements menu.
  2. Press the mouse button down on the first point.Then move the mouse to draw the path.
  3. Release the mouse button on the last point.
  4. Click Many to activate repetitive drawing mode.
  5. Disable path smoothing
  6. Enable path smoothing
  7. Select smoothing factor

Play
Horizontal and vertical lines

Drawing horizontal, vertical and oblique lines

×

Showcase steps

  1. Click Horizontal icon.
  2. Click first point.
  3. Click second point.
  4. Click Vertical icon.
  5. Click Line icon.

Play
Horizontal and vertical path

Drawing paths with horizontal and vertical lines

×

Showcase steps

  1. Click the Path icon in the Elements menu.
  2. Click the first point of the path.
  3. Select the Horizontal command.
  4. Close the path.
  5. Finish.

Play
Image

Drawing images

×

Showcase steps

  1. Click the Image icon in the Elements menu.
  2. Click the top left corner of the image.
  3. Click the 'Load image file..' icon.
  4. Dialog to select and load an image file on your computer.
  5. Click the Properties icon.
  6. Change the URL of the image.
  7. Click Close.
  8. Click the 'Edit geometry' icon.
  9. Move the position of the image.
  10. Move the sizing point of the image.
  11. Click the 'Upload and encode' icon.
  12. 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.
  13. Click OK.
  14. The href attribute contains an encoded image.
  15. Click Close.

Play
Line

Drawing lines

×

Showcase steps

  1. Click the Line icon in the Elements menu.
  2. First method:Press the mouse button on the first point.
  3. Release the button on the second point.
  4. Second method:Click the first point.
  5. Click the second point.
  6. Move a point.
  7. Set the stroke style.
  8. Click the palette icon to set the stroke color.
  9. Click a color, or define it with RGB/HSV values.
  10. Select the color rectangle to apply.
  11. Set the dash style.
  12. Set the stroke width
  13. Apply a gradient
  14. Set the marker style

Play
Map

Insert and edit a Google Map in your SVG drawing

×

Showcase steps

  1. Click the Map icon in the Elements menu.
  2. Click the first corner of the map.
  3. Click the opposite corner of the map.
  4. Type the adresse of the map location.
  5. Click the Search button.
  6. Click the OK button.
  7. Resize the map.
  8. Edit the map location.
  9. Click the OK button to update the image map.

Play
Path with curves

Drawing paths with curves

×

Showcase steps

  1. Click the Path icon in the Elements menu.
  2. Click the first point of the path.
  3. Select the Circle arc command.
  4. Click the end point of the arc.
  5. Click the middle point of the arc.
  6. Select the Cubic arc command.
  7. Click the end point of the cubic arc.
  8. Click the direction point of the tangent at the origin.
  9. Click the direction point of the tangent at the extremity.
  10. Close the path.
  11. Finish.

Play
Path with a hole

Drawing paths with holes

×

Showcase steps

  1. Open the Elements menu.
  2. Click the Path icon in the Elements menu.
  3. Click the first point of the path.
  4. Move the menu.
  5. Click the Close icon.
  6. Change to moveto command to open a new contour.
  7. Click the first point of the second contour.
  8. Close the second contour.
  9. Finish.
  10. Click the Properties icon.
  11. Set the fill rule to evenodd.
  12. Click Close.
  13. Set the fill style of the path.

Play
Polyline

Drawing polylines

×

Showcase steps

  1. Click the Polyline icon in Elements menu.
  2. Click first point
  3. Click next points
  4. Click the remove last point icon to redraw the point.
  5. Click the finish icon.
  6. Move drawn points
  7. Click new polyline icon to draw another polyline.
  8. Copy the polyline
  9. Move the copy
  10. Change stroke style

Play
Rectangle

Drawing rectangles

×

Showcase steps

  1. Click the Rectangle icon in the Elements menu.
  2. First method:Press the mouse button on the first corner.
  3. Release the mouse button on opposite corner.
  4. Second method:Click the first corner.
  5. Click the opposite corner.
  6. Resize the rectangle.
  7. Move the origin without changing the dimensions.
  8. Set the fill style.
  9. Set the fill color.
  10. Set the stroke style.
  11. Set the stroke width.
  12. Apply a gradient.
  13. Apply a pattern.

Play
Repetitive drawing

Drawing multiple objects with the same  task in repeating mode

×

Showcase steps

  1. Click Many to activate drawing repetitive mode.
  2. Drawing repetitive tasks are marked with the star symbol.
  3. Click a task with star icon.
  4. Draw first object
  5. Set fill style.
  6. Draw next object.
  7. Click select icon.
  8. Select an object to edit.
  9. Click One to deactivate drawing repetitive mode
  10. Draw an object and edit it.
  11. Reactivate drawing repetitive mode.

Play
Shapes

Drawing cataloged shapes and icons

×

Showcase steps

  1. Open the Shapes menu.
  2. Select a shape from the Arrows list.
  3. Click the first corner of the shape.
  4. Click the opposite corner of the shape.
  5. Define the fill style of the drawn shape.
  6. Select a Shape from the Flowcharts list.
  7. Select a Shape from the Symbols list.
  8. Click the Catalog icon in the Shapes menu.
  9. Viewing the shapes of the list 'Icons solid'.
  10. Select a shape.
  11. Select a shape from 'IcoMoon-Free-master' list.
  12. Select a Shape from 'Flat-color-icons' list.
  13. Re-draw last shape.

Play
Shortcuts

Restart last drawing actions with the shortcut icons

×

Showcase steps

  1. Click on one of the last two drawing actions to restart it

Play
Symbols

Drawing cataloged symbols

×

Showcase steps

  1. Click symbol catalog icon in Shapes menu
  2. The default symbol catalog contains svg icons from icons8
  3. Select a symbol
  4. Click upper left and bottom right corners
  5. Repeat action
  6. Click Choose symbol icon to change the drawn symbol
  7. Select the symbol to draw
  8. Drawing shapes from the other catalogs add symbols
  9. Select Flat-color-icons collection
  10. Select an icon
  11. The symbol of the drawn icon
  12. Select emoji catalog
  13. Select an emoji
  14. The symbol of the drawn emoji
  15. Select Fontawesome catalog
  16. Select an icon
  17. The symbol of the drawn icon

Play
Triangle

Drawing triangles

×

Showcase steps

  1. Click Triangle icon.
  2. Click first point
  3. Click second point.
  4. Click third point.

Play
Using a grid

Draw elements with grid snapping

×

Showcase steps

  1. Click the Grid icon in the Document menu.
  2. The grid can be displayed and can project the clicked points on its anchor points.
  3. Set the grid unit.
  4. Select the check box to display the grid.
  5. Select the check box to enable the grid.
  6. Click OK.
  7. Draw a rectangle.
  8. Click the first corner of the rectangle near a grid spot.
  9. Click the opposite corner.
  10. Edit the shape properties.
  11. Click the geometry tab.
  12. The coordinates are adjusted to the input grid.
  13. Click Close.
  14. The grid also controls the modification of points.
  15. Click Close.
  16. Change the grid style.

Play