CGM and SVG Workshop 2019

CGM & SVG Workshop
August 29th 2019
11am Eastern Time, USA
Presenters:
Don Larson, CEO
David Manock, VP Sales & Marketing
Welcome to the Webinar
We will begin shortly
www.cgmlarson.com www.svglarson.com
www.cgmlarson.com
Copyright Larson Software Technology (c) 2019

www.cgmlarson.com
Agenda
• Introduction
• Housekeeping
• Company Overview
• Slide Presentation and Demos
• Including Use Cases
• Summary
• Q & A
• Closing Information
CGM: Computer Graphics Metafile
an ISO (International Organization for
Standardization) standard for vector
and composite vector/raster picture
definition since 1987.
SVG: Scalable Vector Graphics
a modularized language for describing
two-dimensional vector and mixed
vector/raster graphics in XML.

Webinar: Housekeeping
• If you’ve experienced problems when joining the webinar,
please use the questions function to communicate
• All attendees will be muted for the duration of the Webinar
• Computer Audio is the recommended option
• Associated materials are available in the Handouts section,
drag and drop to download to your computer, at anytime
• Post your questions during the webinar using the panel
• Questions will be answered following the main presentation
or by email
www.cgmlarson.com

www.cgmlarson.com
Larson Software Technology
• Based in Houston, Texas, USA – New Location
• Founded in 1984, graphic technology experts for 30 years
• We develop powerful, innovative graphics software and toolkits,
based on open standards
• Promoted CGM usage, by providing a free CGM & TIFF viewer,
replaced by a subscription version available online
• The Larson online store is now open, the address:
• www.cgmlarson.com/store
• Developer of the first HTML5 CGM viewer, no plug in!
• Member of the CGM Open Foundation
• Larson technology simplifies the graphics workflow for Technical
Publications Professionals, Engineers, Geologists, and Geophysicists
• www.cgmlarson.com www.svglarson.com

Introduction
www.cgmlarson.com
• What were the main drivers for the webinar?
• The interest in the SVG format continues to grow
• Conversion of CGM to SVG has been of particular interest
• What is TECH SVG, and why did we write the new profile?
• We have stepped up SVG support, especially import
• Why should you still use CGM, when SVG provides more capabilities?
• What are the pitfalls and benefits of using SVG
• Present ‘Use Cases’ encompassing the bullet points
• Communicate our CGM and SVG expertise and product strategy

Historical – The formats
www.cgmlarson.com
• CGM – A 2D graphics format with a long history of publishing quality graphics in
different environments
• The WebCGM profile was developed to deliver Vector Graphics on the Web
• Visit CGM Open for more information www.cgmopen.org
• SVG - Objective to deliver high quality vector graphics for the Web
• The development of SVG was influenced by other submissions to the W3C (World Wide Web
Consortium)
• VML - Vector Markup Language (Microsoft)
• PGML - Precision Graphics Markup Language (Postscript)
• The final decision was to base SVG on XML
• More information on the origins:
• Secret Origin of SVG

www.cgmlarson.com
Commonality
• 2D Open formats accredited by the W3C (Not Proprietary)
• Suitable for the creation and maintenance of technical illustrations
• The only open graphical files that can be hybrid
• Both formats can contain editable Vector and Raster Data
• They have the potential to be validated
• CGM already has a defined profile, WebCGM adopted by the ATA and S1000D
specifications
• Metadata can be included in both file formats
• Provides the ability for interactive graphics
• SVG has the additional ability for animation and can be data driven
• Display of vector graphics in a web environment with out a plug-in
technology
• The SVG support is native
• CGM display can be achieved using the Larson VizEx View HTML5 technology

www.cgmlarson.com
CGM Background
• Computer Graphics Metafile (CGM)
• 2D Open Graphics format
• Not owned, non-proprietary
• Managed by the CGM Open Foundation
• www.cgmopen.org
• The CGM format first appeared in the 1980‘s
• The format was widely supported by many graphics-based applications
• W3C Standard
• WebCGM profile developed specifically for web delivery and adopted by
the S1000D Specification www.s1000d.org
• CGM required plug-in technology to view graphics in a web browser
• W3C - http://www.w3.org/Graphics/WebCGM/

