Difference between revisions of "SVG basics"

From Web Education Community Group
Jump to: navigation, search
(Introduction)
(Introduction)
Line 2: Line 2:
  
 
[http://www.w3.org/TR/SVG/ SVG], which state for Scalable Vector Graphics, is a language for describing two-dimensional vector and mixed vector/raster graphics in XML.
 
[http://www.w3.org/TR/SVG/ 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. In this sense, 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.
+
We mean '''vector graphics''' by geometrical objects and their visual properties defined by mathematical expressions. In this sense, 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, or pixel based 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 [http://en.wikipedia.org/wiki/Raster_image 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.
+
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.
  
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 HTML, SVG can be styled with [[CSS_basics | 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.
+
Like the HTML elements, the SVG elements can be accessed through [[What_can_you_do_with_JavaScript | 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.
  
 
SVG is not appropriate in certain 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.
 
SVG is not appropriate in certain 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.
  
That said, SVG is appropriate for charts, diagrams, infographics, cartoon-style illustrations, maps, architectural plans, wireframes, simple logos, and so on. We can see SVG applied in online information websites, education platforms, mapping applications or data 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.  
+
That said, SVG is appropriate for:
 +
* charts
 +
* diagrams
 +
* infographics
 +
* cartoon-style illustrations
 +
* maps
 +
* architectural plans
 +
* wireframes
 +
* simple logos
 +
* ...  
  
As a final illustration, 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. Only the semantic access to graphics enabled by SVG allows this type of applications.
+
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.
 +
 
 +
As an illustration, 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. Only the semantic access to graphics enabled by SVG allows this type of applications.
 +
 
 +
Another example is an instructive diagram showing the different parts of a machine or a process. As the machine or the process upgrade and changes to the digram are made, the history of its revisions are 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, even 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.

Revision as of 13:01, 21 January 2013

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. In this sense, 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.

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.

SVG is not appropriate in certain 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.

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.

As an illustration, 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. Only the semantic access to graphics enabled by SVG allows this type of applications.

Another example is an instructive diagram showing the different parts of a machine or a process. As the machine or the process upgrade and changes to the digram are made, the history of its revisions are 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, even 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.