Scalable Vector Graphics (SVG)
Scalable Vector Graphics (SVG) is an XML-based vector image format developed by the World Wide Web Consortium (W3C). It serves as a versatile solution for representing two-dimensional graphics on the web, providing adaptability, compact file sizes, and flexibility.
Contents
Use cases for SVG
Desktop
For drawings that have to be displayed in a wide range of resolutions, such as in web browser on different systems, the lossless scalability of SVGs creates sharp images.
Embedded system with display
On embedded systems, vector graphics are primarily used to save storage space for images that are mainly rendered with drawing operations or for drawings that are used in different resolutions. Resources such as computing time and memory are restricted and require to be managed even on modern embedded systems. Especially systems with hardware accelerators can save significant 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 both human-readable and machine-readable. 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 integrates effortlessly with web technologies, using CSS for styling. This seamless collaboration provides designers with a powerful and familiar mechanism that increases creative control for visually appealing and customized elements on the web.
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, providing developers with a powerful and efficient solution for rendering scalable graphics in their embedded applications. In embedded systems that do not rely on browsers or support Javascript, vector-based SVGs can be displayed directly on the screen. This is especially beneficial in embedded 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’ OpenVG reference implementation. The device then displays the bitmap when powered on. This approach allows effective use of vector graphics even in situations without dedicated graphics processing capabilities.
