Graphics, GUI

SVG (Scalable Vector Graphics)

W3C Standard (SVG 1.1 Second Edition - august 2011)
2D graphics and graphical applications description language.
Focuses on vector graphics processing.
The bitmap graphics can be included.
Animation support (using either SMIL markup language or JavaScript and DOM)
SMIL - Synchronized Multimedia Integration Language (http://www.w3.org/TR/2008/REC-SMIL3-20081201/)
- XML language for interactive multimedia creation.

SVG Picture

Figure 1. SVG Picture corresponding to source code on the next slide

Picture for the code on a next slide

SVG Structure

Figure 2. Sources for the image from the previous slide

 <?xml version="1.0" encoding="iso-8859-1"?>
 <!-- Generator: Adobe Illustrator 9.0, SVG Export Plug-In  -->
 <!DOCTYPE svg [
         <!ENTITY st0 "fill:#FFFFFF;stroke:none;">
         <!ENTITY st1 "fill:#FFFFFF;stroke-width:6.6112;stroke-linecap:round;stroke-linejoin:round;">
         <!ENTITY st2 "stroke:#FFFFFF;stroke-width:6.6112;">
         <!ENTITY st3 "fill:none;stroke:none;">
         <!ENTITY st4 "fill-rule:nonzero;clip-rule:nonzero;stroke:#000000;stroke-miterlimit:4;">
         <!ENTITY st5 "stroke:none;">
 ]>
 <svg  width="48pt" height="48pt" viewBox="0 0 48 48" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
         <g id="Layer_x0020_3" style="&st4;">
                 <g>
                         <path style="&st2;" d="M41.7,35.3L26.6,9.4c-0.6-1-1.7-1.7-2.9-1.6c-1.2,0-2.3,0.7-2.9,1.7L6.3,35.4c-0.6,1-0.6,2.3,0,3.3c0.6,1,1.7,1.6,2.9,1.6h29.6c1.2,0,2.3-0.6,2.9-1.7c0.6-1,0.6-2.3,0-3.3z"/>
                         <path style="&st1;" d="M23.7,11L9.2,37h29.6L23.7,11z"/>
                         <path style="&st0;" d="M23.7,11.9L10.3,36.1h27.5l-14-24.1z"/>
                         <g>
                         <path style="&st5;" d="M24.1,34c-1.1,0-1.8-0.8-1.8-1.8c0-1.1,0.7-1.8,1.8-1.8c1.1,0,1.8,0.7,1.8,1.8c0,1-0.7,1.8-1.8,1.8h0z M22.9,29.3l-0.4-9.1h3.2l-0.4,9.1h-2.3z"/>
                         </g>
                 </g>
         </g>
         <g id="crop_x0020_marks" style="&st4;">
                 <path style="&st3;" d="M48,48H0V0h48v48z"/>
         </g>
 </svg>
---

SVG - Animation Example (DOM + JavaScript)

Figure 3. SVG Animatione (DOM + JavaScript)

DOM + JavaScript Example

Source of SVG animation (DOM + JavaScript)

Figure 4.

 <svg xmlns="&ns_svg;"
      xmlns:xlink="&ns_xlink;"
      xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
      width="320" height="200"
      shape-rendering="optimizeSpeed"
      onload="testAdobe();fade()">
  <title>A16.3 - Fyzika - faze 3</title>
  <desc>
    Realisticke rizeni rychlosti a zrychleni pomoci JavaScriptu vc. postupneho zmensovani amplitudy kmitu.
  </desc>

  <script type="text/ecmascript">
  <![CDATA[
  function testAdobe() {
   //created by Martin Hejral, 2003
   //test if Adobe SVG Viewer 3 (ASV3) or greater is present -- only ASV3+ return "Adobe SVG Viewer"
   //alert(navigator.appName+navigator.appVersion);
   if(window.navigator)
    if( (navigator.appName=="Adobe SVG Viewer") && (navigator.appVersion>="3.0") )
   return true;
   alert("PROSIM, nainstalujte novou verzi Adobe SVG Prohlizece!!! PLEASE, install latest version of the Adobe SVG Viewer!!!");
   return false;
  }

  //global variables
  var amp=50, scale=0.34, time=0, to=-1;

  //perform fading animation
  function fade() {
   //get pointer to animated objects
   var obj1 = document.getElementById('sphere1');
   var obj2 = document.getElementById('spring1');
   var s = y = Math.cos(time/1000);
   //window.status="time = "+time/1000+" s";

   //multiply COS t with amplitude
   y *= amp;

   //shift sphere to base position
   y -= 50;

   //scale spring
   s *= scale;

   //set base position
   s += 0.34 + 0.32;
   time += 50;

   //amplitude and scale decay
   amp = amp*999/1000;
   scale = scale*999/1000;

   //modify SVG graphics
   obj1.setAttribute( "transform", "translate(0,"+y+")" );
   obj2.setAttribute( "transform", "scale(1,"+s+")" );

   //start timer
   to = window.setTimeout("fade()", 50);
  }
  ]]>
  </script>
  <defs>
  <symbol id="spring">
   <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M16.3,3v9.9l9.1,2.4L7.1,20.2"/>
   <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,20.2l18.3,4.9L7.1,30"/>
   <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,30l18.3,4.9L7.1,39.8"/>
   <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,39.8l18.3,4.9L7.1,49.5"/>

   <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,49.5l18.3,4.9L7.1,59.3"/>
   <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,59.3l18.3,4.9L7.1,69.1"/>
   <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,69.1L25.4,74L7.1,78.9"/>
   <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,78.9l18.3,4.9L7.1,88.7"/>
   <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,88.7l18.3,4.9L7.1,98.5"/>
   <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,98.5l18.3,4.9l-18.3,4.9"/>
   <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,108.3l18.3,4.9L7.1,118"/>
   <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,118l18.3,4.9l-18.3,4.9"/>
   <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,127.8l18.3,4.9l-18.3,4.9"/>

   <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,137.6l18.3,4.9l-9.1,2.4v16"/>
  </symbol>
  <symbol id="sphere">
    <radialGradient id="XMLID_1_" cx="10.75" cy="162.811" r="23.0054" fx="10.75" fy="162.811" gradientUnits="userSpaceOnUse">
    <stop  offset="0" style="stop-color:#FFFFFF"/>
    <stop  offset="1" style="stop-color:#000000"/>
    <a:midPointStop  offset="0" style="stop-color:#FFFFFF"/>
    <a:midPointStop  offset="0.5" style="stop-color:#FFFFFF"/>
    <a:midPointStop  offset="1" style="stop-color:#000000"/>

   </radialGradient>
   <path fill="url(#XMLID_1_)" d="M32.5,168.6c0,9-7.3,16.3-16.3,16.3S0,177.5,0,168.6s7.3-16.3,16.3-16.3S32.5,159.6,32.5,168.6z"/>
  </symbol>
  <symbol id="fix_point">
   <path fill="none" stroke="#000000" stroke-width="6" d="M8.3,3h16"/>
  </symbol>
  </defs>
   <!-- symboly vlozime do obrazu -->
  <use id="spring1" x="50" xlink:href="#spring">

  </use>
  <use id="sphere1" x="50" xlink:href="#sphere">
  </use>
  <use x="50" xlink:href="#fix_point">
  </use>
  <!-- obrys platna -->
  <rect x="0" y="0" width="319" height="199"
         fill="none" stroke="blue" />
 </svg>

SVG - Animation Example (SMIL)

Figure 3. Animated SVG Example (requires web browser with SMIL support; see Kurz SVG animace na serveru interval.cz)

SVG + SMIL example

Animated SVG Example (requires web browser with SMIL support; see Kurz SVG animace na serveru interval.cz)

Processing SVG

API - Batik library for example (http://xmlgraphics.apache.org/batik/)
Export/Import several graphical editors (Adobe Illustrator, Inkscape, OpenOffice/LibreOffice Draw, …)
Manual creation and editing.

Including SVG into Web Pages

XHTML, HTML5:
- using namespaces
HTML5
- directly using the element SVG
Always
- using the img element
SVG advantages:
- combination of SVG and RDF for example, or well commented SVG (svg element desc) - better accessibility for visually impaired users
- open standard
- easily to process.
SVG in web pages disadvantage:
- missing support at some web browsers - need of plug-ins
- incorrect/incomplete/missing namespace support at some web browsers - need to include as an external file using a img element.

Basic markup

svg - root element, its attributes:
- xmlns - mandatory, value http://www.w3.org/2000/svg
- version - optional, SVG version(1.0, 1.1,1.2)
- baseProfile - optional, profile of used SVG (none, tiny, basic, full)
- width, height - optional, picture dimensions
- viewBox - optional, picture dimensions limits
title, desc - textual description of either the entire image or its part(s).
g - grouping of graphical primitives into a logical groups
defs - may contain user defined markups
image - used for bitmap image inclusion
graphical primitives:
- path - describes polygonal lines, curves, etc.
- rect
- circle
- ellipse
- line
- polyline
- …

Scalable Vector Graphics (SVG)