SVG basics

From Web Education Community Group
Jump to: navigation, search

Introduction

SVG, which state for Scalable Vector Graphics, is a language for describing two-dimensional vector and mixed vector/raster graphics in XML.

We mean vector graphics by geometrical objects and their visual properties defined by mathematical expressions. But SVG also supports text, embedding images and even pixel-based operations like filters. In any case, SVG is a declarative language, i.e, the language provides a way to declare and describe objects and their properties. A rendering engine, like a web browser, should be able to understand the language and to follow its instructions to render and display the intended graphics.

SVG is resolution independent, i.e., the graphics it represent can be displayed at any desired size without loosing visual quality. This is the major difference between SVG and raster images, or pixel based graphics.

Another significant difference is the fact that a piece of SVG markup, being declarative, makes explicit the graphical objects it represents. These makes it possible to write computer programs that read, understand and use SVG input in a meaningful way. This also makes it possible to create both semantic and accessible SVG applications. By accessible we mean that the SVG markup can be read by non-graphical applications to offer non-visual alternatives to visually impaired users.

As a standard, SVG should be understood by different computing platforms and softwares, which contributes to its interoperability, being exchanged across systems that cooperate together.

Like HTML, SVG can be styled with CSS. This allows for separating graphic structure from visual presentation. For instance, we can have the same SVG file presented in different contexts as colored, grayscale or black-and-white, changing only the CSS file associated with it.

Like the HTML elements, the SVG elements can be accessed through JavaScript, a very common scripting language for the web. With JavaScript we can play around with the graphical objects represented in SVG, change their properties and create animations, for example, with the user interaction. This makes SVG fully interactive.

The language also supports declaring basic transitions, i.e., the change in time of one or more of the graphic properties. So one would need to use JavaScript only for more complex animations.

Applications

SVG was created to describe line art, illustrations, diagrams and any visuals that could be defined by geometric properties or operations, no matter how complex. The main purposes are to provide meaning to the different visual elements within the image, to enable access and manipultion of these using different computer programs, and to ensure its presentation at whatever scale.


That said, SVG is appropriate for:

  • charts
  • diagrams
  • infographics
  • cartoon-style illustrations
  • maps
  • architectural plans
  • wireframes
  • simple logos
  • ...

We can see SVG applied in:

  • news websites
  • educational platforms
  • mapping applications
  • data monitoring systems
  • ...

In all these cases, SVG graphics can be presented in browsers, edited in runtime, updated and reused, the changes stored locally or transfered across the globe.

Examples

1:
Imagine a data system collecting numerical data from sensors in the real world, being it weather information, urban traffic, or website statistics. A webpage built solely in SVG and JavaScript could receive that information and present it in charts that would be continuously updated each time new data arrived.

Furthermore, the user could select the charts she would be interested in, hidding others, or change the visual properties of the presentation to fit her needs. Only the semantic access to graphics, enabled by SVG, allows this type of applications.


2:
Consider an instructive diagram showing the different parts of a machine or a process. As the machine or the process upgrades, changes to the digram are an easy task. At the same time, the history of its revisions is kept clear just by looking at the differences between the versions of the underlying SVG file.

It is also possible that an online drawing application supports several users dispersed across the globe to edit simultaneously different parts of the same diagram. This is so because the application can keep a semantic understanding of the drawing and the objects that compose it.

Finally, the interoperability of SVG is responsable for the same file being delivered to the different browsers each user is using. And this is the same file stored in a remote database and used by the special software that operates the machine or the process. It can even be sent to the printer to print the graphic output, instead of the plain text.


SVG might not be appropriate in other circunstances. For instance, if you want to represent an image with photographic quality, not only it is not achievable with SVG (at least with the appropriate quality) but also it would require a long SVG file, much larger than its corresponding image file in PNG or JPEG, and much slower to be processed by the rendering engine. A very small graphic might also not be appropriate to represent in SVG, as this doesn't allow for very fine details. The same applies to graphics with thousands of objects, which would require the renderer to allocate to much computer memory.

See also