The Numbers of PATH

Numbers as database

Some widgets for the shape drawing, like the SVG suite uses sequences of numbers as database, to indicates the single coordinates of every point. The widgets are:

  • SVG Morphing
  • SVG ImageMask
  • SVG TextPath


The path tag is one of the basic SVG shapes (path, line, polyline, polygon, circle, elipse, rectangle, text, image). 

Path is written as a sequence of numbers that indicates the coordinates of a closed line both positive and negative.  You can try yourself the code below saving it as triangle.svg, on the right you can see the result.

<svg version="1.1" xmlns="" xmlns:xlink="" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" xml:space="preserve">
    <path d="M447.6,259.4L599,518.7H299.5H0l151.4-259.4L299.5,0L447.6,259.4z"/>

Path (a more complex)

This is a more complex example of path, a positive shape (the heart) and negative (the circle in the middle) and another two separated shapes.

<svg version="1.1" xmlns="" xmlns:xlink="" x="0px" y="0px" width="600px" height="600px" viewBox="0 0 600 600" xml:space="preserve">
    <path d="M487.9,425.9c0,23.8-19.3,43-43,43s-43-19.3-43-43s19.3-43,43-43S487.9,402.1,487.9,425.9z M85.6,382.8
    c-23.8,0-43,19.3-43,43s19.3,43,43,43s43-19.3,43-43S109.3,382.8,85.6,382.8z M485,45.5c-60.6-60.6-159-60.6-219.6,0l-0.1,0.1
     M259.1,323.4c-59.5,0-107.8-48.3-107.8-107.8s48.3-107.8,107.8-107.8s107.8,48.3,107.8,107.8S318.6,323.4,259.1,323.4z" />

How can get amazing shapes?

  • Adobe illustrator®: simply with copy and paste in a text editor you can get your shape's path
  • InkScape© you can export your project in SVG format
  • If you open any SVG file with a text editor you can edit it.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us