SVG

1
SVG(Scalable Vector Graphics)
2
What is SVG?

• SVG stands for Scalable Vector Graphics.
• SVG defines vector-based graphics in XML format.
• SVG stands for Scalable Vector Graphics.
• SVG is used to define vector-based graphics for
  the Web.
• SVG defines the graphics in XML format.
• SVG graphics do NOT lose any quality if they are
  zoomed or resized .
• Every element and every attribute in SVG files
  can be animated.
• SVG is a W3C recommendation.
• SVG integrates with other W3C standards such as
  the DOM and XSL.

3
SVG Advantages

• Advantages of using SVG over other image formats
  (like JPEG and GIF) are
• SVG images can be created and edited with any
  text editor
• SVG images can be searched, indexed, scripted,
  and compressed
• SVG images are scalable
• SVG images can be printed with high quality at
  any resolution
• SVG images are zoomable (and the image can be
  zoomed without degradation)
• SVG is an open standard
• SVG files are pure XML

4
SVG in HTML

• In HTML5, you can embed SVG elements directly
  into your HTML pages.
• Here is an example of a simple SVG graphic
• and here is the HTML code

5
Example

• lt!DOCTYPE htmlgtlthtmlgt ltbodygt lth1gtMy first
  SVGlt/h1gt ltsvg width"100" height"100"gt 
  ltcircle cx"50" cy"50" r"40" stroke"green"
  stroke- width"4" fill"yellow"
  /gt lt/svggt lt/bodygtlt/htmlgt

6
Output
7
SVG Code explanation

• An SVG image begins with an ltsvggt element
• The width and height attributes of the ltsvggt
  element define the width and height of the SVG
  image
• The ltcirclegt element is used to draw a circle
• The cx and cy attributes define the x and y
  coordinates of the center of the circle. If cx
  and cy are omitted, the circle's center is set to
  (0, 0)
• The r attribute defines the radius of the circle
• The stroke and stroke-width attributes control
  how the outline of a shape appears. We set the
  outline of the circle to a 4px green "border
• The fill attribute refers to the color inside the
  circle. We set the fill color to yellow
• The closing lt/svggt tag closes the SVG image

8
SVG Shapes

• SVG has some predefined shape elements that can
  be used by developers
• Rectangle ltrectgt
• Circle ltcirclegt
• Ellipse ltellipsegt
• Line ltlinegt
• Polyline ltpolylinegt
• Polygon ltpolygongt
• Path ltpathgt

9
SVG Rectangle - ltrectgt

• The ltrectgt element is used to create a rectangle
  and variations of a rectangle shape
• Here is the SVG code

10
Example

• ltsvg width"400" height"110"gt  ltrect
  width"300" height"100 style"fillrgb(0,0,255)
  
• stroke-width3strokergb(0,0,0)" /gtlt/svggt
• Output

11
Code explanation

• The width and height attributes of the ltrectgt
  element define the height and the width of the
  rectangle
• The style attribute is used to define CSS
  properties for the rectangle
• The CSS fill property defines the fill color of
  the rectangle
• The CSS stroke-width property defines the width
  of the border of the rectangle
• The CSS stroke property defines the color of the
  border of the rectangle

12
SVG Circle - ltcirclegt

• The ltcirclegt element is used to create a circle
• Here is the SVG code

13
Example

• ltsvg height"100" width"100"gt  ltcircle cx"50"
  cy"50" r"40" stroke"black" stroke- width"3"
  fill"red" /gtlt/svggt
• Output

14
Code explanation

• The cx and cy attributes define the x and y
  coordinates of the center of the circle. If cx
  and cy are omitted, the circle's center is set to
  (0,0)
• The r attribute defines the radius of the circle

15
SVG Ellipse - ltellipsegt

• The ltellipsegt element is used to create an
  ellipse.
• An ellipse is closely related to a circle. The
  difference is that an ellipse has an x and a y
  radius that differs from each other, while a
  circle has equal x and y radius
• The following example creates an ellipse
• Here is the SVG code

16
Example

• ltsvg height"140" width"500"gt  ltellipse
  cx"200" cy"80" rx"100" ry"50" 
  style"fillyellowstrokepurplestroke-width2"
  /gtlt/svggt
• Output

17
Code explanation

• The cx attribute defines the x coordinate of the
  center of the ellipse
• The cy attribute defines the y coordinate of the
  center of the ellipse
• The rx attribute defines the horizontal radius
• The ry attribute defines the vertical radius

18
SVG Line - ltlinegt

• The ltlinegt element is used to create a line
• Here is the SVG code

19
Example

• ltsvg height"210" width"500"gt  ltline x1"0"
  y1"0" x2"200" y2"200" style"strokergb(255,0,
  0)stroke-width2" /gtlt/svggt
• Output

20
Code explanation

• The x1 attribute defines the start of the line on
  the x-axis
• The y1 attribute defines the start of the line on
  the y-axis
• The x2 attribute defines the end of the line on
  the x-axis
• The y2 attribute defines the end of the line on
  the y-axis