SVG images on WPSP – WP Show Posts

Tagged: SVG

This topic has 6 replies, 2 voices, and was last updated 2 years, 10 months ago by Rolandas.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
June 5, 2019 at 11:21 am #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?

June 6, 2019 at 4:49 pm #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.

October 29, 2020 at 2:52 pm #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.
October 29, 2020 at 3:37 pm #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>
```
October 30, 2020 at 11:34 am #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.

October 30, 2020 at 3:32 pm #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

November 3, 2020 at 7:21 am #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.
Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

[Resolved] SVG images on WPSP