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
The available attributes depend on the element, so while
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.
<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:
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
height attributes of the
When it comes to letterboxing, the ratio of the
height attributes of the viewport may indeed differ from the ratio of the
height parts of the
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