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
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.
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
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: 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.
But what exactly you want me to check? Should I search for your changes?;-)
With kind regards.
"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.
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
<blockquote></blockquote>
tags ;-) You can mark part of my reply and click small box that will appear with name "Quote".But where exactly ?:-) There is lot of going on there. Could you mark it on a screenshot?
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
With kind regards.
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
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.
With kind regards.
PS. Please ignore this screenshot - I cannot delete it for now.
However, as I have said: Have you tried this?
With kind regards.
You can size and position them with custom xy based on devices!