Drawing

Anything in SVG can be drawn are either outline shapes (empty) or filled shapes or both

• In SVG all the style based SVG attributes can also be used as properties, so we prefer it to use as properties (you can use what you feel better)

• turned_in_notDrawing Related Properties
  • stroke
  • fill

stroke

Used to draw and color, only the outline of defined paths or shapes

Syntax

library_booksstroke="color"  /* As attribute */
stroke:color  /* As property */

library_books<svg height="100" width="200">
  <polyline points="100 10, 20 80, 180 80" style="stroke:red;fill:none"/>
</svg>

fill

Used to draw and color, only the filled defined paths or shapes, default fill color is black

• If your path is open then it will fill the area covered by joining the first & last path points with a straight line

Syntax

fill="color"  /* As attribute */ fill:color  /* As property */

library_books<svg height="100" width="200">
  <polyline points="100 10, 20 80, 180 80" style="fill:#ff1349;"/>
</svg>