HTML 5 SVG basic shapes

1
Part 4 HTML 5 SVG Tag Continue
Infobizzs.com
2
SVG Tag continue

• In Part 3, we saw some SVG basic shapes. Now we
  go ahead with other basic shapes.
• Here we start with SVG Path shape in detail.

3
SVG Path

• The ltpathgt element is used to define a path. The
  following commands are available for path data
• M moveto
• L lineto
• H horizontal lineto
• V vertical lineto
• C curveto
• S smooth curveto
• Q quadratic Bézier curve
• T smooth quadratic Bézier curveto
• A elliptical Arc
• Z closepath
• Note All of the commands above can also be
  expressed with lower letters. Capital letters
  means absolutely positioned, lower cases means
  relatively positioned.

4
SVG Path
OUTPUT
5
A Quadratic Bezier Curve

• In above example, we use path for four lines.
  Bézier curves are used to model smooth curves
  that can be scaled indefinitely. Generally, the
  user selects two endpoints and one or two control
  points. A Bézier curve with one control point is
  called a quadratic Bézier curve and the kind with
  two control points is called cubic.
• The following example creates a quadratic Bézier
  curve, were A and C are the start and end points,
  B is the control point

6
A Quadratic Bezier Curve
7
A Quadratic Bezier Curve
OUTPUT
8
SVG Text

• The lttextgt element is used to define the text.

OUTPUT
9
SVG Text
OUTPUT
10
SVG Text

• You can use Text as a link (with the ltagt element)
  

OUTPUT
11
SVG Stroke Properties

• SVG offers a wide range of stroke properties. In
  this chapter we will look at the following
• stroke
• stroke-width
• stroke-linecap
• stroke-dasharray
• All the stroke properties can be applied to any
  kind of lines, text and outlines of elements like
  a circle.

12
SVG Stroke Color

• The stroke property defines the color of a line,
  text or outline of an element

13
SVG Stroke Color
OUTPUT
14
SVG Stroke Width

• The stroke-width property defines the thickness
  of a line, text or outline of an element

15
SVG Stroke Width
OUTPUT
16
SVG Stroke-linecap Property

• The stroke-linecap property defines different
  types of endings to an open path

17
SVG Stroke-linecap Property
OUTPUT
18
SVG Stroke-dasharray Property

• The stroke-dasharray property is used to create
  dashed lines

19
SVG Stroke-dasharray Property
OUTPUT
Infobizzs.com
20
End of SVG Basic Shapes

• Here we end with SVG basic shapes.
• In the next presentation, we discuss about SVG
  Filters in depth.
• Thank You

Infobizzs.com