HTML SVG (Scalable Vector Graphics)

Scalable Vector Graphics (SVG) is an XML-based markup language for describing two-dimensional graphics. As HTML is for text in the same way SVG is for graphics.

It is used to create vector images that can be scaled and resized without losing quality like other image formats.

It can be used to create a wide variety of graphics, such as charts, diagrams, maps, and other visual content.

It is often used in combination with HTML and CSS to create interactive and animated graphics for the web.

Note: Since SVG is an XML-based markup language, it can be controlled using JavaScript and the same can be used to create interactive and animated graphics.

SVG Syntax

To create an SVG image, you need to use the <svg> tag.

The <svg> tag is used to create a container for SVG graphics. All the SVG elements must be placed inside the <svg> element.

<svg width="100" height="100">
  <!-- SVG content goes here -->
</svg>

Let's now see some of the basic SVG elements (shapes) that can be used to create graphics.

Shapes in SVG

SVG provides a number of shapes that can be used to create graphics. These shapes are called SVG elements.

Some of the most commonly used SVG elements are:

1. Line
2. Rectangle
3. Circle
4. Ellipse
5. Polygon
6. Polyline
7. Path

1. SVG line

To create a line in SVG use the <line> element.

It has 4 attributes: x1, y1, x2, and y2. These attributes specify the start and end points of the line. (x1, y1) is the start point and (x2, y2) is the end point.

<svg width="100" height="100">
  <!-- line -->
  <line x1="10" y1="10" x2="90" y2="90" stroke="black" />
</svg>

Output:

Note: Here we have used the stroke attribute to specify the color of the line. You can also use the stroke-width attribute to define the width of the line.

2. SVG rectangle

To create a rectangle in SVG use the <rect> element.

It also has 4 attributes: x, y, width, and height. Here (x, y) is the starting point of the rectangle, and width and height are the width and height of the rectangle.

<svg width="100" height="100">
  <!-- rectangle -->
  <rect x="10" y="10" width="80" height="80" fill="lightgreen" />
</svg>

Output:

Here we have used the fill attribute to specify the color of the rectangle. You can also use the stroke attribute to define the color of the border.

You can also specify the corner radius of the rectangle using the rx and ry attributes. These attributes specify the horizontal and vertical radius of the rounded corners of the rectangle.

<svg width="100" height="100">
  <!-- rectangle with rounded corners -->
  <rect x="10" y="10" width="80" height="80" rx="10" ry="10" fill="lightgreen" />
</svg>

Output:

3. SVG circle

You can create a circle in SVG using the <circle> element. The <circle> element has three attributes: cx, cy, and r.

cx and cy specify the x and y coordinates of the center of the circle, and r specifies the radius of the circle.

<svg width="100" height="100">
  <!-- circle -->
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

Output:

4. SVG ellipse

Just like circle, you can also create an ellipse in SVG using the <ellipse> element.

An ellipse is defined by two radii (rx and ry) and a center (cx and cy).

<svg height="100" width="100">
  <!-- ellipse -->
  <ellipse cx="50" cy="50" rx="50" ry="25" fill="red" />
</svg>

Output:

5. SVG polygon

A polygon is a closed shape consisting of a set of connected straight-line segments. The first and last points are connected.

In SVG, polygons can be created using the <polygon> element. The <polygon> element has a points attribute that defines the vertices of the polygon.

<svg height="100" width="100">
  <!-- polygon -->
  <polygon points="10,10 20,30 30,20" fill="red" />
</svg>

In the above example, the polygon has three vertices at the coordinates (10, 10), (20, 30), and (30, 20).

Output:

Here is an example of creating a hexagon using a polygon.

<svg height="100" width="100">
  <!-- hexagon -->
  <polygon points="25,5 75,5 100,50 75,95 25,95 0,50" fill="red" />
</svg>

The points used to create the hexagon are (25, 5), (75, 5), (100, 50), (75, 95), (25, 95), and (0, 50).

Output:

6. SVG polyline

Polyline is a series of connected straight-line segments. It is similar to polygons, but polylines are not closed shapes.

Use the <polyline> element to create a polyline. Just like the <polygon> element, the <polyline> element has a points attribute that defines the polyline's vertices.

<svg height="100" width="100">
  <!-- polyline -->
  <polyline points="10,10 20,30 30,20" fill="none" stroke="red" fill="none" />
</svg>

In the above example, the polyline has three vertices at the coordinates (10, 10), (20, 30), and (30, 20).

Output:

Note: Make sure to set the fill attribute to none to avoid filling the shape with the default color.

7. SVG path

A path is a series of connected straight-line segments, curves, and arcs. It is the most powerful SVG element to create complex shapes.

Use the <path> element to create a path.

This element has an attribute called d which stands for "path data". The d attribute specifies a series of commands and coordinates that define the path.

<svg width="100" height="100">
  <!-- path -->
  <path d="M10 10 L 90 90" stroke="black" />
</svg>

In the above example, the path has two vertices at the coordinates (10, 10) and (90, 90) and M is the move to command and L is the line to command.

Output:

The <path> element supports a variety of commands for drawing lines, curves, and arcs. Some of the most commonly used commands are:

• M: moveto (specifies the starting point of the path)
• L: lineto (draws a line segment to the specified coordinates)
• H: horizontal lineto (draws a horizontal line segment to the specified x coordinate)
• V: vertical lineto (draws a vertical line segment to the specified y coordinate)
• C: curveto (draws a cubic Bezier curve to the specified coordinates)
• S: smooth curveto (draws a smooth cubic Bezier curve to the specified coordinates)
• Q: quadratic Bezier curveto (draws a quadratic Bezier curve to the specified coordinates)
• T: smooth quadratic Bezier curveto (draws a smooth quadratic Bezier curve to the specified coordinates)
• A: elliptical arc (draws an elliptical arc to the specified coordinates)

You can use these commands in combination to create complex shapes and lines.

Here is an example of an SVG path:

<svg width="100" height="100">
  <!-- Arc like path -->
  <path d="M 0,0
            A 10,10 0 0,1 10,10
            A 20,20 0 0,1 30,30
            A 30,30 0 0,1 60,60
            A 40,40 0 0,1 100,100"
        fill="none" stroke="black" />
</svg>

Output:

Using Text in SVG

To draw text in SVG, use the <text> element.

The <text> element has the following attributes:

Here is an example of an SVG text:

<svg width="100" height="100">
  <!-- Text -->
  <text x="0" y="15" fill="red">Hello</text>
</svg>

Output:

SVG provides a set of elements to draw text. These elements are:

• <text>: draws text
• <tspan>: draws text in a specified position
• <textPath>: draws text along a path
• <altGlyph>: draws alternate glyphs
• <altGlyphDef>: defines alternate glyphs
• <altGlyphItem>: specifies an alternate glyph
• <glyphRef>: references a glyph
• <textPath>: draws text along a path
• <textPath>: draws text along a path

Using Images in SVG

To draw images in SVG, use the <image> element.

The <image> element has the following attributes:

Here is an example of an SVG image:

<svg width="100" height="100">
  <!-- Image -->
  <image x="0" y="0" width="100" height="100" href="image.jpg" />
</svg>

Output:

Conclusion

SVG is a powerful tool for creating graphics on the web. It is supported by all modern browsers and is a great alternative to the <canvas> element.

You now understand the basics of SVG with the necessary examples. Use concepts from this tutorial to create your own SVG graphics.

Happy coding!🙂