Is a SVG really the future of vector graphic?
In terms of web standards, Scalable Vector Graphics (SVG)serves as the de facto vector graphics format. It is currently supported by a wide range of websites and applications, making it seem very powerful and versatile. Here we discuss the problems with SVG and the kind of specifications that are needed for the future of graphic design on the web.
However, SVG is also a complex specification that attempts to patch together the varying needs of modern web graphics design. This has resulted in slow progress by the W3C, as well as conflicting requirements for different implementations.
Therefore, as a vector graphics standard, SVG no longer meets the needs of today's developers. It includes not only vector graphics, but also complex features such as animation, filters, interactivity, linking, and remote resource loading. This is in addition to embedding HTML, CSS, video playback, and JavaScript functionality. When dealing with such complex and diverse graphical functionality, SVG has had to rely on other web specifications, leading to a gradual erosion of its original advantages. Issues such as poor usability and a steep learning curve are becoming increasingly apparent.
Although SVG 2.0 was released in 2018, many features are still not fully supported. There are many reasons for this situation, but perhaps the most important is that the specification is difficult to read and complex. As a result, there is currently no fully functional SVG renderer – we have only seen partial implementations and no one knows for sure how SVG will develop in the future. For the time being, however, progress seems to be at a standstill. It remains to be seen how long users will put up with such bulky SVG.
Let us examine some of the problems with SVG more particularly.
Lack of consistency in SVG
SVG is a web standard with no official software or engine for implementation. As a result, there are many inconsistent subsets in use, resulting in a lack of consistency in graphical properties for unofficial rendering engines. This means that the same SVG graphic can be displayed differently on different devices and software, and designers often encounter different effects when importing SVG into design tools or browsers.
Sometimes, when one tries to import SVG files from Adobe Illustrator into Inkscape or from Sketch into Figma, they don't display correctly or, even worse, they cannot be opened at all. This is because each editor has its own way of interpreting how things are drawn in SVG. As a result, certain attributes or functions may not be supported by other editors, causing problems when importing SVG files.
One might wonder: “Since SVG is open source, why not implement an SVG rendering engine yourself?” The amount of time and effort this would take are prohibitive; one will also face some challenges along the way. Anyone who wishes to implement SVG has to deal with a specification of more than 700 pages – a veritable mountain to climb. In addition to the SVG specification, there are cross-linking specifications for web standards such as HTML, CSS and JavaScript. This sounds like enough to give pause to most users.
Lack of graphical features in SVG
In addition to the consistency issues of SVG rendering, there are also some intrinsic shortcomings in SVG itself. Some SVG graphics drawn by designers in design tools do not make it easy for developers to achieve certain simple effects, and some complex effects are not achievable at all.
We can take some clues from the following points:
- Gradient mesh and hatching have been removed in SVG 2.0.
- No browser supports adjusting the Z-index rendering order of SVG elements.
- SVG is essentially a 2D graphics format and has no native support for 3D transformation and rendering.
- Text manipulation in SVG is not as easy or flexible as in other formats or web standards.
The reasons for this situation are also quite simple: some browser developers are unwilling to contribute, whilst some design tool vendors are still waiting on the improvement of SVG. The reasons for this situation are simple: some browser developers are unwilling to contribute, while some design tool vendors are still waiting for SVG to improve. This leaves users in a dilemma: unable to create content because design tools do not support it, or unable to render their designs because there is no official implementation.
The power of the new vector graphics standard
Is the era of SVG coming to an end, and will it no longer be the future of vector graphics? We have seen a continued and strong demand from the developer community for vector graphics formats. What users really need is a compact, versatile and easy-to-implement vector graphics format, not an XML-based format. Users can rely on their graphics work everywhere without having to worry about implementing HTML, CSS and JavaScript. This saves bandwidth and computing power, and makes it possible to develop SVG compilers that support compatibility, responsiveness, animation and interactivity.
Fortunately, we have achieved this goal. VGG Specs is a set of JSON-based specifications for the next generation of vector graphics. It includes several specifications such as design, layout, animation and interaction to significantly improve usability and versatility. VGG aims to drive the future of vector graphics and serves as an open standard available to the industry at large. In addition, VGG Specs comes with an official implementation. VGG Runtime is an open source implementation of VGG Specs with cross-platform rendering and scripting capabilities.
We will discuss a number of issues facing SVG as a vector graphics specification and demonstrate the power of the VGG Specification in the graphics space. Stay tuned-in to our blog.
