Inline render doesn’t seem to work

  • Resolved brucetm

    (@brucetm)


    6 years ago

    Hello:

    I can’t figure out how to get this plugin to render SVG inline, can you advise? Basic SVG img support works though. Below tests are all inspected using VIew Source in Chrome.

    Here’s what I tried:

    I enabled advanced options.

    I tried inlining my site logo. Automatic Insertion of Class didn’t add a class when I inserted the logo image. Force Inline SVG didn’t do anything. My theme does not support custom classes on the logo, so I didn’t try manually adding.

    I tried inserting an image via an Elementor image widget, then using the widget’s custom classes field to add the target class, but elementor adds the class to a wrapper, not the img directly. Maybe that’s why that didn’t work?

    I tried inserting an image into a page, in text/html view, and manually adding target class in text/html view. I thought this would work. But didn’t.

    I tried enabling Automatic Insertion of class. Ths did add class (only on new insertions) but did not result in inlined svg.

    I tried Force Inline SVG. Didn’t do anything.

    I tried my own class name instead of the default. No difference.

    I disabled all other plugins to see if there was a conflict. No difference.

    Some but not all of these tests resulted in a class being added to the SVG img, but none resulted in the targeted img being replaced with inline svg.

    What else should I try? Any WP config things to check?

    Thanks!

    Bruce

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

    (@benbodhi)

    Hey Bruce,

    Sounds like you’re having a real hard time making it happen.

    First, let’s focus on getting an SVG inlined in a post. Then we can try to inline whichever one you actually need rendered inline. Not all SVGs should be rendered inline, only if you need to access the internal structure of the code in the markup.

    To be honest, the quickest way would be for me to take a quick look myself since you have done a lot of troubleshooting. But please do try reverting to the twentyseventeen theme to rule out the theme you’re using. Sometimes themes can do weird implementation of SVG which can conflict.

    So:

    – Make sure advanced settings is checked in the SVG Support settings (no forced inline, no custom class or anything else)
    – Revert to twentyseventeen theme
    – Disable all other plugins
    – Create new post and in the content area, add media and upload your SVG
    – Switch to text editor and throw in the class="style-svg" to your tag
    – Publish post and check frontend

    If this still doesn’t work, please shoot me a link to that new post.

    Failing that, you can send temp login details to [email protected] and I can do some quick tests myself.

    Thread Starter brucetm

    (@brucetm)

    Thank you for the detailed troubleshooting!

    I understand your point about inline, I should have mentioned that my goal is animation of site elements, so I was specifically asking about the inlining feature. SVGs can be referenced as images no problem.

    I followed your checklist. No luck with 2017 theme, all plugins except yours disabled, advanced selected, none of the advanced options checked.

    If inlining works with that theme when you try it, one guess is that my install isn’t clean enough. Before trying 2017, I tried Astra, OceanWP and GeneratePress. So things are a bit messy.

    The post is at https://playhacker.com/inline-svg-test-7 (but by the time you see it, it won’t be 2017 theme anymore so not sure if it’ll still be helpful)

    Thanks again for your time,

    Bruce

    Plugin Author Benbodhi

    (@benbodhi)

    Hi there,

    That worked!
    The SVG in that post is definitely rendered inline and it is while twentyseventeen is active.
    Screenshot: https://www.dropbox.com/s/dcepf59g82mafi4/Screenshot%202018-11-28%2012.39.42.png?dl=0

    Plugin Author Benbodhi

    (@benbodhi)

    So, from here, I would activate each plugin one by one and see if anything changes, testing that SVG is still inline each time. Then the theme. Maybe start with the theme since I feel like it’s the most likely culprit.

    Thread Starter brucetm

    (@brucetm)

    Thanks for the quick feedback!

    Well, I think it’s probably not the theme, but me! I was viewing page source using CTL-U in chrome. When doing that, the tagged file is not rendered inline.

    But when I copied your example and used the dev tools element inspector instead, I could see your point.

    Now I’ll go back and replace my theme and plugins and try again. I’m guessing it was working all along, and I just don’t understand the difference between View Source and Inspect ??

    • This reply was modified 6 years ago by brucetm.
    Plugin Author Benbodhi

    (@benbodhi)

    Now that’s interesting… I have never noticed that before. But I imagine it is because the way my plugin fires during the actual page load and mustn;t in the page source view.
    The DOM elements are searched then replaced by the SVG code only when the actual page is loaded apparently. So when “View page source” is checked, it will only show the standard img tag.

    Thanks for pointing this out, and I’m glad we got to the bottom of it and there’s not actually any issue ??

    The inspector is perfect for examining the current page source and highlights elements as you look. I never use the view page source option to be honest, hence why I have never noticed that it doesn’t render the SVG inline in there.

    Thanks for your patience and support in using my plugin. Please don’t hesitate to contact me if you have any further issues.

    And if you would please consider leaving a review, I would be truly grateful.
    https://www.ads-software.com/support/plugin/svg-support/reviews/?rate=5#new-post

    Thread Starter brucetm

    (@brucetm)

    Thanks again for your help! Two more questions:

    1. Can you suggest how to handle site logo? Don’t see how to add a class to image added through the customizer.

    2. Can it work with Elementor? I added the class to widget containing the SVG, but it gets added a couple of levels up from the img element, so your plugin doesn’t find it.

    Thanks again,

    Bruce

    Plugin Author Benbodhi

    (@benbodhi)

    1. The site logo depends on the theme entirely as the theme’s header is where the logo is implemented. It would be different for all themes, but the logo code in the header.php file would be my first place to look.

    2. I don’t use that plugin. However, if there is a code/plain text element available to use, then I would use that and just place the <img src="your-svg.svg" class="style-svg" /> directly in to that.

    I must try Elementor out so I can see how mine interacts with it and see if I can make a better/deeper integration in the future since it’s such a hugely popular plugin.

    I hope this helps.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Inline render doesn’t seem to work’ is closed to new replies.