Adoption of Scalable Vector Graphics (SVG) by …public.s1000d.org/Documents/2015 S1000D User Forum presentations...Adoption of Scalable Vector Graphics (SVG) by S1000D: ... defined

PREPARED FOR

PRESENTED BY

Adoption of Scalable Vector Graphics (SVG) by S1000D: The SVG profile

S1000D User Forum 2015

21-23 September 2015

Dr. Stergios ISAAKIDISSenior Technical Officer

2NATO SUPPORT AND PROCUREMENT AGENCY

AgendaAgenda

• Why SVG?

• Use Cases

• Element Mapping

• Navigation

• Digital Signatures

• Automation

• Compression

• Case Studies

3

SVG Browsers and Operating Systems Supportability Matrix (SVG)

NATO SUPPORT AND PROCUREMENT AGENCY

IE Edge Firefox Chrome Safari Opera iOS Safari Opera Mini

Android Browser

Blackberry Browser

Opera Mobile

Chromefor Android

Firefox for Android

IE Mobile UC Browser for Android

PR

EV

IOU

S

36 41 6 27 5.1

37 42 6.1 28 6.1

9 38 43 7 29 7.1 4.4 12

10 39 44 7.1 30 8 4.4.4 7 12.1 10

CURRENT11 12 40 45 8 31 8.4 8 44 10 30 44 40 11 9.9

4

SVG Browsers and Operating Systems Supportability Matrix (CGM)

NATO SUPPORT AND PROCUREMENT AGENCY

IE Edge Firefox Chrome Safari Opera iOS Safari Opera Mini

Android Browser

Blackberry Browser

Opera Mobile

Chromefor Android

Firefox for Android

IE Mobile UC Browser for Android

PR

EV

IOU

S

CURRENT


BenefitsBenefits

a. Reduced viewing cost since SVG is widely supported by all the viewing environments.

b. Reduced production cost for the interactive illustrations because of the existence of many COTS and open source software applications that support the format and its conversion (from SVG and to SVG).

c. Easiest deployment of IETM Viewers on network environments that restrict the use of add-ons, ActiveX and COM components.

d. Enable the conversion from CGM to SVG and vice versa, preserving all the required metadata and hotspot information, including any relationships defined in the corresponding data module elements and/or attributes.


A Bridge between S1000D and SVGA Bridge between S1000D and SVG

S1000D

xml xlink

S1000D

SVG Profile SVG

xml xlink


Use CasesUse Cases

a. Development of new graphics. b. Automation of generation of custom graphics objects such as ICN numbers. An

example could be the xml parsing of a batch of existing SVG images and the automated placement of the ICN in accordance with the file name.

c. Validation of graphics in accordance with project specific implementation rules or style guides.

d. Generation of hotspots and/or legends. e. Generation of IPD relationships. f. Generation of links on the graphics that point to xml elements or data modules. g. Conversion from CGM to SVG and vice versa to support different viewing or

hosting environment requirements.h. Digital signatures on graphics using the XMLDIGSIG specification


Element MappingElement MappingS1000D SVG SVG Elements ApplicabilityinfoEntityIdent id ‘svg’

S1000D SVG SVG Elements ApplicabilityapplicationStructureIdent id

‘a’, ‘altGlyph’, ‘altGlyphDef’, ‘altGlyphItem’, ‘animate’, ‘animateColor’, ‘animateMotion’, ‘animateTransform’, ‘circle’, ‘clipPath’, ‘color-profile’, ‘cursor’, ‘defs’, ‘desc’, ‘ellipse’, ‘feBlend’, ‘feColorMatrix’, ‘feComponentTransfer’, ‘feComposite’, ‘feConvolveMatrix’, ‘feDiffuseLighting’, ‘feDisplacementMap’, ‘feDistantLight’, ‘feFlood’, ‘feFuncA’, ‘feFuncB’, ‘feFuncG’, ‘feFuncR’, ‘feGaussianBlur’, ‘feImage’, ‘feMerge’, ‘feMergeNode’, ‘feMorphology’, ‘feOffset’, ‘fePointLight’, ‘feSpecularLighting’, ‘feSpotLight’, ‘feTile’, ‘feTurbulence’, ‘filter’, ‘font’, ‘font-face’, ‘font-face-format’, ‘font-face-name’, ‘font-face-src’, ‘font-face-uri’, ‘foreignObject’, ‘g’, ‘glyph’, ‘glyphRef’, ‘hkern’, ‘image’, ‘line’, ‘linearGradient’, ‘marker’, ‘mask’, ‘metadata’, ‘missing-glyph’, ‘mpath’, ‘path’, ‘pattern’, ‘polygon’, ‘polyline’, ‘radialGradient’, ‘rect’, ‘script’, ‘set’, ‘stop’, ‘style’, ‘svg’, ‘switch’, ‘symbol’, ‘text’, ‘textPath’, ‘title’, ‘tref’, ‘tspan’, ‘use’, ‘view’, ‘vkern’

