Scalable Vector Graphics (SVG)
Scalable Vector Graphics (SVG) is an XML-based vector image format developed by the World Wide Web Consortium (W3C). It is a versatile solution for representing two-dimensional graphics on the web that offers adaptability, compact file sizes, and flexibility.
SVG use cases
Desktop
For drawings that have to be displayed in a wide range of resolutions (such as in a web browser that runs across different systems) SVG's lossless scalability ensures sharp images.
Embedded system with display
In embedded systems, vector graphics are primarily used to save storage space for images that are primarily rendered with drawing operations, or for drawings that are used in different resolutions. Resources such as computing time and memory are restricted and must be managed, even on modern embedded systems.
Systems with hardware accelerators, in particular, can save significant amounts of memory using vector graphics.
Basic structure of an SVG file
SVG files are written in XML (Extensible Markup Language), a standard markup language that is readable by both people and machines. This format enables easy creation, manipulation, and integration of SVG images with other web technologies. A typical SVG file has an XML document with a root <svg> element, specifying width, height, and viewBox attributes. Shapes like <rect>, <circle>, <line>, and <path> are used to create graphical elements within the <svg> container.
Integration with web technologies
SVG effortlessly integrates itself with web technologies, and it uses CSS for styling. This combination provides designers with a powerful and familiar mechanism that increases creative control for visually appealing and customized web elements.
Browser support
SVG is supported by browsers such as Chrome, Firefox, Safari, and Edge, making it a dependable format for web development.
SVG support in embedded systems
SEGGER’s emWin offers SVG support, which provides developers with a powerful and efficient solution for rendering scalable graphics in embedded applications. In embedded systems that do not rely on browsers or support Javascript, vector-based SVGs can be displayed directly on a screen. This is especially beneficial in systems where memory is limited, as SVG files provide an efficient way to save memory, since they are typically smaller than raster image formats, such as JPEG or PNG.
If a device lacks a GPU capable of 2D vector graphics, the SVG can be rendered with software using Khronos’s OpenVG reference implementation. The device then displays a bitmap when powered on. This approach allows effective use of vector graphics, even in situations in which there are no dedicated graphics processing capabilities.