Edit definitions
Editing SVG definitions (patterns, gradients, markers, symbols, filters)
This category contains 8 showcases
Play all Edit definitions showcases continuously
Using the gradient editor
×
Showcase steps
- Create a linear gradient to apply to this shape.
- Click the Gradient Customize icon in the Fill style menu.
- Dialog box to create and modify gradient definitions.
- Click the Add linear gradient icon.
- Click the color rectangle of the first stop elementto change its color.
- Click the color rectangle to apply the selected color.
- Click the Stops Add icon to add a stop element.
- Click the Up icon to move the stop before its previous color.
- Adjust the color offset.
- Edit the ID of the gradient.
- Click OK.
- Create a radial gradient to apply to this shape.
- Click the Add radial gradient icon.
- Click OK.
Using the marker editor
×
Showcase steps
- Click the Grid icon in the Document menu.
- Set the grid parameters to adjust the drawing elements of markers.
- Select the check boxes to display and enable the grid,then enter the grid unit.
- Click OK.
- Zoom in to the drawing area of the marker.
- Draw a marker with two circles.
- Select the two circles to define the marker.
- Click the Define marker icon in the Selection menu.
- The maker is defined with the selected elements.The parameters are calculated by default.The units is set to 'strokeWidth'.You can change them.
- Click OK.
- Zoom out to the original view.
- Quit editors.
- Select the polyline to apply the marker to all vertices.
- Click the Choose marker icon in the Start pane.
- Select the marker type.
- Click the Customize marker icon in the Mid pane.
- Select the marker type.
- Click OK.
- Click the Customize marker icon in the End pane.
- Select the marker type.
- Click OK.
- Click the Properties icon.
- Change the stroke width.The marker's drawing size will change.
- Click Close.
- The drawing size of the marker depends on the line thickness.
- Customize the marker properties to apply it to the second polyline.
- Select the Marker tab.
- Click the Customize Start marker.
- Make a copy of the marker.
- Change the fill color.
- Apply the selected color.
- Set units to 'userSpaceOnUse'.
- Increase the marker's drawing size as a percentage.
- Click OK.
- Apply the custom marker to intermediate points.
- Apply the custom marker to the last point.
- Change the stroke width.The marker's drawing size will not change.
- Click Close.
- The drawing size of the marker is fixed.
Using the pattern editor
×
Showcase steps
- Click the Grid icon in the Document menu.
- Set the grid parameters to adjust the drawing elements of patterns.
- Select the check boxes to display and enable the grid.
- Click OK.
- Zoom in to the drawing area where you will draw the pattern.
- Draw the background rectangle of the pattern.
- Set the stroke style of the rectangle to Transparent.
- Choose the fill color of the background rectangle.
- Draw the pattern with as a polygon.
- Set the fill color of the polygon.
- Select the rectangle and the polygon to define the pattern.
- Click Define Pattern icon in the Selection menu.
- The pattern is defined with the selected elements.The parameters are calculated by default.You can change them.
- Click OK.
- Zoom out to the original view.
- Select this shape to apply the created pattern.
- Click the Choose Pattern icon in the Fill style menu.
- Click the pattern.
- Select the drawn elements to define a new pattern.
- Set the pattern units to objectBoundingBox.
- Set the width and height valuesas a percentage of the object's dimensions.
- Click OK.
- Select the last created pattern.
- Click OK.
- Modify the pattern again to adjust the filling of the object.
- Change the 'MeetOrSlice' parameter to slice the valueto completely fill the object.
- The proportions are no longer respected.But the pattern is extended in height to cover the entire object.
- Draw the next pattern.
- Draw an arrow.
- Click OK.
- Apply the last created pattern.
- Click OK.
- Remove the stroke color.
- Click Close.
- Turn off the grid.
Creating symbols with the symbol editor
×
Showcase steps
- Select the drawing elements of the symbol to define
- Click Define symbol icon in the Selection menu
- The symbol is defined with the selected elements.The parameters are calculated by default.You can change them.
- Set symbol ID
- Click OK
- Click Symbol catalog icon in Shapes menu
- Select the symbol to draw
- Repeat action
- Change symbol
Customize symbols, change and remove colors
×
Showcase steps
- Select a use element to customize its symbol
- Click Edit symbol icon
- Make a copy of the symbol
- Set its ID
- Select the element to change its color
- Change its fill color
- Select a color
- Apply the selected color
- Click OK
- Remove the colors from the symbolTo style it with the color of the use element
- Remove fill color
- Click OK
- Set the fill color of the use element
Creating symbols by SVG import
×
Showcase steps
- Click Import symbol icon in the Document menu
- Select the source of the SVGThis showcase uses a drawsvg sample
- Click Load
- The symbol is defined with the SVG elements.The parameters are calculated by default.You can change them.
- Click OK
- Click Symbol catalog int the Shapes menu
- Select the imported symbol
Import definitions (patterns, gradients, symbols, markers, filters) from another SVG document
×
Showcase steps
- Click Import definitions in document menu
- Select the SVG that contains definitions to import
- The showcase load a drawsvg sample
- Click Load
- The dialog list definitions of the SVGThe loaded SVG has 5 symbolsSelect definitions to import
- Click Import
- Draw imported symbols
Refactor symbols
Refactor use element as group to update symbol content and create new one.
×
Showcase steps
- Select use element
- Copy the use element to refactor it
- Click Refactor to group in Selection menu
- The use element is group refactored with the symbol contents
- Add rectangle to symbol content
- Select rectangle and group
- Click Define symbol icon
- Enter symbol id
- Click OK
- Apply the created symbol to the use element
- Add a triangle to this symbol
- Cick Refactor to group icon in Selection menu
- Draw a triangle inside symbol content
- Select triangle and group
- Click Define symbol icon
- Click OK
- Apply created symbol