The Numbers of PATH

Numbers as database

Widgets like SVG suite use sequences of numbers as a database to indicate the single coordinates of every point.

The widgets are:

  • SVG Morphing;
  • SVG ImageMask;
  • SVG TextPath.


Path

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

The 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="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/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"/>
</svg>
		


Path (more complex)

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

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/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
    l-0.1-0.1c-60.6-60.6-159-60.6-219.6,0c-60.6,60.6-60.6,159,0,219.6l219.8,219.8L485,265.1C545.7,204.5,545.7,106.1,485,45.5z
     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" />
</svg>
		


How can I get different shapes?

  • Adobe illustratorĀ®: simply with copy and paste in a text editor;
  • 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