How to work SVG?

We define SVG elements with XML syntax and style them with CSS, just as if they were HTML.

SVG elements are purposely built for drawing graphics. We can use <rect> for drawing a rectangle, <circle> for drawing circles, etc.—SVG also defines <ellipse>, <line>, <polyline>, <polygon>, and <path>.

The available attributes depend on the element, so while <rect> has width and height attributes, the <circle> element has the r attribute, which defines its radius.

While most HTML elements can have children, most SVG elements cannot. One exception is the group element <g>, which we can use in order to apply CSS styles and transformations to multiple elements at once.

The <svg> Element and Its Attributes:

Another important difference between HTML and SVG is how we position elements, notably via the viewBox attribute of a given outer <svg> element. Its value consists of four numbers separated by whitespace or a comma: min-x, min-y, width, and height. Together, these specify how much of our SVG drawing we want the browser to render. That area will be scaled to fit the bounds of the viewport, as defined by the width and height attributes of the <svg> element.

When it comes to letterboxing, the ratio of the width and height attributes of the viewport may indeed differ from the ratio of the width and height parts of the viewBox attribute.

By default, the aspect ratio of the SVG canvas will be preserved at the expense of a larger-than-specified viewBox, thereby causing a smaller, letterboxed rendering within the viewport. But you can specify a different behavior via the preserveAspectRatio attribute.