applicationStructureName class‘a’, ‘altGlyph’, ‘circle’, ‘clipPath’, ‘defs’, ‘desc’, ‘ellipse’, ‘feBlend’, ‘feColorMatrix’, ‘feComponentTransfer’, ‘feComposite’, ‘feConvolveMatrix’, ‘feDiffuseLighting’, ‘feDisplacementMap’, ‘feFlood’, ‘feGaussianBlur’, ‘feImage’, ‘feMerge’, ‘feMorphology’, ‘feOffset’, ‘feSpecularLighting’, ‘feTile’, ‘feTurbulence’, ‘filter’, ‘font’, ‘foreignObject’, ‘g’, ‘glyph’, ‘glyphRef’, ‘image’, ‘line’, ‘linearGradient’, ‘marker’, ‘mask’, ‘missing-glyph’, ‘path’, ‘pattern’, ‘polygon’, ‘polyline’, ‘radialGradient’, ‘rect’, ‘stop’, ‘svg’, ‘switch’, ‘symbol’, ‘text’, ‘textPath’, ‘title’, ‘tref’, ‘tspan’, ‘use’

hotspotTitle xlink:title‘a’, ‘altGlyph’, ‘animate’, ‘animateColor’, ‘animateMotion’, ‘animateTransform’, ‘color-profile’, ‘cursor’, ‘feImage’, ‘filter’, ‘font-face-uri’, ‘glyphRef’, ‘image’, ‘linearGradient’, ‘mpath’, ‘pattern’, ‘radialGradient’, ‘script’, ‘set’, ‘textPath’, ‘tref’, ‘use’

visibility Style‘a’, ‘altGlyph’, ‘circle’, ‘clipPath’, ‘defs’, ‘desc’, ‘ellipse’, ‘feBlend’, ‘feColorMatrix’, ‘feComponentTransfer’, ‘feComposite’, ‘feConvolveMatrix’, ‘feDiffuseLighting’, ‘feDisplacementMap’, ‘feFlood’, ‘feGaussianBlur’, ‘feImage’, ‘feMerge’, ‘feMorphology’, ‘feOffset’, ‘feSpecularLighting’, ‘feTile’, ‘feTurbulence’, ‘filter’, ‘font’, ‘foreignObject’, ‘g’, ‘glyph’, ‘glyphRef’, ‘image’, ‘line’, ‘linearGradient’, ‘marker’, ‘mask’, ‘missing-glyph’, ‘path’, ‘pattern’, ‘polygon’, ‘polyline’, ‘radialGradient’, ‘rect’, ‘stop’, ‘svg’, ‘switch’, ‘symbol’, ‘text’, ‘textPath’, ‘title’, ‘tref’, ‘tspan’, ‘use’

S1000D SVG SVG Elements ApplicabilityAttribute internalRefId or attribute referredFragmentor attribute xlink:href

xlink:href‘a’,‘altGlyph’‘color-profile’, ‘cursor’, ‘feImage’‘filter’,‘font-face-uri’,‘glyphRef’‘image’,‘linearGradient’‘mpath’,‘pattern’‘radialGradient’,‘script’‘textPath’,‘use’‘animate’,,‘animateColor’, ‘animateMotion’,‘animateTransform’, ‘set’‘tref’

xlink:show xlink:show‘a’,‘altGlyph’, ‘animate’, ‘animateColor’, ‘animateMotion’, ‘animateTransform’, ‘color-profile’, ‘cursor’, ‘feImage’, ‘filter’, ‘font-face-uri’, ‘glyphRef’, ‘image’, ‘mpath’, ‘pattern’, ‘script’, ‘set’, ‘use’

xlink:actuate xlink:actuate‘a’,‘altGlyph’, ‘animate’, ‘animateColor’, ‘animateMotion’, ‘animateTransform’, ‘color-profile’, ‘cursor’, ‘feImage’, ‘filter’, ‘font-face-uri’, ‘glyphRef’, ‘image’, ‘mpath’, ‘pattern’, ‘script’, ‘set’, ‘use’

