SVG - Scalable Vector Graphics

SVG stands for Scalable Vector Graphics. It's a file format describing images of shapes, lines, and colours. Unlike regular photos, SVG can be resized without losing quality. It's excellent for creating graphics that look sharp on any device. You can make SVG images using special software on websites for interactive and attractive designs. SVG supports different visual elements like shapes, text, and gradients, making it versatile for eye-catching graphics.

SVG elements are the building blocks to create graphics within an SVG file. These elements define various shapes, paths, text, and other visual components that comprise the overall image. Here are some commonly used SVG elements:

We define SVG elements with XML syntax and style them with CSS, just like 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>.

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

Regarding positioning elements, HTML and SVG have crucial differences. In SVG, we use the viewBox attribute of the outer <svg> element. This attribute has four numbers separated by whitespace or a comma: min-x, min-y, width, and height. These numbers tell the browser which part of the SVG drawing to render and how to scale it to fit the viewport, as defined by the width and height attributes of the <svg> element.

Regarding letterboxing, the ratio of the width and height attributes of the viewport differs from the ratio of the width and height parts of the viewBox detail.

The SVG canvas will preserve its aspect ratio by default, even if it means a more miniature rendering within the viewport. This results in a letterboxed appearance. However, you can change this behaviour using the preserveAspectRatio attribute and specifying a different setting.

Contact us:+91 8128405131

Email send us at hello@elightwalk.com