Edit definitions

Editing SVG definitions (patterns, gradients, markers, symbols, filters)
This category contains 8 showcases

Play all Edit definitions showcases continuously

Create gradients

Using the gradient editor

×

Showcase steps

  1. Create a linear gradient to apply to this shape.
  2. Click the Gradient Customize icon in the Fill style menu.
  3. Dialog box to create and modify gradient definitions.
  4. Click the Add linear gradient icon.
  5. Click the color rectangle of the first stop elementto change its color.
  6. Click the color rectangle to apply the selected color.
  7. Click the Stops Add icon to add a stop element.
  8. Click the Up icon to move the stop before its previous color.
  9. Adjust the color offset.
  10. Edit the ID of the gradient.
  11. Click OK.
  12. Create a radial gradient to apply to this shape.
  13. Click the Add radial gradient icon.
  14. Click OK.

Play
Create markers

Using the marker editor

×

Showcase steps

  1. Click the Grid icon in the Document menu.
  2. Set the grid parameters to adjust the drawing elements of markers.
  3. Select the check boxes to display and enable the grid,then enter the grid unit.
  4. Click OK.
  5. Zoom in to the drawing area of the marker.
  6. Draw a marker with two circles.
  7. Select the two circles to define the marker.
  8. Click the Define marker icon in the Selection menu.
  9. The maker is defined with the selected elements.The parameters are calculated by default.The units is set to 'strokeWidth'.You can change them.
  10. Click OK.
  11. Zoom out to the original view.
  12. Quit editors.
  13. Select the polyline to apply the marker to all vertices.
  14. Click the Choose marker icon in the Start pane.
  15. Select the marker type.
  16. Click the Customize marker icon in the Mid pane.
  17. Select the marker type.
  18. Click OK.
  19. Click the Customize marker icon in the End pane.
  20. Select the marker type.
  21. Click OK.
  22. Click the Properties icon.
  23. Change the stroke width.The marker's drawing size will change.
  24. Click Close.
  25. The drawing size of the marker depends on the line thickness.
  26. Customize the marker properties to apply it to the second polyline.
  27. Select the Marker tab.
  28. Click the Customize Start marker.
  29. Make a copy of the marker.
  30. Change the fill color.
  31. Apply the selected color.
  32. Set units to 'userSpaceOnUse'.
  33. Increase the marker's drawing size as a percentage.
  34. Click OK.
  35. Apply the custom marker to intermediate points.
  36. Apply the custom marker to the last point.
  37. Change the stroke width.The marker's drawing size will not change.
  38. Click Close.
  39. The drawing size of the marker is fixed.

Play
Create patterns

Using the pattern editor

×

Showcase steps

  1. Click the Grid icon in the Document menu.
  2. Set the grid parameters to adjust the drawing elements of patterns.
  3. Select the check boxes to display and enable the grid.
  4. Click OK.
  5. Zoom in to the drawing area where you will draw the pattern.
  6. Draw the background rectangle of the pattern.
  7. Set the stroke style of the rectangle to Transparent.
  8. Choose the fill color of the background rectangle.
  9. Draw the pattern with as a polygon.
  10. Set the fill color of the polygon.
  11. Select the rectangle and the polygon to define the pattern.
  12. Click Define Pattern icon in the Selection menu.
  13. The pattern is defined with the selected elements.The parameters are calculated by default.You can change them.
  14. Click OK.
  15. Zoom out to the original view.
  16. Select this shape to apply the created pattern.
  17. Click the Choose Pattern icon in the Fill style menu.
  18. Click the pattern.
  19. Select the drawn elements to define a new pattern.
  20. Set the pattern units to objectBoundingBox.
  21. Set the width and height valuesas a percentage of the object's dimensions.
  22. Click OK.
  23. Select the last created pattern.
  24. Click OK.
  25. Modify the pattern again to adjust the filling of the object.
  26. Change the 'MeetOrSlice' parameter to slice the valueto completely fill the object.
  27. The proportions are no longer respected.But the pattern is extended in height to cover the entire object.
  28. Draw the next pattern.
  29. Draw an arrow.
  30. Click OK.
  31. Apply the last created pattern.
  32. Click OK.
  33. Remove the stroke color.
  34. Click Close.
  35. Turn off the grid.

Play
Create symbols

Creating symbols with the symbol editor

×

Showcase steps

  1. Select the drawing elements of the symbol to define
  2. Click Define symbol icon in the Selection menu
  3. The symbol is defined with the selected elements.The parameters are calculated by default.You can change them.
  4. Set symbol ID
  5. Click OK
  6. Click Symbol catalog icon in Shapes menu
  7. Select the symbol to draw
  8. Repeat action
  9. Change symbol

Play
Customize symbols

Customize symbols, change and remove colors

×

Showcase steps

  1. Select a use element to customize its symbol
  2. Click Edit symbol icon
  3. Make a copy of the symbol
  4. Set its ID
  5. Select the element to change its color
  6. Change its fill color
  7. Select a color
  8. Apply the selected color
  9. Click OK
  10. Remove the colors from the symbolTo style it with the color of the use element
  11. Remove fill color
  12. Click OK
  13. Set the fill color of the use element

Play
Import SVG symbols

Creating symbols by SVG import

×

Showcase steps

  1. Click Import symbol icon in the Document menu
  2. Select the source of the SVGThis showcase uses a drawsvg sample
  3. Click Load
  4. The symbol is defined with the SVG elements.The parameters are calculated by default.You can change them.
  5. Click OK
  6. Click Symbol catalog int the Shapes menu
  7. Select the imported symbol

Play
Import definitions

Import definitions (patterns, gradients, symbols, markers, filters) from another SVG document

×

Showcase steps

  1. Click Import definitions in document menu
  2. Select the SVG that contains definitions to import
  3. The showcase load a drawsvg sample
  4. Click Load
  5. The dialog list definitions of the SVGThe loaded SVG has 5 symbolsSelect definitions to import
  6. Click Import
  7. Draw imported symbols

Play
Refactor symbols

Refactor symbols 
Refactor use element as group to update symbol content and create new one.

×

Showcase steps

  1. Select use element
  2. Copy the use element to refactor it
  3. Click Refactor to group in Selection menu
  4. The use element is group refactored with the symbol contents
  5. Add rectangle to symbol content
  6. Select rectangle and group
  7. Click Define symbol icon
  8. Enter symbol id
  9. Click OK
  10. Apply the created symbol to the use element
  11. Add a triangle to this symbol
  12. Cick Refactor to group icon in Selection menu
  13. Draw a triangle inside symbol content
  14. Select triangle and group
  15. Click Define symbol icon
  16. Click OK
  17. Apply created symbol

Play