More info on the vsm-box Demo & Toolkit:

Contents:
  1) JSON editing
  2) Image output
  3) Three styles: normal, white, sketch
  4) SVG tweaks
  5) Demoing

  A1) Appendix 1: Convert SVG TO EMF
  A2) Appendix 2: Convert SVG to fully outlined, minified SVG



1) == JSON editing ==

• You can edit or paste VSM-JSON in the large textarea.
  The linked vsm-box will immediately show the corresponding VSM-sentence.

• The VSM-JSON automatically updates along with any edits you make in the vsm-box.
  After you entered a VSM-sentence (or designed a VSM-template), you can for example
  copy the JSON and save it in a text file, so you are able to paste it back there later.


2) == Image output ==

• You can export a VSM-sentence to either one of:
  ◦ a PNG image   (but it may become blurred when embedded in a PDF),
                  (note: Chrome may produce better output than Firefox);
  ◦ an SVG image  (a sharp, lightweight vector format):  as
    - either SVG+html  (for full export but limited software support)    (not recommended),
    - or 'pure' SVG    (standard export and maximum compatibility)  (Default, recommended).

• If you set a `delay ..` for e.g. 3 seconds and then click the `Download <type>` button,
  then you still have some time to mouse-hover any connector you want to highlight in the image,
  before the Save dialog appears.


3) == Three styles: normal, white, sketch ==

You can give the vsm-box three appearances in this demo:

• Normal:
  ◦ Purpose:  to show a VSM-sentence as it appears in a vsm-box User Interface  (with border and background).
  ◦ How:  this is the default initial appearance.
  ◦ Note: to Download an image like this: disable both options `auto-white` and `White box`.  <-- !

• White box:
  ◦ Purpose:  to focus on a VSM-sentence on its own  (without vsm-box border and background).
  ◦ How:  check `✓ White box`.
  ◦ Note: a checked `✓ auto-white` option automatically enables `✓ White box` when you click Download,
          so this is the default appearance for downloads.

• Sketch:
  ◦ Purpose:  to focus on the connector-structure mainly  (larger connectors, borderless terms).
  ◦ How:  check `✓ Sketch`.


4) == SVG tweaks ==

• The SVG includes some *hidden elements* to help you create nice figures:
  1. a text cursor:  in the empty VSM-term that last had the focus;
  2. a mouse cursor and click-indicating stripes:  over the last leg of the highlighted connector (if any);
  3. a hover-highlighted version of a connector-highlighter's remove-icon.

  ◦ To make these visible, it is easiest to open the SVG in a text-editor, and change these class-attributes:
    1. for text cursor:     "textcursor-hide" to "textcursor",
    2. mouse cursor:        "mouse-hide"      to "mouse",
       click-stripes:       "click-hide"      to "click",
    3. hovered remove-icon: "ri-bg"           to "ri-bg-hl",
       and 2x               "ri-fg"           to "ri-fg-hl".

• In order to generate an SVG that shows the input-field at the end of a vsm-box: first place
  some text in this input (use a space if it should be shown as empty), and then download the SVG.

• If you want to dowload an SVG that includes the vsm-box border but the vsm-box has grown too wide:
  first hit Ctrl+Del in the input-field behind the last term. That narrows it.

• See Appendix 1 and 2 below for:
  ◦ how to convert SVG to EMF properly (e.g. to add it in Word or Google Docs), or
  ◦ tips on converting text and paths to 'outlines'.


5) == Demoing ==

• If you give a live demo or presentation on VSM, you can make the audience focus on just the vsm-box:
  you can move the top info panel and the bottom JSON textarea out of sight by using the
  whitespace-resizing handles. They are located just above and below the right side of the textarea.





A1) ===== Appendix 1:  Convert SVG TO EMF =====


How to convert SVG to EMF  (and avoid losing precision or font data):

+ First it is important to:
  + Either generate the SVG with the `✓ outline` option checked.
      This converts text to <path> elements, so you are not dependent on a font.
      Then if you place the SVG on a website, the correct image will still be visible to users who don't have a necessary font installed.
  + Or make sure that you have the font Tahoma installed (or Arial for sketch-style vsm-boxes).
      On Linux you can use the free, metric-compatible font Wine Tahoma:
      It's at https://aur.archlinux.org/packages/ttf-tahoma (under 'Sources': link 'tahoma.ttf').


► Convert: Command line with Inkscape:

  • Install Inkscape from https://inkscape.org
    + On Windows, let Inkscape be added to the PATH. (Necessary for Inkscape 1.0.1).

  • Run this to convert one file "vsm-box.svg":
      inkscape vsm-box.svg --with-gui --verb=EditSelectAll;StrokeToPath;ObjectToPath;FitCanvasToSelection;FileSave;FileQuit
      inkscape vsm-box.svg --export-filename=vsm-box.emf

  • Or make a batch file that
    + converts   1 SVG file  if given as 1 argument, or
    + converts all SVG-files in the current folder if given 0 arguments:

    svg2emf.bat:
      @echo off
      if not "%~1"=="" ( call :Convert "%~n1.svg"
      ) else           ( for %%i in (*.svg) do call :Convert "%%~i" )
      goto :EOF
      :Convert
        echo %~1 to emf
        copy "%~1" "%~n1.tmp.svg" > nul
        inkscape   "%~n1.tmp.svg" --with-gui --verb="EditSelectAll; StrokeToPath; ObjectToPath; FitCanvasToSelection; FileSave; FileQuit"
        inkscape   "%~n1.tmp.svg" --export-filename="%~n1.emf"
        del        "%~n1.tmp.svg"
      exit /b

  + Note: A bug in Inkscape 1.0.1 adds a white border to the bottom and right of the exported EMF.
  + Note: This one-liner may work in some future Inkspace version:
      inkscape "%~1" --actions="select-all; object-to-path; stroke-to-path; fit-canvas-to-selection" --export-type="emf"


