Before you ask please READ THIS

SVG Sizes

in Rife Posts: 87
Hi All - Im using SVG for Images via the safe SVG plugin for WP. They display with no issue but how does the theme control the sizes? I am testing using SVG as a background image but need to make it way smaller. In January I can see that there are sizes for the background image used on the homepage but how do you suggest sizing the SVG's? Thanks

Comments

  • AirAir
    Posts: 10,970
    Hey:-)

    To be honest I didn't test it with SVG as background images. Could you show me how it looks on your page(link)?

    By default browser will stretch SVG to full width of the window - as far as I know.

    I believe it should be possible to control with CSS or even theme settings, but I first need to confirm where you have exactly used it.

    With kind regards.
  • Hi - I will let you know when I have a dev version online - working on local at mo. Is there a way to set the SVG size for any of the images?

    Yes the background SVG is very big :) I used it in the January theme home page at the top but its way too large without sizing

    I will be using SVG for the whole site - headers, blog featured image, image widgets etc

    Thanks
  • AirAir
    Posts: 10,970
    Hey :-)

    To be honest - I didn't use SVGs in those areas, and you are the first one to ask.

    I have just played around with some of those places + SVG, and below are my thoughts.

    For background on a page I have used small custom CSS to scale SVG down:
    .page .page-background {
        background-size: 200px;
    }
    However, it would require wider testing to see how it acts in different browsers.
    For different post types, it could require different CSS, so let me know where exactly are you using this.

    As for featured images - SVG takes available space in, so it should look good on the blog.

    When SVG is added as img tag, its size should be controlled by width and height, however, these attributes are not available in WordPress for SVG, so again they will be either stretched to 300x150px(browsers default size for "no-size" SVG) or stretched to full width of container.

    I believe we will have to work together on this as you go :-)

    I will also think about adding new options for background-size to set this max size for SVG.

    As you currently don't have your page online, please add screenshots of places where you set your SVG images, so I could be sure we are working on same features:-)

    With kind regards.


  • Hi - I will try and push a dev site online tomorrow as im running into issues with the SVG's and not being able to set any sizes for them :)
  • Hi dev site is up - sent you the details in an email as cant see a PM option here. You can do what you like with it :).
  • AirAir
    Posts: 10,970
    Hey, that is great.

    But what exactly you want me to check? Should I search for your changes?;-)

    With kind regards.
  • AirAir
    Posts: 10,970
    MyMetta said:
    I thought you wanted to take a look at how to size the SVG for a bgd image?

    I had to use an image widget instead of the video to get this look but
    it cant be used as its not mobile responsive in landscape mode - I had
    to make a few tweaks in portrait mode responsive in Elementor but this
    destroyed the landscape view. Elementor totally sucks at responsiveness.
    So I will have to remove this.

    Is there a way I can use the SVG as background image or anywhere and
    size it to match the theme design?

    I am having the same issues with other SVGs as cant size them in WP. I
    know its not your theme issue but just hoped that maybe theres a quick fix?
    If you could show me with a direct screenshot and/or link where you have set this SVG then I should be able to help.
    "Backgrounds" are set in so many places, that I could easily miss a place where you have set it :-)

    You can add a screenshot of place(s) in admin area/customizer/Elementor where you have added your SVGs :-)

    With kind regards.
  • Hi its on the home-copy page. Not used as a background image as could not size this.

    BUT I just found this plugin that works in line with Elementor - it does control the width and position but Im not sure now what to set it for for your designs

    Do you have default image sizes coded somewhere then I can use the same width at least to keep the responsiveness??

    You may want to use this in your designs - it seems to work well with safe svg as well

    https://wordpress.org/plugins/inline-svg-elementor/

    Im loving your email reply that adds to this forum - would love to know how you did this :)
  • AirAir
    Posts: 10,970
    MyMetta said: Im loving your email reply that adds to this forum - would love to know how you did this
    I have copied your e-mail content and added it in <blockquote></blockquote> tags ;-) You can mark part of my reply and click small box that will appear with name "Quote".
    MyMetta said: its on the home-copy page. Not used as a background image as could not size this.
    But where exactly ?:-) There is lot of going on there. Could you mark it on a screenshot?
    MyMetta said: Im not sure now what to set it for for your designs

    Do you have default image sizes coded somewhere then I can use the same width at least to keep the responsiveness??
    It all depends for what you will use this SVG. You said you wanted to use it many places.
    However, we don't have defined images sizes, as most sizes are controlled by settings in Customizer - so user decides on sizes ;-)


    Let's foucs on one SVG place for now and make it together work as you wish.
    Show me on the screenshot and I will do what I can to help :+1:

    With kind regards.
  • Hi Guys

    I have just got back to this.

    IF you can help that would be great - it may be the way I am adding SVG's but this is the issue

    SVG's used for background section images are not sizeable/responsive. If I try to size them before adding to WP you cant see them.

    They are contained only if you add them to an image box in a column but thats not what I want to do.

    Please take a look at the dev site homecolour page and the home page for examples

    I am trying to have a sized background section image at the top of the page - I cant do this so as a sort of workaround I tried using the SVG's as background overlays but the issue for both is the size and they dont seem to be responsive?? On tablet & mobile they auto move to the left..

    This may not be a theme issue - but if you can help at all that would be great.

    I just want to use SVG's as background images that I can size with the image on the right or left and text overlay that are responsive. Is this possible?? They look ok on desktop without the sizing but not good on mobiles at all.

    Thanks

    Will email new login details

  • AirAir
    Posts: 10,970
    Hey :-)

    I am not sure that I understand fully problem with SVG background and where they should be added, but I will try to login to your installation and play around with this.

    Sorry I didn't do it today - I was not available and now I am replying as it is already almost midnight :-)

    I will try to take a look at this at the weekend.

    With kind regards.
  • AirAir
    edited December 2018 Posts: 10,970
    Hey :-)
    MyMetta said: I just want to use SVG's as background images that I can size with the image on the right or left and text overlay that are responsive. Is this possible?? They look ok on desktop without the sizing but not good on mobiles at all.
    If you set option "Size" to "contain"(while setting up a background for the section) it seems to scale well on mobiles. Do you experience an issue with this option?


    With kind regards.

    PS. Please ignore this screenshot - I cannot delete it for now.
    screenshot-metta3.vip-2018.12.24-11-53-56.png
    836 x 491 - 18K
    Post edited by Air on
  • Posts: 87
    Hi - the issue seems to be that the SVG's are not sized by WP - so setting image size makes no difference. The SVG's are just massive as theres no way to control their size when used as a background images. The image box widget lets you change the width. I guess this is really an Elementor/WP issue? I have played around and used 2 columns instead with image boxes but its not ideal as cant get the right look.
  • AirAir
    Posts: 10,970
    MyMetta said: the issue seems to be that the SVG's are not sized by WP - so setting image size makes no difference.
    Yes, I told you already :-) SVG is special document format rather then image like pngs/jpgs.


    However, as I have said:
    Air said: If you set option "Size" to "contain"(while setting up a background for the section) it seems to scale well on mobiles. Do you experience an issue with this option?
    Have you tried this?

    With kind regards.
  • Posts: 87
    Hey the good news is V 2.4 Elementor takes care of this for background images!! Just as I finish doing it the hard column way lol :)

    You can size and position them with custom xy based on devices!
  • AirAir
    Posts: 10,970
    That is great news!
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!