2. Basics
• The HTML SVG stands for Scalable Vector Graphics. It basically defines
vector-based 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.
• The HTML <svg> element is a container for SVG graphics.
• SVG has several methods for drawing paths, boxes, circles, text, and
graphic images.
3. Basics
SVG has some predefined shape elements that can be
used by developers:
• Rectangle <rect>
• Circle <circle>
• Ellipse <ellipse>
• Line <line>
• Polyline <polyline>
• Polygon <polygon>
• Path <path>
4. Draw the line
<!DOCTYPE html>
<html>
<body>
<h2>Draw the line</h2>
<svg height="250" width="600">
<line x1="10" y1="10" x2="400" y2="400"
style="stroke:rgb(205,5,5);stroke-width:3"
/>
</svg>
</body>
</html>
• 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
5. Draw the Circle
<!DOCTYPE html>
<html>
<body>
<h1>Draw the Circle</h1>
<svg width="200" height="200">
<circle cx="80" cy="80" r="50" stroke="Blue"
stroke-width="2" fill="Skyblue" />
</svg>
</body>
</html>
Output
8. • The width and height attributes of the <rect> element define the height and the
width of the rectangle
• The x and y attributes defines the x- and y-position of the top-left corner of the
rectangle (x="100" places the rectangle 100px from the left margin and y="50"
places the rectangle 50px from the top margin) in the SVG canvas
• The rx and ry attributes defines the radius of the corners of the rectangle
• The fill attribute 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.
• The CSS fill-opacity property defines the opacity of the fill color (legal range: 0 to 1)
• The CSS stroke-opacity property defines the opacity of the stroke color (legal range:
0 to 1)