Where is CGM used? – Industry Sector
www.cgmlarson.com
• Aerospace Space & Defense
• Automotive
• Oil & Gas
• Why these industries?
• CGM = open, non-proprietary, reliable data exchange
• The commonality – CGM Profiles = Validation
• More specifically industry profiles
• Aerospace & Defense = WebCGM
• Oil & Gas = PIP
• Automotive = WebCGM
• CGM is used for delivery, publishing and the display of graphics
• In the Oil & Gas sector CGM is predominantly used for data exchange and
display of information
• No requirement for web delivery or graphical hotspots

www.cgmlarson.com
SVG Background
• Scalable Vector Graphic (SVG)
• XML encoded format
• W3C Standard
• http://www.w3.org/Graphics/SVG/
• Managed by SVG Working Group
• http://www.w3.org/Graphics/SVG/WG/wiki/Main_Page
• Native support in all popular web browsers
• No plug-in technology required (HTML5 Native)

www.cgmlarson.com
SVG the Specification
• XML based
• SVG 1.1 – Full
• SVG 1.2 – Tiny
• A subset of the Full specification
• Designed for phones, tablets etc.
• Technical illustrations only require a small percentage of attributes
available in the SVG Specification
• Version 2.0 of SVG released
• There is no impact on our current support of SVG

www.cgmlarson.com
SVG is XML encoded
• Benefits:
• Based on the international open standard
• Structured information based on a schema
• In theory could be validated against a schema
• Caveats:
• The Off-the-shelf schema covers the whole
specification
• A new profile schema would be required to
validate against specific attributes/elements
• No rules for file creation could lead to
interoperability issues

Where is SVG used? – Industry Sector
www.cgmlarson.com
• Main reasons for using SVG
• Native support for HTML5
• Quality, the scalability of the image and retention of definition
• Link to external data
• Aerospace & Defense and Automotive
• Over the past year, we’ve experienced a significant growth in the use of SVG
• Mainly for the display of vector graphics in a web environment
• GIS (Geographic Information System)
• Maps on the web
• But not Google maps!
• GIS Software Vendor
• https://www.esri.com
• Graphic Arts
• Graphics on the web, when vector will provide benefit
• Data Visualization
• Data driven images, animation, dashboards etc. One benefit of XML
• https://bl.ocks.org/kerryrodden/7090426
• Data Driven Documents
• https://d3js.org/

Webinar Topics
www.cgmlarson.com
• Conversion
• Introduction
• Convert CGM to SVG
• Strategy
• TECH SVG
• Considerations and Implementation
• Technology
• Strategy
• Products
• Compliance
• Specifications and Standards
• Have they changed? Will they change?

www.cgmlarson.com
Conversion
Introduction

www.cgmlarson.com
Introduction - Conversion
• The primary conversion scenario, CGM exported to SVG
• CGM graphics display on the web was predicated on a plug-in technology
• SVG provides the ability to view graphics in a web environment without a plug-in
• The ability to import SVG graphics is also important
• Primarily generated by Adobe Illustrator – Use case to follow
• Our experiences motivated the writing of the TECH SVG profile
• The objective, standardize the elements we import and export from our own
software
• Publish the TECH SVG profile, make it publicly available
• http://cgmlarson.com/pdf/TECH%20SVG%20Profile%20DRAFT%20V1.1.pdf
• Project cost increases are possible, if conversion tasks are not
optimized

www.cgmlarson.com
Converting CGM to SVG
• Exporting the CGM file, we only use a
relatively small portion of the SVG
specification
• However, there is an intersection with Full
and Tiny profiles
• We are currently optimizing the export
based on real life customer files
• Conversion Challenges
• File Size
• Embedded Raster Images
• Hotspots
• Line styles
• Fonts
SVG - Full
SVG - Tiny

www.cgmlarson.com
Standardization and Technology
• Two-part strategy
• Standardization
• Develop guidelines for the import and export of SVG
• Publish guidelines with public access
• SVG Data Exchange Objective: Interoperability
• Technology
• Update our software to optimize SVG export and import
• Develop new product/s supporting SVG

www.cgmlarson.com
Standardization

www.cgmlarson.com
• What is TECH SVG?
• A subset of the Full and Tiny Specification’s
• We’ve documented and published the supported
elements
• How will TECH SVG help?
• Defining a standard method of exporting and importing SVG
elements
• Improve data exchange quality
• What else are we doing?
• Socializing our strategy and encouraging 3rd parties to
participate
• Specifically talking directly to the Aerospace and Defense
communities
• Work in Progress
• Developing our products to be TECH SVG compliant
• Work in Progress
TECH SVG
SVG - Full
SVG - Tiny

