Quick start

Quick start drawing SVG elements
This category contains 7 showcases

Play all Quick start showcases continuously

Quick start drawing arcs

Drawing all types of arcs (circles, cubics, quadratics)

×

Showcase steps

  1. Set arcs stroke style.
  2. Select dash style.
  3. Set stroke width.
  4. Set stroke color.
  5. Select a color from the palette.
  6. Apply it.
  7. Open Elements menu.
  8. Click circle arc icon to draw.
  9. Click start and end points of the arc.
  10. Click arc middle point.
  11. Click cubic arc icon to draw.
  12. Click start and end points of the arc.
  13. Click start control point.
  14. Click end control point.
  15. Click quadratic arc icon to draw.
  16. Click start and end points of the arc.
  17. Click middle control point.
  18. Select arc to move each points.

Play
Quick start drawing images

Drawing all types of images (URL, encoded, map, SVG)

×

Showcase steps

  1. Click image icon to draw.
  2. Draw the image by upper leftand lower right corners.
  3. Edit image properties.
  4. Change Href property to a valid image URL.
  5. Close the properties panel.
  6. Copy the image.
  7. Move the copied image.
  8. Click Upload and encode PNG image.
  9. See image download.
  10. Click OK.
  11. Click Map icon to draw.
  12. Enter location map.
  13. Click search.
  14. Click OK.
  15. Click SVG icon to draw.
  16. Click Load SVG content..
  17. Choose the SVG source type.
  18. View to check the SVG URL
  19. Click Load.
  20. Set SVG size and position.

Play
Quick start drawing lines

Drawing all types of lines (oblique, vertical, horizontal, polylines)

×

Showcase steps

  1. Set lines stroke style.
  2. Set stroke width.
  3. Set stroke color.
  4. Select a color from the palette.
  5. Apply it.
  6. Open Elements menu.
  7. Click line icon to draw.
  8. Click vertical icon to draw.
  9. Click horizontal icon to draw.
  10. Click polyline icon to draw.
  11. Click Finish.
  12. Select line to move each point.

Play
Quick start drawing paths

Drawing all types of paths (free, composite, hole, curves, smooth surfaces)

×

Showcase steps

  1. Enable draw repetitive mode to draw more than one free path.
  2. Click free path icon to draw.
  3. Press the mouse button on the path start pointthen move the mouse and release it on the extremity.
  4. Disable draw repetitive mode.
  5. Click path icon to draw.
  6. Click path start pointthen select segment type to compose the path.
  7. Select circle arc segment type.
  8. Select line segment type.
  9. Close the contour.
  10. Click finish.
  11. Draw another path with a hole.
  12. Select horizontal line segment type.Then on the next clicked point it will switch to vertical line.
  13. Close the contour.
  14. Start a new contour inside the first.
  15. Click finish.
  16. Edit path properties.
  17. Change fill rule property to evenodd.
  18. Click cubic curve icon to draw.
  19. Click cubic smooth surface to draw.

Play
Quick start drawing shapes

Drawing all types of shapes (arrows, flow charts, symbols, emojis, font Awesome icons)

×

Showcase steps

  1. Open Shapes menu.
  2. Click an arrow shape to draw it.
  3. Draw the shape by upper leftand lower right corners.
  4. Set shape fill style.
  5. Fill the shape by a gradient.
  6. Click a flow charts shape to draw it.
  7. Click a symbol shape to draw it.
  8. Open shape catalog.
  9. Select flat color icons library.
  10. Click alarm clock.
  11. Open Emoji catalog.
  12. Select alien emoji
  13. Open font Awesome catalog.
  14. Enter icon label to draw.
  15. Select camera
  16. Set shape fill style.
  17. Apply selected color.
  18. Align shapes by center.
  19. Move shapes

Play
Quick start drawing surfaces

Drawing all types of surfaces (rectangles, circles, ellipses, triangles, polygons)

×

Showcase steps

  1. Select a color from the palette.
  2. Apply it.
  3. Open Elements menu.
  4. Click Rect icon to draw a rectangle.
  5. Draw the rectangle by upper leftand lower right corners.
  6. Click Circle icon to draw.
  7. Click Ellipse icon to draw.
  8. Click Triangle icon to draw.
  9. Click Polygon icon to draw.
  10. Click Finish.
  11. Select rectangle to move each corners.

Play
Quick start drawing texts

Drawing all types of texts (simple, multi lines, paths, styled)

×

Showcase steps

  1. Set text style.
  2. Set font size.
  3. Open Elements menu.
  4. Click text icon to draw.
  5. Click text position.
  6. Draw another text.
  7. Select a path to draw a text on it.
  8. Click add text path action.
  9. Click text path alignment action.
  10. Set text path offset.
  11. Set text style.
  12. Set font family.
  13. Set style italic.
  14. Set text fill style.
  15. Fill the text with a gradient.
  16. Set text stroke style.
  17. Set text stroke width.
  18. Set text stroke color.
  19. Select a text element.
  20. Click the select text action to select the whole text.
  21. Click select icon.
  22. Select text words.
  23. Add bullets.
  24. Select a word to apply a style on it.
  25. Select Bold.
  26. Change text color.
  27. Apply the selected color.

Play