What is SVG?
Back in 2001, when W3C made Scalable Vector Graphics a recommended specification for describing two-dimensional vector graphics, XML was seen as an optimal solution for representing such graphics, even available in animated form. However, since the browsers of the time were not yet ready for the new SVG format and, as in the case of Internet Explorer, they had rejected it for a long time, external plug-ins were strictly necessary, such as Adobe SVG Viewer or Batik SVG Apache toolkit, to be able to read and represent graphics written in XML. Alternatively, the webmaster had to take care of the PNG graphics as a fallback solution.
Since browsers support HTML5, similar measures are no longer necessary: the parser integrated in HTML5 makes it possible to insert SVG elements directly into the HTML code without indicating the XML space name which usually reveals the context of the integrated elements to the interpreting browser. So there is not even a need for a specific parser like the one contained in the named plug-ins.
Unlike raster/pixel graphics, those in SVG format is generally characterized by the fact that the individual graphic objects of an image can be described from a mathematical point of view and are not classified in a pixel raster. For this reason, Scalable Vector Graphics can be used in particular to scale geometric shapes, icons, technical drawings, fonts, icons, and logos without loss of quality and without showing the scale effect or alias typical of raster graphics where single pixels appear.
The strengths of the SVG format
Starting from the implementation of browsers, SVG is used more and more often in HTML documents, where a great contribution has also been made by responsive design: vector graphics aim to design web projects suitable for all devices and displays, mostly thanks to their excellent scaling ability.
But for some time, there are more reasons to use SVG when creating the graphics of your site, as the following list effectively demonstrates:
- Small files: leaving out the very complex shapes, SVG graphics are characterized by small files, which remain unchanged even in the case of an enlargement of the graphics. Regardless of the devices that use the image files, stable and fast server performance is therefore guaranteed. The resulting shorter image loading time again affects search engine ranking.
- Open source: the W3C consortium created SVG as a free standard so you can use the markup language without limitations, on all platforms, and in combination with other XML languages.
- Animations of different kinds: SVG elements can be animated in different ways. Therefore, the W3C’s own language, SMIL (Synchronized Multimedia Integration Language), can be used, although its development has been suspended in the meantime. Furthermore, SMIL has never been implemented on Internet Explorer and Edge, and will no longer be supported in future versions of Chrome. More common is therefore animation with JavaScript, for example when you want SVG elements to react to specific actions, such as user clicks or mouse movements. A third (limited) option is the “animation” and “motion-path” CSS properties which are equally poorly supported on browsers.
- Formattable with CSS: SVG graphics can be manipulated with the CSS style sheet language. So to change the appearance of the graphics, you can adapt all the presentation attributes including colors, filters, fonts, relative sizes, etc., in a separate CSS file or directly on SVG.
- High compatibility: the fact that the functions of the different parsers differ considerably from each other has little influence on the rendering of graphics, since the SVG format is compatible both forwards and backwards. All browsers provide the corresponding image as a result according to their capabilities and ignore unknown XML elements, without leading to serious complications.
- Accessible to all: SVG graphics are based on text and are thus readable by machines for reading applications (screen readers) and by all devices that can understand the source code and reproduce it.
- Visible in the source code: if the SVG graphics are marked with the markup directly in the HTML document, they can be adapted without problems in the program editor and change, for example, the color or size without having to resort to other solutions.
