inline SVG questions

  • Resolved brucetm

    (@brucetm)


    4 years, 5 months ago

    Hi!

    I can’t seem to make this plugin’s standard approach work, because almost no plugins let us target an IMG with a custom class.

    So I am now using force-all inline, and going through my site and dealing with the few gotchas that introduces.

    The main issue I see with this plugin is that in either of those approaches, the plugin swaps images out after page load.

    That results FOUC and layout shifting etc. which is not only janky looking but also going to get us SEO dinged one of these days as CLS becomes a serious target for Google.

    This may be a dumb question, but is it not possible to implement inline SVG rendering on the server side?

    I thought about how I might make every SVG visibility:none until the swap out is complete, but can’t figure that out either, and I guess that wouldn’t fix the underlying “how much space does this occupy” calc issue either.

    Also I might be able to fix it if I could somehow reliably inherit the EXACT dimensions of every single IMG, but I haven’t figured out how to do that yet.

    Do you have any thoughts on strategies?

    Thanks for the awesome plugin, so loving the ability to animate everything.

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

    (@benbodhi)

    Hey @brucetm

    Thanks for using my plugin!

    I’ve been thinking about implementing server side options for quite some time. But finding the time to do it is another thing. I’m slowly working on a new version of the plugin that will address a number of things. Maybe it’s time to make this happen.

    I totally understand where you’re coming from and will look at making this possible.

    Let me know if there’s anything I can help with in the meantime.

    Thread Starter brucetm

    (@brucetm)

    Yes, as you design your next rev, please consider the awesome performance benefits of server-side inlining. I understand that it would be a pain to do. I guess this is a labor of love project for you, but you should start selling it, or at least taking donations, to help fuel the dev.

    Update: I see you have a donate button (just donated). If you don’t want to go the paid-plugin route, you should at least make donation messaging much more prominent on the plugin page (mention it a bunch of times and make it a bright color etc.)

    Your plugin allows me to animate pretty much every illustration on my site, and it’s well worth paying for. I don’t have a good sense of how many potential users there are though…

    Plugin Author Benbodhi

    (@benbodhi)

    Thanks so much for your feedback! I truly appreciate it.

    I personally have enjoyed watching the purely organic growth without being too spammy with anything… However, I have always planned to monetize this plugin. I just need to do it in a nice way.

    I have taken this conversation on board very much. I am looking at implementing server side inlining and potentially some editing options in there. I won’t know for sure until I start building. But this will get more attention soon.

    Thread Starter brucetm

    (@brucetm)

    That’s great to hear that you are thinking about server-side implementation, it would make this plugin more like a part of wordpress than the way it works now, with client-side swap-outs which seems not only error-prone due to all the scripts running around the place, but also counter to some of the performance benefits of SVG.

    As you design that system, please consider letting us set inlining for SVGs on a case by case basis. My preference would be to use the standard “checkbox plus bulk edit” mechanism used in so many wordpress admin panels.

    Can you add a “make selected SVGs inline” and a “make selected SVGs not inline” choices to the bulk edit dropdown in media library? https://www.ads-software.com/support/article/media-library-screen/#media-library-list-view

    Plugin Author Benbodhi

    (@benbodhi)

    Oh that’s an interesting feature! I’ve been planning most of the control from a custom svg Gutenberg block space far. I’ll make note of this for sure.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘inline SVG questions’ is closed to new replies.

Tags