Black Friday sale! Get 25% off WPSP Pro! Discount automatically applied at checkout.

[Resolved] SVG images on WPSP

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support SVG images on WPSP

Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #9744
    Rolandas
    Participant

    Hi
    I use GeneratePress Premium.
    Only for posts sharing purposes I want use png and jpg images like posts future images.
    I will hide them on posts (Disable Elements > Featured Image / Page Header).
    In posts I will use SVG’s as the first’s main image’s (with the same content as the hidden future image).
    In my blog images (logical and process diagrams) will be more important than texts.

    Question:
    It is possible to replace the images displayed on WPSP with first posts svg images (with managing svg image size)?
    Or there is another way?

    #9761
    Tom
    Keymaster

    Hi there,

    WPSP uses featured images, so you’d first need to find a solution to use the first image in your post as the featured image.

    There shouldn’t be any issues using an SVG image as long as you aren’t using the image resize options in your WPSP list settings.

    #21933
    Rolandas
    Participant

    Hi

    I am using the Safe SVG plugin.
    And then SVG images can be used in WPSP without any problems.

    Also, I set images sizes in SVG files e.g.:

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460 230" width="460px" height="230px">,
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460 288" width="460px" height="288px">,
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460 310" width="460px" height="310px">.

    and WP Show Post some settings:

    Columns: 2,
    Masonry: yes,
    Featured post: yes,
    Image width (px): 460px,
    Image height (px): nothing.

    I decided not to use this plugin because I create, edit and optimize SVG myself, and they are secure, but in that case, SVG images at WPSP stops working properly.

    If I leave Image width (px): 460px, then some images show and some do not.
    If I aren’t using the image resize options, svg image is in FUTURE POST displayed incorrectly.

    I could not find out how this plugin affects SVG behavior in WPSP.

    #21941
    Rolandas
    Participant

    When the Safe SVG plugin is enabled

    <div class="wp-show-posts-image wpsp-image-left">
      <a
        href="https://www.sisla.lt/testing/teisekuros-procesas-ministerijoje-1-dalis/"
        title="Teisėkūros procesas ministerijoje (schemų eskizai) 1 dalis"
        ><noscript
          ><img
            width="400"
            height="282"
            src="https://www.sisla.lt/testing/wp-content/uploads/2019/12/4218P00.svg"
            class="attachment-full size-full wp-post-image"
            alt="Ministerijos teisėkūros procesas"
            itemprop="image" /></noscript
        ><img
          width="400"
          height="282"
          src="https://www.sisla.lt/testing/wp-content/uploads/2019/12/4218P00.svg"
          data-src="https://www.sisla.lt/testing/wp-content/uploads/2019/12/4218P00.svg"
          class="attachment-full size-full wp-post-image ls-is-cached lazyloaded"
          alt="Ministerijos teisėkūros procesas"
          itemprop="image"
        />
      </a>
    </div>

    Plugin is disabled:

    <div class="wp-show-posts-image wpsp-image-left">
      <a
        href="https://www.sisla.lt/testing/verslo-proceso-aprasymas/"
        title="Verslo proceso greito aprašymo algoritmas"
      >
        <noscript
          ><img
            src=""
            alt="Verslo proceso greito aprašymo algoritmas"
            itemprop="image"
            class="left" /></noscript
        ><img
          src="data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20210%20140%22%3E%3C/svg%3E"
          data-src=""
          alt="Verslo proceso greito aprašymo algoritmas"
          itemprop="image"
          class="left ls-is-cached lazyloaded"
        />
      </a>
    </div>
    #21993
    Tom
    Keymaster

    Not sure what’s happening there – something else is adding noscript tags in.

    Safe SVG just makes it so you can actually upload SVGs to your site (WordPress will prevent it, otherwise). It shouldn’t do anything else that I’m aware of.

    #22012
    Rolandas
    Participant

    I think I found a reason why SVG images do not display or display incorrectly in WPSP after removing Safe SVG.
    Only I find it hard to explain

    #22133
    Rolandas
    Participant

    Hi

    Not sure what’s happening there – something else is adding noscript tags in.

    I found that the noscript tag adds the Autoptimize plugin.

    I found that after Safe SVG deactivating svg images WPSP is displayed badly (some are displayed, others are not).
    I changed Safe SVG to WP SVG images. This is a very very lightweight plugin.

    I also found that svg images work well in WPSP, their width must be smaller than the setting size WPSP > Images > Image width (px): ….
    Example: width on WPSP 460px and svg image width 459px – everything works great.
    If the 460 and 460 images in WPSP loading with a delay.
    If the width of svg images is larger than the set WPSP, it does not display it at all.

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.