SVG highs and lows

SVG, a scalable vector graphics markup language included in a subset of XML, was created in 1999, but only in 2011 it was included in the W3C recommendations . Amazingly, over eleven years (from 2000 to 2011), the SVG has not undergone significant changes. Nevertheless, he still managed to gain the trust and wide recognition of the developers.

One of these developers, who watched the evolution of SVG from its inception to the present day, gave an insight into the history of language development. Only now, after many years, has he managed to understand the reasons for the successes and failures of the SVG. The author collected all his observations and conclusions in the chronicle “Ups and Downs of SVG”. The post was prepared specifically for the corporate unit of PayOnline , a company that organizes payments on websites and in mobile applications. Next, directly translate.

Somewhere in 1998, my former colleague at that time working at Adobe looked into my office to tell me about a completely new technology. She knew that I would be interested. It was then about PGML or Precision Graphics Markup Language, which was nothing more than Adobe’s variation on XML for vector graphics. John Warnock, one of the founders of Adobe, said the following about him:

"The introduction of PGML allows us to meet the growing demand for precise specifications that would allow members of the Internet community to quickly and reliably manage and interact with graphics on the Web."

I went into the study of PGML and since then I began to closely monitor the XML standards of vector graphics. Adobe's PGML, Microsoft's VML, and other similar projects (Web Schematics, Hyper Graphics Markup Language, WebCGM, and DrawML) soon merged into a tangible W3C standard called Scalable Vector Graphics (SVG). It was assumed that the main purpose of the new format would be to display interactive vector graphics in web browsers. In those days Netscape Navigator 4.7 and Internet Explorer 5, this task was accomplished only with the help of Macromedia Flash.
')

In 2000, the situation cleared up.

What was so cool about SVG? It was practically “PostScript for web development”, so the Adobe solution to sponsor and support it in the early stages of development was quite understandable: like Postscript, SVG made it possible to describe images using vectors, almost without resorting to other solutions. This approach was much more efficient than using raster graphics, and also made it possible to achieve much more natural scaling.



However, there was another point that made SVG even cooler: unlike PostScript, SVG was written declaratively inside as part of the standard markup of the XML meta-language. That is, mere mortals could safely open a text file, write something like it in it.

<circle cx=”60″ cy=”60″ r=”50″/> 

... then save this file, load it into the browser and look at the result. It was possible to go further and write a script according to the rules of the Document Object Model (DOM), which would animate the drawn image or change the parameters specified in the XML code. Unlike the then available alternative in the form of Macromedia Flash, this method was more understandable to the user. In addition, the textual nature of the markup made it easy to search the code. Initially, a plug-in was required to display SVG graphics, but ultimately the standard provided built-in support from the browser.

For me, the arguments in favor of this technology were obvious: its application would lead to progress in the field of web technologies, and she herself should have received the widest dissemination. Soon after this, I found a group of SVG Developers on Yahoo, where the same developers as me “flew” like moths to the world.

1999 smoothly flowed into the year 2000, and then I got the impression that widespread SVG was just around the corner. I was sure that this would happen in 2001, or, in extreme cases, in 2002. The arrival of SVG seemed something completely natural. In addition, experience showed that standards in the 1990s usually required about two years to be distributed. However, the “sudden success” SVG was destined to happen much later than I expected. 2002 managed not only to come, but also to end, and only Macromedia Flash managed to spread during this time.

2003: time of stagnation in the development of web standards

Together with other members of the SVG community, we made all possible efforts to develop an optimal standard specification, and also tried to support reasonable and relevant examples of its implementation in the software of that time. Of course, our main goal was native support for the standard in browsers, but we also needed support from developers of desktop graphics applications. At first, good news came from both fronts.

Better times

In 2003, Adobe offered SVG Viewer for displaying SVG in browsers, and Illustrator was a tool for personal creativity. At the same time, Mozilla has begun work on embedding the standard support into its browser. Needless to say, even Microsoft Visio supported SVG. There were a lot of illustrative examples demonstrating the capabilities of SVG. Among them were not only cartographic applications or data visualization samples, but even vector analogs of Flash sites.



Several books have also been written about SVG. An introduction to one of them, Chris Lily's SVG Unleashed, concluded with the words “welcome to the future.”

Worst times

Despite all this, I increasingly had the feeling that the future did not come: Adobe SVG Viewer, the only tool for displaying SVG graphics in the browser at that time, was not widely used. Microsoft resolutely ignored SVG in Internet Explorer 6. Without the support of the most popular web browser, the development of the standard has stalled, and it has become useless as a usual format for web publishing. It was well suited for closed systems, its aesthetics attracted geeks, but overall, the SVG fell out of the mainstream and was unknown to most Internet users. Macromedia Flash was the only vector graphics technology that became widely used.

