PB138 — Scalable Vector Graphics (SVG)

(C) 2019 Masaryk University --- Tomáš Pitner, Luděk Bártek, Adam Rambousek

Graphics, GUI

SVG (Scalable Vector Graphics)

  • W3C Standard (SVG 1.1 Second Edition - august 2011)

    • W3C Standard (SVG Tiny 1.2 - december 2008)

      • modular SVG

      • rest of modules are Working Drafts

    • W3C Working Draft (SVG 2 - september 2015)

  • 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

(if the image does not show up, click here - 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

(if the image does not show up, click here - 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

(if the image does not show up, click here - 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

    • …​

Basic Markup II.

  • text

    • text

    • tspan

    • textArea

    • …​

    • …​

SVG Libraries

  • Java

    • Batik

    • TinyLine

  • JavaScript

    • Simple SVG API

    • SVGKit

  • C#

    • SvgNet

  • C/C++

    • LibBoard C++ library

SVG literature