From 88bf0150f4dd5561d7ac6f63d00de77a05a3032c Mon Sep 17 00:00:00 2001 From: Rasheed Bustamam Date: Mon, 5 Nov 2018 17:34:23 -0800 Subject: [PATCH] add more detail to SVG paths (#20974) --- guide/english/svg/shapes/index.md | 25 ++++++++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/guide/english/svg/shapes/index.md b/guide/english/svg/shapes/index.md index 446bb5f066f..f32cb5e3ff4 100644 --- a/guide/english/svg/shapes/index.md +++ b/guide/english/svg/shapes/index.md @@ -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 ``` -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: MDN +[MDN Docs on Paths](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths)