Moho Pro SVG Import plugin script – Easy Import SVG Vector, Illustrator, Affinity files with Layers

New Moho SVG Import tool. Learn how to import SVG directly from Adobe Illustrator, Affinity Designer + Photo + Publisher, Inkscape, Photopea, CorelDraw and many SVG asset sites.

The new addon that allows you to easily, reliably and faithfully import Scalable Vector Graphics (SVG) assets into Moho Pro – ready for presentation and animation.

SimplSam’s SVG Import is a Moho Pro addon tool that allows you to import to Moho Animation whilst retaining Colors, Look & Feel and Layer structure. 

Moho SVG Import
Moho SVG Import

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 Recently Used imported files
  • Dialog Options which determine the import workflow: Dialog > Browse > Load -or- Browse > Dialog > Load -or- Browse > Load
  • Feedback suggests using ‘☑ Flatten Transforms’ with Affinity for best results.

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, P and 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)

Download:

How do I get set up ?

  • To install:
    • Use the Moho ‘Scripts’ > ‘Install Script …’ menu (after you Download for Install Script, and extract the zip files)

    — or —

    • Save the ‘ss_svg_import.lua’ and ‘ss_svg_import.png’ files to your computer into your <custom>/scripts/tool folder
    • Save the ‘XmlParser.lua’, ‘xml2lua.lua’ and ‘dom.lua’ files your computer into <custom>/scripts/ScriptResources/xml2lua folder
    • Save the ‘ss_bin.png’ file to your computer into <custom>/scripts/ScriptResources/ss_tools folder
    • Reload Moho scripts (or Restart Moho)
  • To use:
    • Run the SVG Import tool from the Tools palette
    • A popup panel will appear allowing you to select a file and then review/adjust the import settings

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:

  • 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)
  • 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/Hide’ keywords are not supported
  • Limited SVG Syntax checking. SVG files should be valid before attempting import
  • Moho only supports the even-odd fill-rule

Additional Notes:

  • The tool has an external dependency on the XML 2 Lua parser (pure Lua)
  • Compatible with MH12.5+
  • Optimized for Moho Pro 13.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:

 

Leave a Reply

Your email address will not be published. Required fields are marked *