Hi Roger,

1. What SPPB Pro version you have?
2. What is full name of template that you are using?

In theory, if it worked in other addons in should work also in Image addon. Maybe you have to set only width and height, please check.

In the meantime, I will check on my own private site.

SP Page Builder Pro 3.8x + image addon + Helix Ultimate 2.0.11 - all works fine, I can add and see svg file(s), here is evidence

and svg file that I used (unzip before use)

svg-file2-vector.zip

Hi Paul

Thank you for your answer. I finally figured it out. The problem is Adobe Photoshop 2023. Officially svg is no longer supported, but it is possible to change a setting and get the svg support back. PS does something to the svg pictures what makes to pictures disappear in Page Builder Pro.

I'm using Joomla 4.2.6 and Page Builder Pro 4.0.7.

Just a question. I would like to show the pictures with a grey scale.

img {
filter: grayscale(100%);
}

but of course this makes all images grey. Tried to enter a CSS class name like "cert", but this didn't help. Can you please give me a hint. Or is there an easier way without CSS?

Add here

Hello

For me this doesn't work. The page logo will also be shown in greyscale.

Sorry for not providing an image. Somehow I don't get tthe functionality of the image button of this editor. The page is not accessible from the internet yet, so that I can't provide an URL.

The problem is Adobe Photoshop 2023. Officially svg is no longer supported, but it is possible to change a setting and get the svg support back. PS does something to the svg pictures what makes to pictures disappear in Page Builder Pro.

Hi Roger. Just for information. PS never worked with real SVG images, since it is a raster editor, not vector. All it did was placed JPG/PNG inside the SVG tag. Therefore, the use of PS for SVG has always been a bad and meaningless idea. That is why Adobe removed SVG support from PS. If you want to work with real SVG, use the Illustrator. And even in this case, you need to draw an image from scratch but not insert the finished one, which you downloaded if it is not in the SVG or vector format. You can finde vector grafic on freepik.com or flaticon.com and create SVGs from this.

About the size. If when creating SVG in PS or in Illustrator you choose a responsive SVG, then attributes of width and height are not added to the SVG tag. Therefore, you need to additionally set the width and height for such images through CSS, via editing svg code to add width and height atributes or using the addon settings.

For use grayscale filter (or any other code) isolated add your own class name in addon's CSS Class field and use it in your code.

.YOUR_OWN_CLASS_NAME {
filter: grayscale(100%);
}
/*or*/
.YOUR_OWN_CLASS_NAME img {
filter: grayscale(100%);
}

Hi Pavel

Thank you for your explanation. I figured out a way, that works for me. I imported the svg images in Inkscape and saved them as svg. This works fine in Page Builder.