Issues in SVG image displaying

  • Resolved kampun

    (@kampun)


    7 years, 5 months ago

    Hello Ben,
    After reading so much about many question here and on other websites about SVG usage related issues, I didn’t find the correct resolution. So I have my question as per following:
    I have uploaded my SVG images including my logo. I want to change my featured images in few pages by SVG images. Can you please help me? (P.N.: In my website at present at https://www.kampun.com/about/, I am not able to see the SVG image featured image and it is visible at front page(home page). I use Twenty seventeen theme.
    My best interest of this question is to set the SVG image with proper settings like width, height etc. I am not professinal dev but it is my interest to play with.
    Pl help.

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

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

    (@benbodhi)

    Hi there,

    You just need to set your image width in the CSS. This seems to work:

    .single-featured-image-header img {
    width: 100%;
}

    Let me know how you go.

    Thread Starter kampun

    (@kampun)

    Hello Ben,
    Thank you very much for the quick reply.
    I have added it to the customised CSS editor but no effect noted.
    Can I provide you my login details by email?

    Plugin Author Benbodhi

    (@benbodhi)

    It might just be to do with specificity… That worked in the browser inspector.
    But I’d be happy to take a quick look.
    [email protected]

    Thread Starter kampun

    (@kampun)

    Sent on your email address.

    • This reply was modified 7 years, 5 months ago by kampun.
    Plugin Author Benbodhi

    (@benbodhi)

    Hi, I added the CSS suggested and it works…
    I changed this:

    .single-featured-image-header img {
    height: 30vh;
}

    to this:

    .single-featured-image-header img {
    height: 30vh;
    width: 100%;
}

    Thanks for using my plugin ??

    • This reply was modified 7 years, 5 months ago by Benbodhi. Reason: code formatting
    Thread Starter kampun

    (@kampun)

    Thank you.
    Just quick question:
    As you can see this image is not covering the full page. As what i understand that SVG are stretchable without loosing the quality. How I can achieve stretching to fill the space on the left and right hand side on the featured image? or any other work around to fix it?

    Plugin Author Benbodhi

    (@benbodhi)

    Just change the height to auto:

    .single-featured-image-header img {
    height: auto;
    width: 100%;
}
    Thread Starter kampun

    (@kampun)

    Sorry for the all follow up.
    After doing that, I can see that my image file is too large which I don’t prefer. My intention is to have 30 t0 40% of vertical secreen height or so and the all width should be filled with the SVG image.
    Can we stretch it?

    Plugin Author Benbodhi

    (@benbodhi)

    This is beyond the scope of my plugin support unfortunately. This plugin is open source and I’m not paid to develop, maintain or support it.

    You’ll have to play with the size or use it as a background image in CSS.

    I would suggest you learn a little bit of CSS or hire a developer.

    I hope you understand.

    Thread Starter kampun

    (@kampun)

    Thank you very much for the support.
    I would definitely do the same.

    Plugin Author Benbodhi

    (@benbodhi)

    My pleasure, thank you for understanding ??

    Thread Starter kampun

    (@kampun)

    I have one quick solution for the above said problem.

    preserveAspectRatio=”none” attribute to the svg tag.

    Found at https://stackoverflow.com/questions/11658173/how-does-one-make-a-svg-background-that-stretches-rather-than-tiles

    Plugin Author Benbodhi

    (@benbodhi)

    Good news, glad you found a working solution.

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Issues in SVG image displaying’ is closed to new replies.