I am reading and learning about SVG paths here: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

I don't get the point with the path in the following code:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">

  <path d="M10 10"/>

  <!-- Points -->
  <circle cx="10" cy="10" r="2" fill="red"/>


Even when i remove the path element, I can't see any changes in the circle position or whatsoever. Can some one explain what is path doing in this example?

  • Its preparing to draw, its a stray point, which may or may not be visible depends on implementation. Incidentally the thing inside d= is actually PDF notation
    – joojaa
    Aug 6 '19 at 19:00

It's not doing anything. As this post says, the M just means "move to 10, 10". There are no other commands, so it's not doing anything.

Looking at the page, it seems they're setting up the demo for future examples.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy