ABCs Of SVG Images

October 31, 2018 By Adam Willson

ABCs Of SVG Images

With Scalable Vector Graphics or SVG images, there are three profiles that are tailored for display on different output devices and extensively define the SVG standard, respectively. They are in the root element specified with the base attribute profile. Through the use of profiles and powerful equipment will allow you to work with standards-compliant SVG files.

Some desktop environments use Scalable Vector Graphics (SVG) as the format for application icons, wallpapers or mouse. The additional resources for rendering is compensated by rising hardware resources. Sample projects include the Oxygen Project for KDE and the Tango Desktop Project for GNOME.


SVG files can be created and edited using various programs, including Adobe Illustrator, CorelDRAW and Inkscape (graphics and drawing program (free software; Linux or Unix, Windows, Mac OS X, uses SVG as a native file format (with Inkscape extensions))

Generated by Editors SVG files are often larger and more complex than manually generated files. Basic shapes, such as rectangles and circles are manually defined while editors often use more complex path elements.

SVG support in browsers

SVG is designed primarily for the internet. Modern Web browsers can display it easily and they do not need a SVG additional program (browser plug-in). According to various sources SVG is supported at about 80 % of Internet users.

The American software company Adobe Systems has developed a few years ago a file viewer for SVG images, which can still be used in multiple browsers on multiple platforms. Some JavaScript libraries (eg dojo.gfx, SVG Web) offer the possibility to describe the picture elements in JS syntax.

Since September 2010, Google support SVG in the Image Search. SVG is in addition to JPEG, GIF, PNG, Bitmap and WebP is one of six graphic formats supported by Google. Bing also now supports SVG images.

Since an SVG images file internally has a DOM tree, it can always be changed by the existing browser technologies, such as ECMAScript and CSS at runtime and thus an animated graphic to be generated. The developers of Webkit have also developed a draft for CSS animations, which should be included in the official W3C CSS3 standard.

XML elements for the award of animations can be used through XML multimedia standard Synchronized Multimedia Integration Language (SMIL). States which can be animated are transformation, position, visibility, color and size.

The time can be specified from milliseconds to hours and awarded differently. For most Animation Tags a mandatory attribute is required that specifies the type of animation.

Other fundamental components are the time frame during the animation states (optional), the state after animation, and whether the animation should be repeated after completion.

The properties of an actor are recorded in SVG by two attributes: attribute name specifies the animated attribute. On the other hand, attribute type specifies the XML parts or formatting in cascading style sheets (CSS).

Graphical effects and filters

Known video filters have been taken from desktop publishing programs and work according to the matrices principle, expressing the shape of the matrix in which operators and functions. Each individual image position is calculated using the defined filter effect and transferred to the next. In this way, images and graphics can be edited in a variety of ways.

April 2020
« Apr