Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What does d mean in svg path?

Tags:

html

svg

<svg height="210" width="400">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

Does d stand for something in particular? I couldn't find anything via Google.

like image 359
geoyws Avatar asked May 03 '14 04:05

geoyws


People also ask

What does D in path mean?

d is Path Data. The definition of the outline of a shape. Reference : http://www.w3.org/TR/SVG/paths.html#PathData. Follow this answer to receive notifications.

What is G in SVG?

The <g> element is used to group SVG shapes together. Once grouped you can transform the whole group of shapes as if it was a single shape. This is an advantage compared to a nested <svg> element which cannot be the target of transformation by itself.

What is viewBox in SVG?

The viewBox attribute defines the position and dimension, in user space, of an SVG viewport. The value of the viewBox attribute is a list of four numbers: min-x , min-y , width and height .


2 Answers

d is Path Data. The definition of the outline of a shape.

Reference : http://www.w3.org/TR/SVG/paths.html#PathData

like image 122
Shmwel Avatar answered Oct 11 '22 05:10

Shmwel


  • d refers to the <path> data. (mdn link)
  • M tells the canvas to put the pen down at a specific location. It doesn't draw to that point from wherever it was previously.
  • L tells the canvas to draw a line from wherever it was last to the given coordinate.
  • Z tells the canvas to stop drawing (pick the pen up).

I found this overview from Dashing d3js on SVGs helpful.

like image 24
royhowie Avatar answered Oct 11 '22 05:10

royhowie