New tools in web design

There is a view that the internet today consists almost entirely of raster graphics. The only exception was Flash. But the current state of affairs gives us cause to reflect on the fact that the field of web development may well undergo sweeping changes very soon. Let’s take a look at the possibilities in web design to identify the trends the future has in store for us.

We’ve all heard that vector or raster graphics can be used for website design. Raster graphics are currently the most common type on the internet. They can be used to reproduce any image or photograph, accurately capturing the effect of colour gradients, whereas in vector graphics this would result in a larger file size. Raster images retain a high degree of realism, and a variety of effects can be applied to them.

Among the drawbacks are file sizes that are too large, even for simple images, as well as the inability to scale images perfectly. Raster images cannot be edited layer by layer in the same way as vector graphics.

Vector graphics are becoming increasingly popular. Unlike raster graphics, the file size here does not depend on the actual size of the object. Even highly detailed vector images, consisting of thousands of objects, rarely exceed a few hundred kilobytes. Information about them is stored in a descriptive format, so it is possible to infinitely scale graphic primitives and modify object parameters.

This means that moving, scaling, rotating, filling and performing other operations does not degrade the quality of the drawing. As for line thickness, it remains constant when objects are enlarged or reduced, as it is set to a fixed value.

Vector graphics allow you to edit an image layer by layer, as well as place one object on top of another without any interaction between them. However, using vector graphics to create images that require a high degree of realism may not be the most effective approach.

Vector graphics editors allow you to perform a whole range of operations: rotating, moving, mirroring, stretching, skewing, reordering layers, and creating more complex objects by combining primitives, as well as merging, adding to, and intersecting closed shapes.

Vector graphics are ideal for simple or complex illustrations that do not require photorealism. For example, PostScript and PDF use the vector graphics model. Vector and raster graphics do not exist in isolation from one another — they can be combined to create interesting design solutions.

But what about the past?

The possibility of incorporating vector graphics into web development had existed before. Its history dates back to 1994–1995. It was then that specifications were developed and browser plugins appeared for SVF (Simple Vector Format) and VRML (Virtual Reality Markup Language).

On 19 August 1998, an alternative to CGM (Computer Graphic Metafile) appeared — WebCGM. This development was intended to expand the format’s scope of application. Of all the solutions presented, only VRML survived; it was initially approved as the VRML97 standard and converted to X3D in 2004.

In 1998, Sun, IBM and Adobe introduced PGML, which was intended for rendering vector graphics on the internet. Around the same time, Microsoft and a number of other companies introduced an alternative — the VML standard.

PGML (Precision Graphics Markup Language) is an XML-based markup language. It allowed vector graphics to be described as text in XML format. PGML uses an image rendering model similar to PDF and PostScript. Following the emergence of SVG and VML, this technology became obsolete.

VML (Vector Markup Language) describes images within an HTML page as text, using syntax similar to HTML and CSS. VML is also based on XML. This technology relies on open W3C standards such as HTML 4.0, XML 1.0 and CSS 2.

Google Maps used VML to display vectors in Internet Explorer. However, VML was eventually superseded by SVG and is now considered

Microsoft later introduced the Silverlight plug-in for playing animations and multimedia content, including vector graphics. This effectively marked the end of VML.
 

About Flash

Flash was frequently used when creating websites or individual elements of them. It is a multimedia platform that was used to develop web applications and presentations.

Flash was used to create banners, animations and games, as well as to play video and audio. It supported vector, raster and, to some extent, 3D graphics.

However, Flash had significant drawbacks:

• high CPU load;
• instability;
• security issues;
• lack of indexing by search engines;
• dependence on plug-ins.

As a result, the technology gradually lost popularity.

‘What’s next?’ or an alternative to Flash

It is highly likely that HTML5 will significantly expand the possibilities of web development. This is a new stage in the evolution of HTML, which is transforming the approach to creating web pages.

HTML5 allows for cleaner and more logical code, as well as eliminating the need for third-party plugins.

One of the key technologies is WebGL — a tool for rendering 3D graphics in the browser.

HTML5 also includes:

• Canvas for working with graphics;
• Web Storage instead of cookies;
• drag-and-drop;
• WebSockets;
• geolocation;
• new form types.

Canvas and SVG

Canvas is an HTML5 element for creating raster graphics using JavaScript. It allows you to dynamically change images and create interactive elements.

SVG (Scalable Vector Graphics) is an XML-based markup language for describing vector graphics. It supports scaling, animation and interactivity.

SVG files are easy to edit, compress well and are indexed by search engines.
 

What websites will look like in the future

Modern technologies enable the creation of websites that combine vector and raster graphics. This opens up new possibilities for design and performance.

HTML5, SVG and Canvas are already widely used in web development today.

Conclusions

The use of HTML5, SVG and Canvas is set to become the global standard in the near future. Their capabilities are on a par with Flash, and in many cases surpass it.

Browsers actively support these technologies, and developers are increasingly using them in their projects.

The future of web design lies in open standards, performance and interactivity.