Corruption with Certain SVG Codes

  • Resolved TrekRight

    (@trekright)


    2 years, 4 months ago

    REPRODUCE:
    1. Create a new post.
    2. Add an Icon Box.
    3. Paste in one of the SVG codes below (the block will immediately become corrupted, with a message of “This block has encountered an error and cannot be previewed.”)
    4. Click ‘Save’ and exit the editor.
    5. Attempt to re-open the same post.

    RESULT:
    The post cannot be opened any longer. Only a blank white screen results. To get into the post again, it is necessary to disable GreenShift and then remove the unrecognized block.

    I assume the following SVG icon codes are malformed in some way (though they display without error in my graphics utilities). The issue is that GreenShift’s Icon Box isn’t handling the bad SVG elegantly.

    In a random selection of SVG icons that I tested, I encountered the issue in approximately 4% of icons.

    Note, when the Icon Box block reports the error (before the save-exit steps), the block cannot be edited any longer. The only option is to delete the block. Is there a way to retain the ability to edit the block even in an error situation (so that the bad SVG code could be removed / fixed)?

    EXAMPLE ICON 01:

    <?xml version=”1.0″ ?><!DOCTYPE svg PUBLIC ‘-//W3C//DTD SVG 1.1//EN’ ‘https://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd’><svg width=”100px” height=”100px” viewBox=”0 0 100 100″ style=”enable-background:new 0 0 100 100;” version=”1.1″ xml:space=”preserve” xmlns=”https://www.w3.org/2000/svg&#8221; xmlns:xlink=”https://www.w3.org/1999/xlink”><g id=”_x31_”/><g id=”_x32_”/><g id=”_x33_”/><g id=”_x34_”/><g id=”_x35_”/><g id=”_x36_”/><g id=”_x37_”/><g id=”_x38__x27_”/><g id=”_x39_”/><g id=”_x31_0″/><g id=”_x31_1″><path d=”M78.9,84.7H21.1c-5.1,0-9.2-4.1-9.2-9.2s4.1-9.2,9.2-9.2h57.8c5.1,0,9.2,4.1,9.2,9.2S84,84.7,78.9,84.7z M21.1,69.2 c-3.4,0-6.2,2.8-6.2,6.2c0,3.4,2.8,6.2,6.2,6.2h57.8c3.4,0,6.2-2.8,6.2-6.2c0-3.4-2.8-6.2-6.2-6.2H21.1z M50,68.4 c-11.3,0-20.5-9.2-20.5-20.5c0-10.5,1.1-16.5,3.6-18.9c2.3-2.2,4.7-0.3,6.4,1c1.6,1.2,2.7,2,3.8,1.7c1.4-0.4,3.6-2.8,6.4-11.6 c1.4-4.3,3.6-5,5.2-4.7c7.1,1.1,15.6,24,15.6,32.5C70.5,59.2,61.3,68.4,50,68.4z M35.5,31c-0.1,0-0.2,0-0.3,0.1 c-1.2,1.2-2.7,5.1-2.7,16.7c0,9.6,7.8,17.5,17.5,17.5s17.5-7.8,17.5-17.5c0-9-8.8-28.9-13.1-29.5c-0.9-0.1-1.6,1.8-1.9,2.7 c-2.7,8.4-5.2,12.6-8.3,13.6c-2.7,0.8-4.9-0.9-6.6-2.2C36.3,31.4,35.8,31,35.5,31z M50,68.4c-6.1,0-11-4.9-11-11 c0-5.5,0.6-8.6,2-10c1.6-1.6,3.3-0.2,4.2,0.4c0.4,0.3,1,0.8,1.2,0.7c0.1,0,1.2-0.5,2.7-5.3c0.9-2.8,2.5-3,3.4-2.9 c4.2,0.7,8.4,12.8,8.4,17C61,63.4,56.1,68.4,50,68.4z M42.9,49.9c-0.4,0.7-0.9,2.5-0.9,7.5c0,4.4,3.6,8,8,8s8-3.6,8-8 c0-4.1-3.9-12.9-5.7-13.9c-0.1,0.1-0.2,0.4-0.3,0.7c-1.4,4.5-2.8,6.7-4.7,7.3c-1.7,0.5-3.1-0.5-4-1.2C43.2,50.1,43,50,42.9,49.9z M36.6,75.8c0-0.8-0.7-1.5-1.5-1.5h-9.7c-0.8,0-1.5,0.7-1.5,1.5s0.7,1.5,1.5,1.5h9.7C36,77.3,36.6,76.6,36.6,75.8z M76.4,75.8 c0-0.8-0.7-1.5-1.5-1.5h-9.7c-0.8,0-1.5,0.7-1.5,1.5s0.7,1.5,1.5,1.5h9.7C75.7,77.3,76.4,76.6,76.4,75.8z”/></g><g id=”_x31_2″/><g id=”_x31_3″/><g id=”_x31_4″/><g id=”_x31_5″/><g id=”_x31_6″/><g id=”_x31_7″/><g id=”_x31_8″/><g id=”_x31_9″/><g id=”_x32_0″/><g id=”_x32_1″/><g id=”_x32_2″/><g id=”_x32_3″/><g id=”_x32_4″/><g id=”_x32_5″/></svg>

    EXAMPLE ICON #2:
    <?xml version=”1.0″ ?><svg width=”64px” height=”64px” viewBox=”0 0 64 64″ style=”enable-background:new 0 0 64 64;” version=”1.1″ xml:space=”preserve” xmlns=”https://www.w3.org/2000/svg&#8221; xmlns:xlink=”https://www.w3.org/1999/xlink”><g id=”Layer_2″/><g id=”Layer_3″/><g id=”Layer_4″/><g id=”Layer_5″/><g id=”Layer_6″/><g id=”Layer_7″/><g id=”Layer_8″/><g id=”Layer_9″/><g id=”Layer_10″/><g id=”Layer_11″/><g id=”Layer_12″><g><path d=”M62.9,49c0-5.1-0.6-10-1.1-14.7c-0.6-5.4-1.2-10.9-1-17V7.9c0-0.6-0.5-1.1-1.1-1.1h-8.5c-0.9-2-3.9-6.8-13-6.8 c-0.6,0-1.1,0.5-1.1,1.1v5.7h-1.4c-0.6,0-1.1,0.5-1.1,1.1l0,9.3c-0.5,6.3-2,10.6-4,13.6c0,0,0,0,0,0c0,0,0,0,0,0 c-1.3,1.8-2.7,3.1-4.3,4.1c0,0,0,0,0,0c0,0,0,0,0,0c-3.8,2.2-8.2,2.3-12,2.5c-1.9,0.1-3.5,0.1-4.8,0.4c-3.1,0.7-5.3,2.3-6.7,4.8 c-2.5,4.4-2.1,11.2,1.1,20.8c0.2,0.5,0.6,0.8,1,0.8h2.8c0.6,0,1.1-0.5,1.1-1.1v-0.1L9,63.4c0.2,0.4,0.6,0.6,1,0.6h3.6 c0.6,0,1.1-0.5,1.1-1.1v-0.4l0.8,1c0.2,0.3,0.5,0.4,0.9,0.4h3.7c0.6,0,1.1-0.5,1.1-1.1v-0.3l0.6,0.9c0.2,0.3,0.5,0.5,0.9,0.5h2.7 c0.6,0,1.1-0.5,1.1-1.1v-0.6l1.1,1.3c0.2,0.2,0.5,0.4,0.8,0.4H32c0.2,0,0.5-0.1,0.7-0.2c5.2-4,10.1-4.3,11.8-4.3l1.8,3.9 c0.2,0.4,0.6,0.6,1,0.6h4.8c0.6,0,1.1-0.5,1.1-1.1v-1l1.5,1.7c0.2,0.3,0.5,0.4,0.8,0.4h5c0.4,0,0.8-0.3,1-0.6 C63,60,62.9,55.6,62.9,49z M39.3,2.2c5.8,0.3,8.3,2.9,9.4,4.5h-9.4V2.2z M4.6,43.5c1.1-1.9,2.8-3.1,5.3-3.7 c1.1-0.3,2.6-0.3,4.4-0.3c1.5,0,3.3-0.1,5.1-0.3V43c0,0.6,0.5,1.1,1.1,1.1s1.1-0.5,1.1-1.1v-4.2c1.6-0.3,3.1-0.8,4.7-1.6l2,3.9 c0.2,0.4,0.6,0.6,1,0.6c0.2,0,0.3,0,0.5-0.1c0.5-0.3,0.8-0.9,0.5-1.5l-2-4c1.2-0.8,2.4-1.9,3.4-3.1l4.2,3.6 c0.2,0.2,0.5,0.3,0.7,0.3c0.3,0,0.6-0.1,0.8-0.4c0.4-0.5,0.3-1.2-0.1-1.6l-4.4-3.8c0.7-1.2,1.4-2.6,2-4.1l5.3,2.2 c0.1,0.1,0.3,0.1,0.4,0.1c0.4,0,0.8-0.3,1-0.7c0.2-0.6,0-1.2-0.6-1.4l-5.5-2.3c0.6-2.2,1.1-4.8,1.3-7.7V9h1.4h12.2h8.2l0,8.3 c-0.1,6.2,0.5,11.8,1.1,17.2c0.5,4.6,1,9.4,1.1,14.4c0,0.4,0,0.9,0,1.3c-3.1-0.2-11.7-0.5-22.4,1.5c-8.1,1.5-20.7,2.4-34.6,2.4 C3,49.5,3.2,46,4.6,43.5z M59.7,61.8H56l-3.1-3.7c-0.3-0.4-0.8-0.5-1.2-0.3c-0.4,0.2-0.7,0.6-0.7,1v3h-3L46.2,58 c-0.2-0.3-0.5-0.6-0.9-0.6c-0.3,0-6.7-0.7-13.6,4.5h-2.7l-2.7-3.2c-0.3-0.4-0.8-0.5-1.2-0.3c-0.4,0.2-0.7,0.6-0.7,1v2.4h-1 L21,58.5c-0.3-0.4-0.8-0.6-1.2-0.4c-0.5,0.1-0.8,0.6-0.8,1.1v2.7h-2.1l-2.4-3.2c-0.3-0.4-0.8-0.5-1.2-0.4c-0.4,0.2-0.8,0.6-0.8,1 v2.6h-1.8L8.6,58c-0.2-0.4-0.8-0.7-1.2-0.5c-0.5,0.1-0.8,0.6-0.8,1.1v3.2H5.6C5,59.9,4.5,58,4.2,56.4c8.7,0,23.6-0.4,34.5-2.4 c10.6-1.9,19.2-1.6,22-1.4C60.7,56.5,60.5,59.5,59.7,61.8z”/></g></g><g id=”Layer_13″/><g id=”Layer_15″/><g id=”Layer_16″/><g id=”Layer_17″/><g id=”Layer_18″/><g id=”Layer_19″/><g id=”Layer_20″/><g id=”Layer_21″/><g id=”Layer_22″/><g id=”Layer_23″/><g id=”Layer_24″/><g id=”Layer_25″/><g id=”Layer_26″/><g id=”Layer_27″/></svg>

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author wpsoul

    (@wpsoul)

    Greenshift clean svg code before saving, but on some WordPress installations you can have additional security checking

    I recommend to clean xmlns:xlink links

    If it doesn’t help, you can load them as images in icon picker panels

    Plugin Author wpsoul

    (@wpsoul)

    Also remove next <?xml version=”1.0″ ?>

    I’ve had this issues too…
    If you have macOS I can recommend “ImageOptim”.
    I have tested it with ugly Illustrator SVGs.
    It reduces the code a lot and after that I never had problems after pasting it to the SVG code section in GreenShift.

    Thread Starter TrekRight

    (@trekright)

    Thanks @jugibur – that’s a good suggestion as well. Hopefully GreenShift will be able to improve their validation code at some point but at least there are workarounds for now.

    Plugin Author wpsoul

    (@wpsoul)

    As I wrote, it’s not related to plugin, it’s related to wordpress core. We simply can’t affect this because of security reasons. More cleaning can have totally broken block. So, you need to add such code as svg image on site.

    Thread Starter TrekRight

    (@trekright)

    Ah, thanks for the clarification. I hadn’t realized you were saying it was a WordPress security issue.

    Plugin Author wpsoul

    (@wpsoul)

    It’s not like issue. It’s just not allowed in current time. We use some hack to allow code and some cleaning but not always it works. Once WordPress will have own solution to clean SVG, we, of course, implement it

    Thread Starter TrekRight

    (@trekright)

    Cool. Thanks for the info.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Corruption with Certain SVG Codes’ is closed to new replies.