Skip to main content icon/video/no-internet

Scalable Vector Graphics (SVG)

Scalable Vector Graphics (SVG) is an Extensible Markup Language (XML)-based Web graphics standard developed by the World Wide Web Consortium (W3C). The markup language describes and integrates vector graphics, raster graphics, text, multimedia, interactivity, and animation. SVG graphics and applications can be viewed with most modern Web browsers natively or by installing a plug-in. As the name indicates, SVG graphics can be scaled while maintaining quality. The SVG standard can be used as a basis to build interactive and animated applications, Web maps, and online GIS and as a graphics exchange format. SVG was designed to integrate with other W3C, XML, and GIS standards. As it is based on XML, it also integrates well with modern development tools and workflows. Developers familiar with other Web standards can benefit from their existing knowledge. Network interfaces enable client-server communication in order to build rich Internet applications.

SVG offers a comprehensive set of design variables. It supports various fill and stroke types, including patterns, gradients, and stroke dashing. Opacity can be defined separately for fill and stroke or groups. Text support is extensive. Text can be aligned to path elements. Fonts can be embedded, and custom glyphs and fonts can be created utilizing standard SVG geometry. All graphic elements and groups can be transformed, clipped, and masked or can serve as a clipping path or mask. A special feature in SVG is the ability to filter graphics (vector and raster) to generate special effects, such as shadow and lighting, blur and sharpening, blending, compositing, and matrix convolution filters. All elements can be styled using either cascading style sheets (CSS) or presentation attributes.

A programming interface (DOM) and an event model enable the creation of interactive graphics and Web applications. Scripting can be used to manipulate existing graphics to create, delete, reorder, or animate elements. By integrating Synchronized Multimedia Integration Language (SMIL) with SVG, an alternative and often easier method for animating SVG graphics exists. Almost any attribute of an SVG element can be animated by describing the animation parameters. Parameters include the attribute to be animated, attribute values or keyTime/value pairs, timing parameters, and the interpolation method. SMIL animation also supports acceleration and deceleration effects, defined by key splines.

SVG is designed to be extensible for future features and allows authors to embed domain-specific data and semantics using either the metadata element or foreign XML namespaces. Map authors can embed nongraphical attributes and attach them to graphical objects. The description and title elements can add additional semantics to the data. Internationalization features include Unicode, system language switches, different writing modes, and glyph rotations.

SVG is split into different profiles to be able to support the needs of specific devices better (e.g., desktop computers, mobile devices, embedded devices, and printers). Version 1.2 introduces several enhancements regarding graphics features, flow text, multimedia (video and audio), interactivity, and application building. The graphics standard is developed as part of an open process in alignment with the W3C process. Thus, implementers and users do not have to pay license fees. Any W3C member can participate in the SVG working group, and any individual can provide feedback on the public mailing list.

...

  • Loading...
locked icon

Sign in to access this content

Get a 30 day FREE TRIAL

  • Watch videos from a variety of sources bringing classroom topics to life
  • Read modern, diverse business cases
  • Explore hundreds of books and reference titles

Sage Recommends

We found other relevant content for you on other Sage platforms.

Loading