cubic.svg Example File

svgviewer/files/cubic.svg
<?xml version="1.0" standalone="no"?>
<svg width="10cm" height="10cm" viewBox="0 0 1000 1000"
     xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny">
  <title>Example cubic02 - cubic Bezier commands in path data</title>
  <desc>Picture showing examples of "C" and "S" commands,
        along with annotations showing the control points
        and end points</desc>

  <rect fill="none" stroke="blue" stroke-width="1" x="1" y="1" width="998" height="998" />

  <!-- Path 1 -->
  <polyline fill="none" stroke="#888888" stroke-width="2" points="100,200 100,100" />
  <polyline fill="none" stroke="#888888" stroke-width="2" points="400,100 400,200" />
  <path fill="none" stroke="red" stroke-width="5" d="M100,200 C100,100 400,100 400,200" />
  <circle fill="none" stroke="#888888" stroke-width="2" cx="100" cy="200" r="10" />
  <circle fill="none" stroke="#888888" stroke-width="2" cx="400" cy="200" r="10" />
  <circle class="CtlPoint" cx="100" cy="100" r="10" />
  <circle class="CtlPoint" cx="400" cy="100" r="10" />
  <text text-anchor="middle" font-size="22" font-family="Verdana" x="250" y="275">M100,200 C100,100 400,100 400,200</text>

  <!-- Path 2 -->
  <polyline fill="none" stroke="#888888" stroke-width="2" points="100,500 25,400" />
  <polyline fill="none" stroke="#888888" stroke-width="2" points="475,400 400,500" />
  <path fill="none" stroke="red" stroke-width="5" d="M100,500 C25,400 475,400 400,500" />
  <circle fill="none" stroke="#888888" stroke-width="2" cx="100" cy="500" r="10" />
  <circle fill="none" stroke="#888888" stroke-width="2" cx="400" cy="500" r="10" />
  <circle fill="#888888" stroke="none" cx="25" cy="400" r="10" />
  <circle fill="#888888" stroke="none" cx="475" cy="400" r="10" />
  <text text-anchor="middle" font-size="22" font-family="Verdana" x="250" y="575">M100,500 C25,400 475,400 400,500</text>

  <!-- Path 3 -->
  <polyline fill="none" stroke="#888888" stroke-width="2" points="100,800 175,700" />
  <polyline fill="none" stroke="#888888" stroke-width="2" points="325,700 400,800" />
  <path fill="none" stroke="red" stroke-width="5" d="M100,800 C175,700 325,700 400,800" />
  <circle fill="none" stroke="#888888" stroke-width="2" cx="100" cy="800" r="10" />
  <circle fill="none" stroke="#888888" stroke-width="2" cx="400" cy="800" r="10" />
  <circle fill="#888888" stroke="none" cx="175" cy="700" r="10" />
  <circle fill="#888888" stroke="none" cx="325" cy="700" r="10" />
  <text text-anchor="middle" font-size="22" font-family="Verdana" x="250" y="875">M100,800 C175,700 325,700 400,800</text>

  <!-- Path 4 -->
  <polyline fill="none" stroke="#888888" stroke-width="2" points="600,200 675,100" />
  <polyline fill="none" stroke="#888888" stroke-width="2" points="975,100 900,200" />
  <path fill="none" stroke="red" stroke-width="5" d="M600,200 C675,100 975,100 900,200" />
  <circle fill="none" stroke="#888888" stroke-width="2" cx="600" cy="200" r="10" />
  <circle fill="none" stroke="#888888" stroke-width="2" cx="900" cy="200" r="10" />
  <circle fill="#888888" stroke="none" cx="675" cy="100" r="10" />
  <circle fill="#888888" stroke="none" cx="975" cy="100" r="10" />
  <text text-anchor="middle" font-size="22" font-family="Verdana" x="750" y="275">M600,200 C675,100 975,100 900,200</text>

  <!-- Path 5 -->
  <polyline fill="none" stroke="#888888" stroke-width="2" points="600,500 600,350" />
  <polyline fill="none" stroke="#888888" stroke-width="2" points="900,650 900,500" />
  <path fill="none" stroke="red" stroke-width="5" d="M600,500 C600,350 900,650 900,500" />
  <circle fill="none" stroke="#888888" stroke-width="2" cx="600" cy="500" r="10" />
  <circle fill="none" stroke="#888888" stroke-width="2" cx="900" cy="500" r="10" />
  <circle fill="#888888" stroke="none" cx="600" cy="350" r="10" />
  <circle fill="#888888" stroke="none" cx="900" cy="650" r="10" />
  <text text-anchor="middle" font-size="22" font-family="Verdana" x="750" y="575">M600,500 C600,350 900,650 900,500</text>

  <!-- Path 6 (C and S command) -->
  <polyline fill="none" stroke="#888888" stroke-width="2" points="600,800 625,700" />
  <polyline fill="none" stroke="#888888" stroke-width="2" points="725,700 750,800" />
  <polyline fill="none" stroke="#888888" stroke-width="2" points="750,800 775,900" />
  <polyline fill="none" stroke="#888888" stroke-width="2" points="875,900 900,800" />
  <path fill="none" stroke="red" stroke-width="5" d="M600,800 C625,700 725,700 750,800
                                       S875,900 900,800" />
  <circle fill="none" stroke="#888888" stroke-width="2" cx="600" cy="800" r="10" />
  <circle fill="none" stroke="#888888" stroke-width="2" cx="750" cy="800" r="10" />
  <circle fill="none" stroke="#888888" stroke-width="2" cx="900" cy="800" r="10" />
  <circle fill="#888888" stroke="none" cx="625" cy="700" r="10" />
  <circle fill="#888888" stroke="none" cx="725" cy="700" r="10" />
  <circle fill="#888888" stroke="none" cx="875" cy="900" r="10" />
  <circle fill="none" stroke="blue" stroke-width="4" cx="775" cy="900" r="9" />
  <text text-anchor="middle" font-size="22" font-family="Verdana" x="750" y="945">M600,800 C625,700 725,700 750,800</text>
  <text text-anchor="middle" font-size="22" font-family="Verdana" x="750" y="975">S875,900 900,800</text>
</svg>

© 2020 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.