Next ❯SVG Clone and Group

Defines the graphic that is used for showing some more informative shapes

  • Marker are used only with <line> <path> <polyline> <polygon> (or can say, elements, used to create dynamic shapes)
  • Used to attach marker to the shapes
  • turned_in_notRelated Tag
    • <marker>
  • turned_in_notMarker Related Properties
    • marker-start : To add marker at start point
    • marker-mid : To add marker at mid points
    • marker-end : To add marker at end point
    • marker : To add same marker at start, mid and end points


Used to provide more information on a shape you draw


<marker id="anyId"
        preserveAspectRatio="none|(xMinYMin|xMidYMin|xMaxYMin|xMinYMid|xMidYMid|xMaxYMid|xMinYMax|xMidYMax|xMaxYMax  meet|slice)"
        viewBox="minX minY width height">
    <!--Your marker design-->
  • label_outlinemarker Attributes
    • id - To reference the marker
    • markerHeight - The height of marker
    • markerWidth - The width of marker
    • markerUnits - Specify the coordinate system for its attributes (Default : "strokeWidth")
    • refX, refY - The marker reference point along xy-axis (Default : "0")
    • orient - How marker elements are shown on any path or shape (Default : "0")
    • viewBox - Specify which portion of your coordinates are visible within the specified width and height
    • preserveAspectRatio - specify how an element with different aspect ratio provided by viewBox must fit into a viewport
<svg height="100" width="200">
    <!-- arrow marker design -->
    <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5"
        markerWidth="5" markerHeight="5" orient="auto">
      <path d="M0 0 L10 5 L0 10 L3 5 z" fill="red" fill-opacity="0.8" />
  <!-- adding marker to a shape or path -->
  <polyline points="20 20, 20 80, 80 80, 80 40" fill="none" stroke="black" stroke-width="3"

  • SVG Clone and Group
❮ Prev SVG Pattern
Next ❯SVG Clone and Group
TryOut Examples"Learn to Explore..!"

TryOut Editor