Getting Started
...
Glossary
N-Z Terms

SVG

2min

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics. It is a widely used format for web graphics, and is supported by all major web browsers. SVG files can be scaled to any size without losing quality, and they can be animated and interactive.

SVG files are made up of a hierarchy of elements, each of which can be described with a set of attributes. The most common elements are:

  • Path: A path is a line or curve that can be defined by a set of points.
  • Shape: A shape is a closed path that can be filled with a color or pattern.
  • Text: Text can be added to an SVG file using the <text> element.
  • Image: Images can be embedded in SVG files using the <image> element.

SVG files can also contain animations and interactivity. Animations are created using the <animate> element, and interactivity is created using the <a> element.

Here are some of the benefits of using SVG in graphics:

  • Scalability: SVG files can be scaled to any size without losing quality. This makes them ideal for use on high-resolution displays.
  • Vector-based: SVG files are vector-based, which means that they are defined by mathematical formulas. This makes them more compact and efficient than raster-based images, such as PNG and JPEG files.
  • Portability: SVG files are supported by all major web browsers, making them a portable format for web graphics.
  • Accessibility: SVG files are accessible to users with disabilities, making them a good choice for web graphics that are intended for a wide audience.

If you are looking for a versatile and efficient format for your web graphics, SVG is a good option to consider. It is a widely supported format that offers a number of benefits over other image formats.

Feedback

Please be sure to submit issues or feature requests through the embedded feedback form. In the event it is a major issue please contact us directly through Discord.

Updated 03 Apr 2024
Doc contributor
Did this page help you?