HTML Graphics: Prepared by Shahzeb Khan

HTML Graphics
Prepared by Shahzeb Khan

SVG Graphics
• SVG is used to define graphics for the Web in XML format
• SVG images can be printed with high quality at any resolution
• SVG graphics do NOT lose any quality if they are zoomed or resized
• SVG stands for Scalable Vector Graphics:
• Vector graphics are computer graphics images that
are defined in terms of 2D points, which are
connected by lines and curves to form polygons
and other shapes. Each of these points has a
definite position on the x- and y-axis of the work
plane and determines the direction of the path;
further, each path may have various properties
including values for stroke color, shape, curve,
thickness, and fill.
• Click to watch "How Do Vector Graphics Work?"
The HTML <svg> Element
• The HTML <svg> element is a container for SVG graphics.
• We can embed SVG elements directly into HTML pages.
• An SVG element begins with an <svg> paired tag.
• Width and Height attributes define width and height of SVG content
• In between the <svg> opening and closing tag, different tags are
used to draw different geometrical shapes
• Example: straight line, circular and ellipse shape, four sided shape,
polygons, polylines etc.
<svg height="210" width="500">
</svg>
SVG Line
• The <line> element is used to create a line:

<line x1="0" y1="0" x2="200" y2="200" />
</svg>
• 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
SVG Circle
• The <circle> element is used to create a circle:

<circle cx="50" cy="50" r="40" />
</svg>
• 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
• By default, the circle color will be black
SVG Ellipse
• The <ellipse> 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:

<ellipse cx="200" cy="80" rx="100" ry="50" />
</svg>
• The cx and cy attribute defines the x and y coordinate of the center of

the ellipse
• The rx attribute defines the horizontal radius
• The ry attribute defines the vertical radius
SVG Rectangle
• The <rect> element is used to create a rectangle and variations of a
rectangle shape:
<svg width="400" height="110">

<rect x=50 y=30 width="300" height="100" />
</svg>
• The x attribute defines the left position of the rectangle (e.g. x="50"
places the rectangle 50 px from the left margin)
• The y attribute defines the top position of the rectangle (e.g. y="20"
places the rectangle 20 px from the top margin)
• The width and height attributes of the <rect> element define the
height and the width of the rectangle
SVG Polygon
• Polygon comes from Greek. "Poly" means "many" and "gon" means
"angle".
• The <polygon> element is used to create a graphic that contains at
least three sides. Polygons are made of straight lines, and the shape is
"closed“. The following code draws a triangle (three-sided figure):

<polygon points="200,10 250,190 160,210" />
</svg>
• The points attribute defines the x and y coordinates for each corner of
the polygon.
• These points are separated by a space e.g. 200,10 is one point and so on.
SVG Polyline
• The <polyline> element is used to create any shape that consists of
only straight lines (that is connected at several points):

<polyline points="20,20 40,25 60,40 80,120 120,140 200,180" />
</svg>
• The points attribute defines the list of points (pairs of x and y

coordinates) required to draw the polyline
Additional Attributes
• SVG elements can be modified with the following attributes:
<svg width="400" height="110">
<rect width="300" height="100" fill="red" fill-opacity="0.2"
stroke="blue" stroke-width="5" stroke-opacity=“0.5"/>
</svg>
• The fill attribute defines the fill color of the shape
• The fill-opacity attribute defines the opacity of the fill color (range: 0 to 1)
• The stroke attribute defines the color of the border of the shape
• The stroke-width attribute defines the width of the border of the shape
• The stroke-opacity attribute defines the opacity of the stroke color (range:
0 to 1)
• We can also use the opacity attribute to define the opacity value for the
whole element (range: 0 to 1)

HTML Graphics: Prepared by Shahzeb Khan

Uploaded by

Copyright:

Available Formats

HTML Graphics: Prepared by Shahzeb Khan

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Graphics: Prepared by Shahzeb Khan

Uploaded by

Copyright:

Available Formats

HTML Graphics

Prepared by Shahzeb Khan

<svg height="210" width="500">

<svg height="210" width="500">

• The x1 attribute defines the start of the line on the x-axis

<svg height="100" width="100">

• The cx and cy attributes define the x and y coordinates of the center

<svg height="140" width="500">

• The cx and cy attribute defines the x and y coordinate of the center of

<svg width="400" height="110">

<svg height="210" width="500">

<svg height="200" width="500">

• The points attribute defines the list of points (pairs of x and y

You might also like

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.