Two major deterrents

More than ten years have passed since then, and now it is easy for me to determine what difficulties the SVG encountered then and understand why the conquest of the world took so much time. At that time, I didn’t understand at all what was happening and could not predict how events would develop. However, it is always easier to think backwards afterwards ...



Browser wars or “who needs these standards at all”?

I lovingly remember the Mozilla of those times. They had serious intentions to introduce SVG and they did everything they could for that. This is not to say that work has progressed rapidly, but progress has been steady. As a result, built-in, not requiring installation of third-party plug-ins, SVG support first appeared and was successfully tested in their builds.

In 2002, Microsoft contacted me and offered to hire our entire company (we, however, had only two). My first reaction was “Why?”, But it soon became clear to me that they knew all about our work with SVG. Regardless of whether Microsoft planned to support SVG or not, it was obvious that they were plotting something. In the end, it turned out that even despite the attention with which the company followed the SVG, it was not at all about to apply the standard in its pure form. Instead, Microsoft tried to unscrupulously copy SVG. This attempt was embodied in the form of a XAML markup language, designed to display vector and animated content with the help of the unprovoked Silverlight technology. XAML was strikingly similar to SVG.

Adobe, meanwhile, continued to support the SVG Viewer, as well as authoring tools that worked with SVG, such as FrameMaker, Illustrator, InDesign, and GoLive. Nevertheless, they could not influence Microsoft to change its course. The positions of Internet Explorer were then extremely strong, and whenever it came to creating a large amount of vector content, most designers and developers continued to choose Macromedia Flash. Despite the superiority of SVG in technical terms, the decisive factor in this confrontation was the alignment of forces in the browser market. In light of Microsoft's superiority, the support that Adobe provided to SVG looked more like an experiment, rather than a full-fledged effort.

"Standards - for losers"
- Opinion cynics

In a situation where Internet Explorer, without any support for SVG, was reaping the benefits of its immense popularity, and Flash was the only browser plugin that enjoyed real demand from users (due to the fact that it appeared on the market at the right time), neither Microsoft nor Macromedia were interested in support of open technology, able to equalize the capabilities of players. Those companies that supported the SVG turned out to be outsiders. Among them were both engineers who saw in it a more advanced and, consequently, more in-demand technology in the future, and businesses for which the use of SVG was a way to step on the heels of large monopolists dominating the market thanks to their closed technologies.

War of standards or "all your text is now ours"

However, even if the monopolists, bravely rejecting the interests of their shareholders, stood under the banner of SVG, the latter would still meet with resistance, already from other technologies. The fact is that SVG existed at the intersection of several other standards, two of which - HTML and CSS - appeared much earlier. SVG has been a newer set of specifications. By the early 2000s, the W3C had a far from ideal reputation. The organization managed to mark the creation of several useless (Xlink) and frankly unsuccessful (XML Schema) standards. A good example of the failures of W3C is XHTML. At first glance, the simplest task of placing SVG in the context of intersecting HTML and CSS was complicated by the fact that both of these technologies were in a state of constant change, not necessarily moving in the right direction.

Take text processing, for example. In SVG 1.0, there was no such demanded feature as text that adapts to the shape of the container with the correct word wrap. The SVG working group, having taken on the task, immediately realized that this was not its responsibility, since the CSS working group had already seriously worked on the textual component before them ... Political issues and a variety of technical approaches made it difficult to determine what specific role This was supposed to play SVG.

In 2004, the Compound Document Format working group was formed. Her task was to develop a document format that would combine several different formats, such as XHTML and SVG. Of course, such a development would require integrated browser support, since writing SVG code through a plugin would not allow for a good combination of SVG and HTML syntax.

The beginning of work on the CDF coincided with the birth of HTML5, the concept of which openly contradicted the movement of HTML towards XML, that is, its transformation into XHTML. The “fifth version” used a different approach to combining related technologies. The consequence of this approach was an even greater intersection of SVG and Canvas, a set of techniques for displaying graphics, presented in HTML5. Ultimately, work on the CDF was discontinued, but it brought fruit: a significant part of the development contributed to the development of HTML5.

Developers using proprietary technologies, such as Flash, do not face the problem of technology selection. Open standards, on the contrary, require an understanding of the mechanics of their interaction with each other. Over time, working with a whole set of such technologies can be a difficult task for developers and designers. In cases where the same problem can be solved in three different ways, it is usually difficult to determine the optimal one. Add to this the fact that a variety of display technologies leads developers to hope for the good quality of their implementations in each individual browser.

2005: Adobe abandons SVG