www.cgmlarson.com
Conversion
Considerations & Implementation

www.cgmlarson.com
Main Topics
• Raster image support
• Hotspots – Interactivity
• Use Case 1 – Hotspots
• Mapping – Line Styles and Fonts
• Use Case 2 – Font mapping

www.cgmlarson.com
Raster Images
• CGM and SVG both support the embedding of images
• CGM will usually have a Group IV Compression (TIFF) embedded
• This is standard practice for hybrid CGM files
• SVG does not support TIFF, therefore only JPEG and PNG can be used
• Conversion?
• A hybrid CGM is converted to SVG
• The TIFF image will require conversion to either JPEG or PNG
• A large conversion task, samples should be checked for quality
• The vector elements will not be affected
• A hybrid SVG is converted to CGM
• The conversion should be good, because CGM supports JPEG and PNG

www.cgmlarson.com
Hotspots - Implementing
• Hotspots – embedded attributes, providing user interaction with the
graphic
• This could be simple feedback, for example an information tooltip
• The interaction could also be more complex, a link to another graphic or text in a
table e.g. Parts List
• CGM has a clearly defined method of writing hotspot metadata
• The details are documented in the WebCGM profile
• http://docs.oasis-open.org/webcgm/v2.1/os/WebCGM21-IC.html#webcgm_interactivity
• SVG the same implementation is possible, however, there are multiple
methods of defining a hotspot
• So why is the hotspot definition important?

www.cgmlarson.com
Hotspots – SVG Considerations
• The risk of not having a clearly defined attribute is interoperability
• The definition of a hotspot can have ramifications
• The SVG hotspot data is not recognized, the result difficult to edit
• Will the hotspot work correctly in the viewer environment
• The benefit of TECH SVG, the hotspot attribute is clearly defined
• Therefore, the software can write the attribute consistently
• Result improved interoperability

www.cgmlarson.com
Use Case - Hotspots
• Case - Import an SVG file into VizEx Edit, containing interactive
information
• The SVG graphic contained interactive wiring information
• The file opened and the graphical elements were displayed correctly
• However, the metadata, in other words interactivity was not recognized
• The interactivity in this case was created by software specifically designed for
display in a custom SVG viewing environment
• This is a classic case where a file based on standard (SVG) attributes can cause
an issue

www.cgmlarson.com
Use Case – Hotspots (Cont)
• Solution – three possibilities
1. Develop the software, VizEx Edit to interpret the information correctly
2. Use an XSLT stylesheet and transform the information into an XML file VizEx
Edit can understand
3. Metadata could also be changed in an XML editor
• The second or third solutions are probably the most cost effective
• The second, there could be an impact in the SVG viewing environment, if we
do not transform the data back to the original structure
• The third, might be unworkable if the edit is to move the location of the
hotspot

www.cgmlarson.com
Mapping – Import Files
• Line styles – WebCGM defines line styles
• SVG no guidelines for line styles – e.g. when lines are dashed, dotted or both
• Therefore conversion issues can occur - Larson is working with customers to
improve conversion and display
• Fonts – WebCGM has specified fonts e.g. Helvetica
• Fonts can always cause issues, even with other file formats
• The most common issues, size, positioning, spacing and typeface

www.cgmlarson.com
Use Case - Mapping Fonts
• Case:
• Import of SVG files into VizEx Edit generated by Adobe Illustrator
• Font size was not consistent
• Typeface mapping is incorrect
• Size:
• Adobe Illustrator does not declare font size as you would expect, uses pixel coordinates
• VizEx Edit is expecting the SVG file to declare the units used for typeface, this is not the case in
Adobe Illustrator
• Typeface:
• CGM uses the Helvetica typeface
• Adobe Illustrator uses the Arial MT typeface, not the standard Arial, therefore we have a mismatch

www.cgmlarson.com
Use Case - Mapping Fonts (Cont)
• Solution:
• VizEx Edit recognizes the Illustrator SVG file, and uses the appropriate settings
• Pixels are mapped to Points, this preserves the font size
• The typeface is mapped from Arial MT to standard Arial, preserving the font
integrity

www.cgmlarson.com
Technology

