SS - SVG Import

Note: Use with Moho 12.5 and 13.5 Only, as Moho 14 has this tool already built-in (File > Import > SVG File...)

The SVG Import tool is a Moho addon that allows you to reliably and faithfully import Scalable Vector Graphics (SVG) assets into Moho - ready for animation and presentation.


  

The tool was developed as an upgrade/replacement to the existing built-in SVG import process, and provides a range of enhanced features to improve 3rd party SVG application compatibility and end-user productivity:


Enhanced Features:

  - SVG Grouping & Elements translate to Moho Groups, Layers & Shapes - allowing you to retain naming & folder structures
  - Vastly improved compatibility with Adobe Illustrator exported SVGs
  - Support for Element & Group Transforms (translate, rotate, scale, matrix, skewX/Y)
  - Handles CSS Class, Inline Style and Presentation attribute styling - with Hex #000000 / #000, Named and RGB/RGBA colors
  - Full support for Masking with both ClipPath and Mask masks
  - Provides support for Arcs, Rounded Rect’s, Use (referencing) and partial support for inline embedded SVGs
  - Like-for-Like point count & positioning (no extraneous points)
  - Multiple Image Sizing & Layer consolidation options during import
  - Retain SVG element ID’s in Moho groups, layers and/or shapes
  - Partial support for Gradients (Gradients are averaged to a single color)
  - Respect/Ignore comments / comment blocks in the SVG files
  - Provides a handy MRU feature for re-loading Most Recent Used imported files
  - Dialog Options which determine the import workflow: Dialog > Browse > Load  -or-  Browse > Dialog > Load  -or-  Browse > Load


Video Demo




So … Why do you need the SVG Import tool?

The tool allows for a much greater range of vector based Characters, Props, Scenery and Artwork to be imported directly into Moho - allowing you to faithfully reproduce, manipulate and incorporate artwork from Illustrator, Inkscape, Affinity Designer, CorelDraw, Clip Studio Paint, Photopea + many other graphics/designer tools and SVG image repositories.

Some of the shortcomings of the built-in tool were its inability to fully support Grouping, Masking, CSS Styles, Short hex colors (#000), Use referencing and Arcs. Many of these features are used frequently in SVG imagery - which previously could lead to disfigured or discoloured artwork - or imported assets which failed to retain any grouping / layer structure or element naming.

----------------------------------------------------------------------------------------------------------------------------------------------------------------


   

Mashed Up example: car.svg image file imported with the default tool (Picasso would be proud). When the asset was imported with new SVG Import tool, the SVG image was more faithfully reproduced.

----------------------------------------------------------------------------------------------------------------------------------------------------------------


   

Layers & Naming example: monkey.svg image file imported with the default tool - which looks OK, but has no layers. When the asset was imported with the new SVG Import tool - the layer structure was retained.

----------------------------------------------------------------------------------------------------------------------------------------------------------------

Tool Options


   

  - Specify the SVG Filename to be imported, or browse for a SVG file
  - Use the Recently Used (MRU) feature to quickly select a previously imported file name. The delete button can be used to remove selected entries from the list
  - Set Scaling to scale the size of the imported image asset relative to the Canvas screen size or relative to the original size of the asset (default: 50% Screen)
  - Use Center to align the imported image to the middle-center location of the Canvas
  
  - Use Consolidation to minify or reduce the number of Groups & Layers created in Moho (default)
      - Select Vector Layers to combine adjacent vector layers into one (default)
      - Select Group Layers to fold/ungroup Group Layers than only have one Vector layer in it - resulting in just a Vector Layer (default)
      - Use Only Unnamed will avoid consolidating named Elements (i.e. Elements with SVG IDs)
      - Post-operation reduction will aggressively reduce Groups and Layers after initial import. Good for getting absolute minimum number of layers (whilst respecting masking), but generally bad if you are planning character-type animation. The process can also be Slow
  
  - Expand Group Tree will expand the imported layer group tree to show all groups & layers
  
  - Use Reset to restore default settings. OK to load & process the specified SVG file. Cancel to Cancel


Tool Preferences

There is an additional Preference settings menu (top right) which allows you to:

   

  - Browse for file First when the tool button is clicked. More like a traditional File-Open experience. The main Dialog will be shown after the File Browse
  - Use Debug Info to show some limited process and error information during the import process
  
  - Use Hide Me ** to completely hide the main dialog (on subsequent imports). The importer will behave even-more like a traditional File-Open-process experience. 

** This would typically be used if your settings remain the same during the majority of your imports. You can cancel out of Hide Me mode by Restarting/Reloading Moho


Version:

  - version: 01.12 MH12.5+ #521104
  - release: 1.12
  - by Sam Cogheil (SimplSam)


Notes & Limitations

The tool was designed to enhance the Moho SVG import capabilities whilst supporting most common SVG 1.1 features and respecting SVG grouping. The tool is not and never will be 100% SVG 1.1 compliant, and as such has some limitations:


Known Limitations:

  - Filenames (and paths) with non-english characters may not be loadable. Rename or relocate the files to fix.
  - SVG Document and Viewport dimensions are ignored
  - Measurement Units are ignored (i.e. em, px, pt, cm, mm, in, %). All treated as pixels (px)
  - Gradients are averaged to a single color (scripting limitation in MH13.5). Full Gradient color supported in Moho 14.
  - No support for SVG animate or Filter effects
  - Limited support for ‘stroke-linecap’. No support for ‘stroke-linejoin’ (platform limitation)
  - Image, Text, Marker, Symbol, Pattern and ‘Hidden/Display/Hide’ keywords are not supported
  - Limited SVG Syntax checking. SVG files should be valid before attempting import


Additional Notes:

  - The tool has an external dependency on the XML 2 Lua parser (pure Lua)
  - Compatible with MH12.5 - MH13.5
  - Optimized for MH13.5


Changelog:

  - 1.12 - Fix: Clipboard copy buffer
  - 1.11 - Fix: Filled Polyline’s
  - 1.10 - Add: Faux Gradient. Fix: line-width during Matrix scale. respect Unnamed during group & post-op reduce. un-default Unnamed option. +minor bugs.


Special Thanks to:

  - Stan (and the team): MOHO Scripting – https://mohoscripting.com
  - The friendly faces @ Lost Marble Moho forum – https://www.lostmarble.com/forum/
  - XML 2 Lua parser – https://github.com/manoelcampos/xml2lua (Manoel Campos da Silva Filho / Paul Chakravarti)
  - SVG documentation – https://developer.mozilla.org/en-US/docs/Web/SVG/ (Team Mozilla)
  - SVG technical ref – https://www.w3.org/TR/SVG11/ (SVG Working Group / W3C Team)
  - Arc to Path – https://github.com/BigBadaboom/androidsvg/…/utils/SVGAndroidRenderer.java (Paul LeBeau)