Scalable Vector Graphics (SVG) is an XML-based vector image format used to create interactive graphics and animations. SVG graphics can be used to create shapes, lines, text, and other visual elements on a web page. Unlike raster images like JPEG and PNG, SVG images can be scaled without losing quality.
To use SVG graphics in an HTML document, you can use the
<svg> element. The following attributes can be used with the
height: These attributes define the size of the SVG image.
viewBox: This attribute defines the position and size of the viewport (visible area) of the SVG image.
preserveAspectRatio: This attribute specifies how the SVG image should be scaled to fit the viewport.
Here is an example of an SVG graphic using the
<svg width="100" height="100" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet"> <rect x="10" y="10" width="80" height="80" fill="blue" /> <circle cx="50" cy="50" r="30" fill="yellow" /> </svg>
This code will create an SVG graphic with a blue rectangle and a yellow circle inside it. The
viewBox attribute defines the position and size of the viewport as (0, 0, 100, 100), meaning the visible area is the entire SVG image. The
preserveAspectRatio attribute is set to “xMidYMid meet”, which means the SVG graphic will be scaled to fit the viewport, while maintaining its aspect ratio, and centered both horizontally and vertically within the viewport.
SVG graphics can be created using a text editor and saved with a
.svg file extension. They can also be created using graphics software like Adobe Illustrator, and then exported as SVG files. Once you have an SVG file, you can insert it into an HTML document using the
<img> element, just like with raster images:
<img src="my-svg-file.svg" alt="My SVG graphic" />