www.cgmlarson.com
Conversion and Editing support - CGM & SVG
• VizEx Edit, native CGM editing
• Import and Export of SVG files
• Uses the TECH SVG profile for the export SVG files
• CGM, fully complying to international specifications, S1000D, ATA.
• Add hotspot’s manually or automatically
• Hotspots created in VizEx Edit preserved in the SVG
• View the interactive graphic in VizEx View HTML5
• http://www.cgmlarson.com/demos/jsViewer/table_cgm_example/index.html
• Or, view as SVG in a popular web browser

www.cgmlarson.com
Demo

www.cgmlarson.com
Batch conversion support of CGM & SVG
• Larson develops two batch conversion products
• Enabling the conversion of graphic files to CGM and SVG
• VizEx Transform – Multiple formats
• Convert CGM to Vector – SVG, PDF and EPS
• VizEx Transform
• Supports import and export of files, including SVG
• Enables batch auto-hotspotting
• Supports the TECH SVG profile when exporting an SVG graphic
• CONVERT CGM to Vector
• Batch conversion
• Exports SVG using the TECH SVG profile

www.cgmlarson.com
VizEx Transform - Major Benefits
• Ideal for processing large raster and vector graphic archives
• Process Raster files and add hotspot information via OCR
technology
• Use a companion spreadsheet to add associated information
• Process Vector data from 2D CAD systems
• Automatically remove extraneous information
• Process layering information
• Useful if layers contain foreign language information
• Automatically enhance with hotspot information
• Convert PDF to CGM or SVG
• Convert CGM to SVG and retain hotspot information
• Hotspot CGM graphics

www.cgmlarson.com
New SVG Product Development
• SVG Viewer SDK
• Viewing environment for SVG graphics
• Documented API
• Toolbox replicating CGM viewer environment
• Release date TBC
• SVG Illustration Software
• SVG graphics editing software
• Leverage the SVG format using the power of XML
• Open, Data driven, Validation, Styling
• Release date TBC

www.cgmlarson.com
Compliance

www.cgmlarson.com
The Specifications
• W3C – www.w3c.org
• World Wide Web Consortium
• WebCGM & SVG
• S1000D – www.S1000D.org
• International Technical Documentation Specification
• Issue 5.0 of the specification just released
• There is no impact on the CGM requirements in Issue 5.0
• SVG is not identified as requirement in the S1000D specification
• ATA (Airlines for America) - http://airlines.org/
• iSpec2200 – Commercial Aircraft
• Both CGM and SVG are W3C recommendations
• Completed the accreditation process
• CGM specified for S1000D and iSpec2200 as their recommended 2D graphics formats
• Deliverable - CGM’s are usually delivered by the supplier or contractor along with XML/SGML

S1000D Illustrations
www.cgmlarson.com
• Interactivity
• Interactive graphic guidelines
• CGM
• 2D graphics file format
• Connection
• Connect Graphic/s to Data Module

www.cgmlarson.com
CGM – WebCGM profile
• The S1000D WebCGM profile is described as cascading
• WebCGM 2.1 is the full profile
• The S1000D profile is a subset of the WebCGM 2.1
• S1000D still requires the CGM format to be compliant

www.cgmlarson.com
Summary
• Larson continues to make significant progress in supporting all graphic
formats
• Conversion, Compatibility and Compliance are the keywords
• Larson will continue develop standards compliant technology
• We employ a lessons learned strategy when supporting the CGM and SVG
formats
• Benefiting the market and our customers
• The Larson product roadmap continues to mature, SVG is a significant part
of this strategy
• We will be pleased to work with companies or organizations interested in
CGM and SVG implementation
• Encouraging the implementation of the TECH SVG profile

Q&A
www.cgmlarson.com

www.cgmlarson.com
Closing Information
• You can discover more information about Larson Software Technology at www.cgmlarson.com
• Our new domain name is now active www.svglarson.com
• A link to a recording of the webinar will be sent via email
• All the materials will be available:
• www.slideshare.net/donlarson1
• Follow us on Linkedin and Twitter
• https://www.linkedin.com/company/larson-software-technology
• www.twitter.com/cgmlarson
• Meet us in person, October 21st - 24th
• 2019 EAGLE Logistics Connection Users Conference in Tucson, AZ
• Register: https://www.raytheoneagle.com/EAGLE-Logistics-User-Conference-2019.html
• Contact us via email:
• david.manock@cgmlarson.com or don.larson@cgmlarson.com
• Thank you for attending

CGM and SVG Workshop 2019

More Related Content

Similar to CGM and SVG Workshop 2019

More from Larson Software Technology

Recently uploaded

CGM and SVG Workshop 2019