Adobe has endured for many years all the vicissitudes of supporting the "standard of losers." Obviously, companies are tired of fighting for justice and suffering defeat in the fight against monopolists. In 2005, it announced the acquisition of Macromedia, its largest and probably only competitor. For the SVG community, this event had negative consequences: already in 2006, SVGViewer was recognized as obsolete, and the toolkit that allowed working with SVG was removed from other applications.



Adobe provided Flash with significant support and did not spare the means and effort to finalize it. This allowed technology to conquer more than 90% of the market, becoming an almost universal graphic platform for personal computers. As for all other devices, they were still unable to fully display web pages or graphics. Thanks to Adobe’s Flash plans to seize the market, it was gradually implemented.



Instead of adopting SVG as an alternative, Microsoft released its belated version, Silverlight, after a while. The seventh and eighth generations of Internet Explorer continued to ignore SVG.

And while Adobe and Microsoft were developing proprietary alternatives to SVG, the working group was still developing the standard, and other “losers” like Mozilla continued to move the technology forward. The SVG standard is “prettier” with the advent of version 1.2, which contained several modest “features”. In parallel with this, work was under way on version 1.1, correcting the bugs of hastily created version 1.0. Both options have been developed for several years.

In December 2008, SVG 1.2 Tiny became a W3C recommendation, and SVG 1.1, containing bug fixes and clarifications for version 1.0, achieved the same status in 2011.

SVG received solid support from Firefox and Webkit. Thanks to Webkit, SVG has earned in Chrome and Safari. Now Internet Explorer is completely isolated. Gradually, he lost his popularity, which got Chrome and Firefox. At the same time, Silverlight's attempts to get back on their feet failed.

Thanks to the rapid spread of Flash advertising and the growth in the number of “rich Internet applications”, Adobe Flash has maintained a strong position in the desktop browser segment. However, in the segment of mobile devices, which with the release of the iPhone in 2007 significantly increased in terms of browser functionality, Flash led an unequal battle. SVG support appeared on the iPhone in 2008. Flash support was out of the question.

2010: The humble SVG finally inherited the throne

Later, in 2010, Steve Jobs published his Thoughts on Flash . According to Jobs’s ideas, the only available alternative to Flash was a combination of technologies, part of which was SVG.

Adobe’s ambitions for Flash, AIR and the Open Street Project represented a significant threat to Apple’s closed ecosystem. And while Jobs’s remarks about the unwanted use of plug-ins in browsers and the terrible performance of Flash on mobile devices were fully justified, the threat that Flash / AIR presented for Apple was primarily of an economic nature, and it was she who forced Jobs to regain love for standards. Thanks to the iPhone and iPad, Apple could destroy Flash, and this confrontation had to be very useful for SVG, which has already become part of HTML5. Thanks to this, SVG could finally get the attention and support that it deserved for a long time.

Microsoft and Apple began to fully support and apply SVG as soon as it became “politically expedient”. In 2011, Microsoft even held a SVG Open conference, which seemed incredible in light of the events of previous years.



I can assure you that the 2011 version of the SVG has not undergone major changes since the 2000 version. The SVG display examples demonstrated during the Internet Explorer 9 presentation, such as the magnificent work in the field of cartography from Cargo.net, were nothing more than “old samples” developed back in the early 2000s. In general, the SVG applications written in 2001 worked perfectly on the iPad when it first appeared. Microsoft implemented SVG with one annoying feature: it refused to reproduce support for SMIL, a specification popular among early SVG developers, which allowed to animate graphics. Even today, when Google plans to use SMIL in its products, Microsoft still seems to be winning the battle to oust it.



Despite all this, the overall level of native support is impressive today. The basic functionality of SVG today is in all web systems.



Libraries and frameworks for rendering and working with SVG, such as d3.js, grow and develop. Some of them have reached a very high level. SVG graphics are now available in more than 2 million devices worldwide, and Adobe has returned the standard support to its graphics applications. Recently, the company has even made significant progress in this direction: the release of CC2015.2 of December 1 offers excellent opportunities for exporting SVG graphics from Illustrator and importing it into Photoshop. In comparison with the first export options, this is a giant leap forward.

Now that SVG has gained widespread and full support from browsers, and development tools are developing in the right direction, SVG has become closely connected and compatible with all the technologies used within HTML5: Javascript, HTML, CSS, Canvas, and WebGL. The standard is moving forward again, this time in harmony with other technologies. Summing up, we can say that SVG managed to achieve the goals set at the very beginning of its existence. It just took longer than some of us had imagined.

Good always comes to those who wait.

Material for publication prepared by PayOnline, an international system for receiving electronic payments on the site and in mobile applications. If you need to organize payment acceptance, feel free to contact . Also subscribe to our corporate blog , there are still many interesting posts ahead.