scratchfoundation/scratch-paint

"Uncaught Error: TypeError: vector is null" when viewing SVGs optimised by SVGO

Opened this issue · 0 comments

Steps to Reproduce

  1. Take any SVG file. (In the GIF below I'm exporting Scratch Cat)
  2. Use SVGO to optimize the file, enabling “Round/rewrite paths” & “Merge paths”. (I'm using https://jakearchibald.github.io/svgomg/, a JavaScript frontend for SVGO)
  3. Upload the processed file into scratch-gui, either as a sprite or a costume.

Expected Behavior

scratch-gui imports the file exactly as in SVGOMG's preview, and scratch-paint is able to view and edit it.

Actual Behavior

scratch-gui imports and correctly shows the SVG on the stage, but attempting to open the costume in scratch-paint (done automatically if importing as a costume and not as a sprite, or by clicking it in the costume list) causes it to crash instantly. This persists across saves and reloads. The only way to restore access to scratch-paint is by reloading, switching to a different costume via the switch costume to [... v] block, and then deleting the offending costume via right-click.

https://i.imgur.com/pvlt1rs.gif

Uploading the file into the playground (https://llk.github.io/scratch-paint/) throws this error in browser console:

16:29:04.019 Error: TypeError: vector is null
    onError paper-full.js:15725
    onLoad paper-full.js:15716
    importSVG paper-full.js:15751
    importSVG paper-full.js:15766
    importSvg paper-canvas.jsx:220
    wrapper Lodash
    importImage paper-canvas.jsx:174
    switchCostume paper-canvas.jsx:122
    wrapper Lodash
    componentWillReceiveProps paper-canvas.jsx:69
    React 11
        ng
        Kg
        th
        uh
        Rh
        Uh
        Sh
        wh
        kg
        enqueueSetState
        setState
    onload playground.jsx:156
    onUploadImage playground.jsx:153
    wrapper Lodash
    React 32
        ia
        invokeGuardedCallback
        invokeGuardedCallbackAndCatchFirstError
        za
        Da
        Fa
        Ba
        Ia
        Ja
        Fd
        Yh
        Wb
        Kd
        L
        Oe
        Re
        Sg
        sh
        th
        uh
        Rh
        Uh
        Sh
        wh
        kg
        bi
        di
        render
        oi
        Zh
        oi
        render
    <anonymous> playground.jsx:182
    Webpack 3
        __webpack_require__
        <anonymous>
        <anonymous>
react-dom.production.min.js:187
16:29:04.022 Uncaught Error: TypeError: vector is null
    onError paper-full.js:15725
    onLoad paper-full.js:15716
    importSVG paper-full.js:15751
    importSVG paper-full.js:15766
    importSvg paper-canvas.jsx:220
    wrapper Lodash
    importImage paper-canvas.jsx:174
    switchCostume paper-canvas.jsx:122
    wrapper Lodash
    componentWillReceiveProps paper-canvas.jsx:69
    React 11
        ng
        Kg
        th
        uh
        Rh
        Uh
        Sh
        wh
        kg
        enqueueSetState
        setState
    onload playground.jsx:156
    onUploadImage playground.jsx:153
    wrapper Lodash
    React 32
        ia
        invokeGuardedCallback
        invokeGuardedCallbackAndCatchFirstError
        za
        Da
        Fa
        Ba
        Ia
        Ja
        Fd
        Yh
        Wb
        Kd
        L
        Oe
        Re
        Sg
        sh
        th
        uh
        Rh
        Uh
        Sh
        wh
        kg
        bi
        di
        render
        oi
        Zh
        oi
        render
    <anonymous> playground.jsx:182
    Webpack 3
        __webpack_require__
        <anonymous>
        <anonymous>
paper-full.js:15725
    onError paper-full.js:15725
    onLoad paper-full.js:15716
    importSVG paper-full.js:15751
    importSVG paper-full.js:15766
    importSvg paper-canvas.jsx:220
    wrapper Lodash
    importImage paper-canvas.jsx:174
    switchCostume paper-canvas.jsx:122
    wrapper Lodash
    componentWillReceiveProps paper-canvas.jsx:69
    React 11
        ng
        Kg
        th
        uh
        Rh
        Uh
        Sh
        wh
        kg
        enqueueSetState
        setState
    onload playground.jsx:156
    (Async: EventHandlerNonNull)
    onUploadImage playground.jsx:153
    wrapper Lodash
    React 13
        ia
        invokeGuardedCallback
        invokeGuardedCallbackAndCatchFirstError
        za
        Da
        Fa
        Ba
        Ia
        Ja
        Fd
        Yh
        Wb
        Kd
    Kd self-hosted:1208
    React 19
        (Async: EventListener.handleEvent)
    L
        Oe
        Re
        Sg
        sh
        th
        uh
        Rh
        Uh
        Sh
        wh
        kg
        bi
        di
        render
        oi
        Zh
        oi
        render
    <anonymous> playground.jsx:182
    Webpack 3
        __webpack_require__
        <anonymous>
        <anonymous>

Operating System and Browser

Windows 10, Firefox 82.0.2