Attribute targetTitle or attribute xlink:hotspotTitle

xlink:title‘a’, ‘altGlyph’, ‘animate’, ‘animateColor’, ‘animateMotion’, ‘animateTransform’, ‘color-profile’, ‘cursor’, ‘feImage’, ‘filter’, ‘font-face-uri’, ‘glyphRef’, ‘image’, ‘linearGradient’, ‘mpath’, ‘pattern’, ‘radialGradient’, ‘script’, ‘set’, ‘textPath’, ‘tref’, ‘use’

S1000D Element <graphic>

S1000D Element <hotspot>

S1000D Element hotspot/internalRef


NavigationNavigation


Navigation: S1000D to SVG ElementNavigation: S1000D to SVG Element


Navigation: S1000D to many SVG ElementsNavigation: S1000D to many SVG Elements


Navigation: SVG ElementS1000D DM or ElementNavigation: SVG ElementS1000D DM or Element

IRI stands for the Internationalized Resource Identifier as defined in

Internationalized Resource Identifiers [RFC3987].

IRI Syntax: IRI = scheme ":" ihier-part [ "?" iquery ] [ "#" ifragment ]

SVG/IRI S1000D

scheme s1000d

ihier-part //+ relative path to referenced physical file

iquery An application or project-specific query strings.

ifragment referredFragment attribute

s1000d://DMC-S1000DBIKE-AAA-D00-00-00-01AA-941A-D_007-00_EN-US#fig-00001


Digital Signatures and SVG: ConceptDigital Signatures and SVG: ConceptINFOSEC Technical and Implementation Guidance for Electronic Labelling of NATO

Information, AC/322-D(2004)0021, 16 March 2004


Digital Signatures and SVG: ImplementationDigital Signatures and SVG: Implementation

<dmodule><rdf:Description><identAndStatusSection><content><Signature>

</dmodule>

<svg><svg content><Signature>

</svg>

ITU-T X.509 Certificate

W3C, XML Signature Syntax and Processing

XMLDIGSIG

S1000D Data Modules

Graphics


Automation Approaches: InjectionAutomation Approaches: Injection

<svg width="400" height="300"> <style>

circle { fill-opacity: 0.5; stroke-width: 4; fill: #3080d0; } </style> <circle id="my-circle" cx="100" cy="100" r="50" />

</svg>

<svg …> <circle id=“my-circle” cx="250" cy="250" r="50" fill="red" /> <script type="text/javascript"><![CDATA[ varcircle=document.getElementsByTagName(“circle”)[0] ]]></script> </svg>

Javascript Injection CSS Injection

Pre-Processing

Original SVG file Modified SVG file• Javascript injection

• CSS Injection

• XML DOM Manipulation

PublishingViewer

Application


Automation Approaches: RuntimeAutomation Approaches: Runtime

Original SVG file Modified SVG file(runtime)

Publishing SVG/XML

Parser

• Javascript injection• CSS Injection• XML DOM

Manipulation• Dynamic display

business rules

Tablet

Laptop

Viewer Application


Automation Approaches: EncapsulationAutomation Approaches: Encapsulation

<html>

<head>…</head>

<body>

<svg width="500" height="100">

<rect id="rect1" x="10" y="10" width="50" height="80" style="stroke:#000000; fill:none;"/>

</svg>

<input id="button1" type="button" value="Change Dimensions" onclick="changeDimensions()"/>

<script>

function changeDimensions() { document.getElementById("rect1").setAttribute("width", "100"); }

</script>

</body>


CompressionCompression

gzip-encoding [RFC1952]

SVG 1.1 (Second Edition) – 16 August 2011, Appendix G: Conformance Criteria:

.SVG .SVGZ

RAM/Processor consumptionPre-Processing requirements

Volume

Note: SVG compression may not be effective in the case of:

• Server side viewing applications that compress data streams

• Hybrid SVG images (e.g. Raster graphics embedded in SVG)


Case Studies and Formal ApplicationsCase Studies and Formal Applications

Protected Reconnaissance Vehicle (PRV)

NATO AWACSNATO Alliance Ground Surveillance (AGS)

CASE STUDIES FORMAL APPLICATION (In progress)


QuestionsQuestions

Dr. Stergios ISAAKIDISNATO SUPPORT AND PROCUREMENT AGENCY11, rue de la Gare, L-8325 CapellenG.D. LuxembourgTel.: +352 [email protected]