greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

add more detail to SVG paths (#20974)

pull/34228/head
Rasheed Bustamam 2018-11-05 17:34:23 -08:00 committed by Martin Payne
parent 3f6efeef00
commit 88bf0150f4
1 changed files with 24 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
guide/english/svg/shapes/index.md
View File

@ -5,6 +5,14 @@ title: SVG Shapes
Several shapes can be created using SVG drawing. An SVG drawing can use and combine seven shapes: Path, Rectangle, Circle, Ellipse, Line, Polyline, and Polygon.
Almost all shapes take these common attributes:
```
fill: color to be filled
stroke: color of the stroke
stroke-width: how wide the width is
```
### Path
The `path` element is the most commonly seen, and is usually generated by programs designed to export SVG code.
@ -13,7 +21,21 @@ The `path` element is the most commonly seen, and is usually generated by progra
<path d="M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z" />
```
The example `path` above will generate a "plus" symbole (+) when used inside an SVG drawing. SVG `path` elements are not built manually, but generated through design programs that can manipulate vector graphics, such as Illustrator or Inkscape.
The example `path` above will generate a "plus" symbol (+) when used inside an SVG drawing.
SVG `path` elements are not usually coded manually, but generated through design programs that can manipulate vector graphics, such as Adobe Illustrator or Inkscape. However, with enough practice, you will be able to make impressive icons writing your own `path` element.
The `d` property is known as "Line commands", and it tells the drawing engine how you want things to be drawn. All line commands come in upper- and lower-case forms, where the upper-case form is absolute positioning, and the lower-case form is relative from the previous point.
The basic line commands are as follows:
* M/m (x y): `M`ove to this point. Imagine this as picking up your pen and placing it on this point. It does not draw anything.
* L/l (x y): draw a `L`ine to this point.
* H/h (x): draw a horizontal line to this point. Equivalent to `L/l x 0`
* V/v (y): draw a vertical line to this point. Equivalent to `L/l 0 y`
* Z/z (no args): draws a line from the last point to this point. No difference in upper/lower case.
There are more complicated line commands, which you can read more about on the [MDN Docs on Paths](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths).
### Rectangle
@ -78,3 +100,4 @@ This example will draw the same shape as the `polyline` above, but it will draw
## More Information
MDN Documentation: <a href='https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Shapes' target='_blank' rel='nofollow'>MDN</a>
[MDN Docs on Paths](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths)