Scalable Vector Graphics (SVG) íV An Introduction Scalable Vector Graphics is a specification that defines the functions and syntax. It is an XML-based language for describing two-dimensional graphics, allowing drawing three types of graphic objects, i.e., vector graphics (like straight or curved line paths), text, and images. SVG can be used to create an image by specifying all necessary lines and shapes or modifying an existing photo, or combining the two. Graphic prints can also be grouped, converted, styled, synthesized, or filtered to change their appearance completely. The feature sets include gradients, clipping paths, rotations, nested transformations, animations, alpha masks, template objects, and filter effects.

SVG is very useful for rich graphical representations of information, including many accessibility features, and if used correctly, can ensure that the content is available to a large audience. However, when possible, a direct link to the source data helps many people understand the information provided.

Basic Shapes

SVG provides elements for rectangles, circles, simple and complex curves. A simple SVG consists of only the <svg> element and several other basic shapes that build graphics. There is also the <g> piece, which is used for grouping many basic shapes.

Before Starting SVG

Many drawing applications are free, and they use SVG as the native file format. Not all SVG viewers are the same, so, likely, content written for one application will not appear precisely similar in another application because they support various levels of SVG or other specifications you use with SVG, like JavaScript or CSS. All modern browsers support SVG, and in some cases, several versions. Since version 1.5, Firefox supported some SVG content, and since then, the level of support for each version has improved.

Before starting SVG, you should know the basics of XML or other mark-up languages, i.e., HTML. But, if you are not much familiar with XML, here are some guidelines to follow:

  • SVG elements and other attributes all should be entered since XML is case-sensitive.
  • Attribute values must be placed inside the quotes, and even they are numbers.

SVG Recommendations

Since becoming the recommended version in 2003, the latest “full” SVG version is 1.1. It is based on SVG 1.0 but adds more modularity to simplify implementation. There is a second edition of SVG 1.1 that became recommended standard in 2011. The “full” SVG 1.2 is intended to be the next major version of SVG.

In addition to the complete SVG recommendations, the W3C working group in 2003 introduced SVG Tiny and SVG Basic. These two configuration files are mainly for mobile devices. The first is SVG Tiny, which should generate graphics primitives for small devices with low functionality. SVG Basic provides many functions of the entire SVG but does not include those that are difficult to implement or render (such as animation). In 2008, SVG Tiny 1.2 became a W3C recommended standard.

SVG Compatibility with Other Specifications

SVG integrates with other standard efforts and specifications such as compatibility with XML, integration with HTML, styling with CSS, and is also compatible with W3C specifications on the international level.