HTML SVG

SVG (Scalable Vector Graphics) is an XML-based markup language for describing two-dimensional vector graphics.^[1] Simply put, SVG is to images what HTML is to text. As the name suggests, SVG allows you to scale the vector image up or down to any extent without losing the image quality, unlike raster images (JPG, GIF, and PNG).

What are the other advantages of the SVG format?

• You can edit SVG files with any text editor or drawing software (like Illustrator or even Figma and Sketch).

• It doesn't lose its quality at any resolution when printed.

• You can animate SVG images and add links to other documents.

To add an SVG image to your HTML page, use the <svg> container element.

In the <svg> tag, width and height attributes don't scale the image. When you use inline SVG (i.e., put <svg> directly in your HTML code), width and height parameters define the image area within the web page, but the graphics' size stays the same, as well as its placement.

For actually scaling the image itself and defining the image aspect ratio, you should use the magic viewbox attribute. The syntax consists of 4 numbers, of which the first 2 are x and y coordinates followed by width and height parameters in pixels.

Many people see drawing as a skill or talent that some people are blessed with and others aren't. Well, if you fall into the latter category, we have good news for you. With SVG, an XML-based image, you can create and edit graphics using your basic math skills and a text editor, like Notepad.

The building blocks of any SVG image include elements like <circle>, <rect>,<ellipse>, <line>, <polyline>, <polygon> , and <path>. They go between start and end <svg> tags and contain attributes defining their color, shape, size, and other parameters.^[2]

To create a circular shape with SVG, you need the <circle> element. Like all graphic shapes in SVG, it contains a forward slash — <circle/> — and doesn't require a closure, so you don't have to worry about placing the end tag.

The attributes cx and cy define the circle center coordinates, while the attribute r specifies the radius. However, if you omit the attributes cx and cy, the circle's center is set to the (0,0) point, which corresponds to the upper left-hand corner.

An ellipse usually looks like a squashed circle, although a circle is, in fact, a special kind of ellipse. The only difference with the <circle> element is that you define 2 parameters of the <ellipse> radius — ry and rx. The cx and cy attributes are the same and specify the ellipse center coordinates.

To draw a rectangle on a screen, you need the <rect> element with 6 attributes to control the position and shape:

• The x defines the horizontal position of the top left corner of the rectangle

• The y defines the vertical position of the top left corner of the rectangle

• The width attribute sets the width of the rectangle

• The height attribute sets the height of the rectangle

• The rx and ry attributes define the horizontal and vertical radius of the rounded corners. If you omit them, they default to 0

The <line> element seems like a simple shape but requires 4 attributes. You define the x (x1; x2) and y (y1; y2) coordinates for two points connecting and forming a line. The <line> element also has the stroke attribute that specifies the stroke color and width. If you omit these parameters, the line will be invisible.

The <polygon> element consists of points connected with straight line segments that are joined together to create a closed shape. The number of dots in the shape is up to you, and you can also decide to fill the shape with color or leave it empty.

The attribute points defines the list of points (pairs of x,y absolute coordinates). To set a stroke and specify the fill color, you could use stroke and fill attributes.

With SVG, you can also draw... text on a web page — how about that? Plus, the browser renders the <text> element as a graphic so you can scale or rotate it. Because it acts like text, users may select and copy it like text. The attributes x and y define the location of the top-left corner, whereas the fill attribute defines the fill color. You can also set the font size in pixels with the font-size attribute.

The stroke attribute contains several properties that you can apply to a line, text, or outline of an element:

• The stroke property defines the color.

• The stroke-width property defines the thickness of a line.

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

They can be butt, square, and round. The first two have the same appearance except for one point — the square property stretches the stroke slightly beyond the actual path.

•The stroke-dasharray property allows you to create a dashed line.

This attribute contains a set of comma-separated numbers, of which the first specifies the width for the filled area and the second specifies the width of an empty area.^[3]

The element for drawing a circle is called <circle>. If you want to choose specific fill color or set a stroke, you have a couple of options: you can use fill and stroke attributes or use inline CSS styling with properties of fill, stroke, and stroke-width. Technically, there's no difference, and you can select whichever method you like more.

For example, for drawing a yellow circle, we used the following syntax: fill="yellow"

The <polygon> element is very similar to the <polyline> — they both consist of multiple dots connected to each other. The only difference is that the <polygon> is a closed shape, and its last point stretches to the first one. On the contrary, the <polyline> is an open shape.

The polygon should have at least 3 sides (then you get a triangle), and for each corner, we set x and y coordinates using the points attribute. For example, for drawing a red triangle with two equal sides, you can use the following syntax: <polygon points="205,10 250,160 160,160" style="fill:red;"/>.

Why do we need to draw text with SVG if we can just type it? Developers and web designers may sometimes use the <text> element because of its image properties. SVG allows you to modify text like a graphic and apply a gradient, pattern, clipping path, mask, or filter.

The <line> element is a basic SVG shape used to create a line between two points. Remember to specify the stroke attribute that specifies the fill color; otherwise, no one will see the line on a web-page. In the provided example, we also used the stroke-dasharray attribute to define the pattern of dashes and gaps.