Some inline SVGs blink and disappear

  • Resolved agueritz

    (@agueritz)


    2 years, 4 months ago

    I am trying to use inline SVG to embed diagrams in WP posts so that the contained text will be indexed to the page rather than the image hanging off the page. However, some images display properly and others just blink and disappear.
    If you use the browser inspector, the various parts of the image are on the page but are not visible.

    The images (from PowerPoint originally) have all been processed the same way through Inkscape and output as Optimised SVG so they have a viewBox and no height/width attributes. They display fine when not inline. The width of the inline images in WP is set by a custom class assigned on the WP image block (Additional Classes) so the SVG inherits the width from the figure tag created by that.
    I have the force inline option turned on.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter agueritz

    (@agueritz)

    I’ve copied the failing production site to staging so that I can get production running without inline images until the issue is resolved.
    The failing page can be found at https://staging.(domain in the post)/svg-test
    Thanks

    Thread Starter agueritz

    (@agueritz)

    Turned out this was an omission in adding the unique prefix when creating the optimised svg files. So the images were interfering with each other, now fixed (will probably start using scour in a powershell script instead of Inkscape).
    However I did also create a useful custom SVG Inline block using Genesis Custom Blocks which targets the IMG tag directly with ‘style-svg’ which you can’t do with the regular image block.

    • This reply was modified 2 years, 4 months ago by agueritz.
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Some inline SVGs blink and disappear’ is closed to new replies.