PB138 — Scalable Vector Graphics (SVG)

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 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>

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>

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
- …

PB138 — Scalable Vector Graphics (SVG)

Graphics, GUI

SVG (Scalable Vector Graphics)

SVG Picture

SVG Structure

SVG - Animation Example (DOM + JavaScript)

Source of SVG animation (DOM + JavaScript)

SVG - Animation Example (SMIL)

Processing SVG

Including SVG into Web Pages

Basic markup

Basic Markup II.

SVG Libraries

SVG literature