► Or convert: Manually with Adobe Illustrator (this avoids Inkscape's white border):

  • Open SVG
  • Select all,  Type   -> Create Outlines                       (converts font characters (if any) to path data)
  • Select all,  Object -> Expand Appearance                     (for shadows and effects, if applicable)
  • Select all,  Object -> Path -> Outline Stroke                (makes box-border not overlapped by content bkgr, and arrows positioned well)
  • Select all,  Object -> Transform -> Scale --> 800%  (|1600)  (prevents jagged text due to Illustrator cutting off small numbers' decimals)
    + with 'Scale Corners' and 'Scale Strokes & Effects' checked.
  • File -> Export -> Export As --> [Enhanced Metafile (*.EMF)]


↪ Next, in Word:
  • Insert --> Pictures
  • Finally, when converting to a PDF:
    Make sure that your PDF converter generates vector data, not bitmaps. <--- !
    E.g. via menu Acrobat -> Create PDF.  Also use e.g. 1200dpi.
    Then zoom in on the PDF to verify vector data.





A2) ===== Appendix 2:  Convert SVG to fully outlined, minified SVG =====

Or: How to transform an SVG so all its text and paths are converted to 'outlined' shapes.

+ Note that if you download an SVG with the `✓ outline` option checked,
       the text will already be drawn with '<path>'s only (so without external font dependencies).
+ If that option is not checked, or if you want to convert everything else in the SVG to <paths> too, then see below.
+ See also the intro of 'Appendix 1', above.

+ Why: This maximizes the SVG's portability across platforms, where required fonts may not always be installed.
  E.g. for an SVG embedded in a website, this prevents that the font might be substituted and the text misaligned.


+ This describes an automated procedure for conversion + minification using Inkscape (free SVG editor) and `svgo` (SVG optimizer).
  This works (at least) with current `vsm-box demo` + Inkscape 1.0.1 + svgo 1.3.2, on Windows. (Linux should be doable similarly).

  • Install Inkscape from https://inkscape.org
    + On Windows, let Inkscape be added to the PATH. (Necessary for Inkscape 1.0.1).

  • Install `svgo` (see https://github.com/svg/svgo) with `npm` like:
    `npm install -g svgo@1.3.2`.

  • Make a batch file that
    + processes   1 SVG file  if given as 1 argument, or
    + processes all SVG-files in the current folder if given 0 arguments:

    svg-outline.bat:
      @echo off
      if not "%~1"=="" ( call :Convert "%~n1.svg"
      ) else           ( for %%i in (*.svg) do call :Convert "%%~i" )
      goto :EOF

      :Convert
      set "svg2=%~n1.o.svg"
      echo %~1 to outlines: %svg2%
      copy "%~1" "%svg2%" > nul

      REM A preprocessing step in case the SVG was already saved by Illustrator: reset font names, and re-add `path{stroke:none;}` (necessary for Inkscape).
      REM (Note: on *nix this could be done with commands like:  sed -i "s/(<\/style>)/path{stroke:none;}$1/g" __.svg  ).
      call powershell -Command "& {[IO.File]::WriteAllText('%svg2%', ([IO.File]::ReadAllText('%svg2%') -replace \"({font-family:)'(Arial)MT'(;})\", '$1$2$3' -replace \"({font-family:)'(Arial)-BoldMT'(;})\", '$1$2;font-weight:bold$3' -replace \"(\W/style\W)\", 'path{stroke:none;}$1'))};"

      REM Make Inkscape convert text, lines etc. to filled paths.
      set VERBS=EditSelectAll; SelectionUnGroup; StrokeToPath; ObjectToPath; SelectionUnGroup; FitCanvasToSelection
      call inkscape "%svg2%" --with-gui --verb="%VERBS%; FileVacuum; FileSave; FileQuit"

      REM Minimize. Some elements and many attrs added by Inkscape can be removed, because after outlining,
      REM only non-empty paths are visible (so no `d="M..V.."` lines) and only their `fill` attribute has an effect.
      set ARGS=--pretty --indent=0 --quiet --precision=3 --multipass ^
        --disable=removeDesc,mergePaths --enable=removeDimensions,cleanupListOfValues,inlineStyles,sortAttrs
      set CONFIG={ ""plugins"": [ ^
        { ""removeAttrs"": { ""attrs"": [ ^
          ""path:d:M[ -]*[\\d\\.]+[ ,-]+[\\d\\.]+[ ]*[VvHhLl][ -]*[\\d\\.]+[ ,-]*[\\d\\.]*[ ]*[Zz]?"", ^
          ""*:style:*"", ""id"", ""aria-label"", ""font-family"", ""font-weight"", ""font-size"", ""font-style"", ^
          ""text-anchor"", ""overflow"", ""color"", ""stroke-width"", ""stroke-dasharray"", ""stroke-linecap"" ^
        ] } }, ^
        { ""inlineStyles"": { ""onlyMatchedOnce"": false } }, ^
        { ""convertPathData"": { ""noSpaceAfterFlags"": false } } ^
      ] }
      call svgo %ARGS% --config="%CONFIG%" "%svg2%"

      REM Convert CR+LF to LF, remove invisible paths, and add a <style> so that Inkscape's EMF-export keeps working.
      call powershell -Command "& {[IO.File]::WriteAllText('%svg2%', ([IO.File]::ReadAllText('%svg2%') -replace \"`r`n\", \"`n\" -replace '\<path .*?fill="""none""".*?/\>', '' -replace \"`n`n\", \"`n\" -replace '(\<style)/\>', '$1>path{stroke:none}</style>'))};"

      exit /b

  • Run it.