title
  
blank image

Draw elements

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

Play all Draw elements showcases continuously

Arcs
Drawing circle, cubic and quadratic arcs
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
Draw with point capture 

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
Drawing cubic Bézier curves
Demonstration of the five possibilities for drawing Bézier cubic curves with the two types of arcs (cubic C(p1, c1, c2, p2) and smooth cubic S(p1, c2, p2)):
  1. an arc defined by 4 points (origin p1, endpoint p2, control points of the tangents at the origin c1 and endpoint c2)
  2. an open curve defined by its vertices then smoothed by calculating the control points (c1,c2) of the cubic arcs.
  3. a closed curve defined by its vertices then smoothed by calculating the cubic arcs.
  4. an open curve defined by its vertices then smoothed by calculating the control points (c2) of the smooth cubic arcs. The curve starts with a cubic arc C(p1, c1, c2,p2) to fix the tangent at the origin. 
  5. a closed curve defined by its vertices then smoothed by calculating the control points (c2) of the smooth cubic arcs. The curve starts and ends with a cubic arc C(p1,c1,c2,p2) to fix the tangents at the origin and the end.
Drawing cubic Bézier curves 

Showcase steps

  1. Click on the cubic arc icon
  2. Click 4 points:Origin and end snap points (p1,p2)Tangent control point at the origin c1Tangent control point at the end c2
  3. Click on the cubic curve icon
  4. Click the vertices of the curveThe curve will then be smoothed with cubic arcs
  5. Click Finish
  6. Click on the closed cubic curve icon
  7. Click the vertices of the curveThe curve will be closed and smoothed
  8. Click Finish
  9. Click on the smooth cubic curve icon.Smooth cubic arcs have only one control point at the endpoint C2.The control point at the origin is determined to ensure continuity of the tangent with the preceding arc.
  10. Click the vertices of the curveThe curve will be smoothed with smooth cubic arcs if the continuity of the tangents can be respected
  11. Click on the closed smooth cubic curve icon
  12. Click the vertices of the curve
  13. Click Finish
  14. Finish
Play
Drawing quadratic Bézier curves
Demonstration of the five possibilities for drawing Bézier quadratic curves with the two types of arcs (quadratic Q(p1, c1, p2) and smooth quadratic T(p1, p2)):
  1. an arc defined by 3 points (origin p1, endpoint p2, control point c1 of the tangents at the origin and extremity)
  2. an open curve defined by its vertices then smoothed by calculating the control points (c1) of the quadratic arcs.
  3. a closed curve defined by its vertices then smoothed by calculating the quadratic arcs.
  4. an open curve defined by its vertices then smoothed by calculating the smooth quadratic arcs. The curve starts with a quadratic arc Q(p1, c1, p2) to fix the tangent at the origin. 
  5. a closed curve defined by its vertices then smoothed by calculating the smooth quadratic arcs. The curve starts and ends with a quadratic arc Q(p1,c1,p2) to fix the tangents at the origin and the end.
Drawing quadratic Bézier curves 

Showcase steps

  1. Click on the quadratic arc icon
  2. Click 3 points:Origin and end snap points (p1,p2)Control point c1
  3. Click on the quadratic curve icon
  4. Click the vertices of the curveThe curve will then be smoothed with quadratic arcs
  5. Click Finish
  6. Click on the quadratic closed curve icon
  7. Click the vertices of the curveThe curve will be closed and smoothed
  8. Click Finish
  9. Click the quadratic smooth curve icon
  10. Click the vertices of the curveThe curve will be smoothed with smooth quadratic arcsif the continuity of the tangents can be respected
  11. Click Finish
  12. Click the quadratic smooth closed curve icon
  13. Click the vertices of the curve
  14. Click Finish
  15. Finish
Play
Emoji
Choosing and drawing emoji icons
Emoji 

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
Font Awesome icon 

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
Free path 

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
Horizontal and vertical 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
Horizontal and vertical path 

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
Image 

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
Line 

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
Map 

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
Path 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
Path with a hole 

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
Polyline 

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
Rectangle 

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
Repetitive drawing 

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
Shapes 

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
Shortcuts 

Showcase steps

  1. Click on one of the last two drawing actions to restart it
Play
Symbols
Drawing cataloged symbols
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
Triangle 

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
Using a grid 

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