baalco

Hello Amit,

meanwhile I found the solution just adding the following code to the style.css of the OceanWP child theme:

p {
margin-top: 8px;
margin-bottom: 8px;
}

And adding a blank line inside a paragraph with Shift + Enter for beginning a new paragraph isn’t we way to go I suppose. Just hitting Enter opens a new paragraph block automatically and then the margins are adjusted due to the obove CSS code.

Sorry for asking such a simple question. I’m a beginner in WordPress Blocks. Feel free to delete this post.

Best regards,
Bernd

Just tried to “outline and expand” in Illustrator. With just three clicks: outline, expand and save again – it’s much easier than I thought. There even might be a chance for batch processing this task.

The only drawback of outline and expand is that the file size increased from 40kb (optimzed SVG) to 240kb. But nethertheless your are right – this is properly the cleanest and most reliable solution. So my long journey into this matter is coming to the end.

Thank you for beeing so patient with a beginner like me!

Hi Benbodhi,

thank you very much for the additional info!

I just realized that your code snippet only works for the first SVG file in a post. But then found out that it can be done separately for each SVG just adding its number to the snippet like: svg#svg-replaced-0, svg#svg-replaced-1, svg#svg-replaced-2 etc. ??

Now as an alternative I would like to follow your advice to “outline and expand” my SVG files. Never did that before, did not even know these terminy. Can you please recommend a software that will do this most easily and reliably?

Thank you!

P.S.: My SVG files do have all the same format: Only the viewbox is assigned with no width and height attributes. So they are ready for scaling.

P.S.: I found a CSS plugin that adds a custom CSS field to the end of every post in the Gutenberg editor called “WP Add Custom CSS”. So I can apply your provided CSS snippet to each post individually which allows me do use different SVG scalings in each post.

In the end that’s a workaround I can live with ??

I fooled myself. Sadly the problem isn’t gone. I didn’t realize that my old backup that I did restore contained PNG files instead of SVG files. So it doesn’t wonder that the PNG files scaled fine.

Meanwhile I deleted the width and height attributes in some of my SVG files. But that didn’t change the behaviour that I wrote in my first post. But together with the provided CSS snippet (svg#svg-replaced-0) it works under following condition:

If we want for example scale a SVG to 500px width than inside the Gutenberg editor image block settings under “Image Dimensions” the width should be 500px and at the same time the width attribute in the above CSS snippet should be 500px also. That means that for all added SVG files only one default size is possible.

Beside that in the back-end all SVG font graphics are shown in Times New Roman font. (Media library and the Gutenberg editor). And the same if the SVG are shown in a lightbox in the front-end.

I’ll give up on this. WordPress simply can’t scale SVG’s with build in font graphics properly. Whereas SVG graphics are such a great invention their full potential isn’t yet available in website programming. A real a sad story ??

Benbodhi thanks alot for your efforts. This seams to be a general problem and is not related to your fine plugin.

All the best,
Bernd

Thank you for the very useful tips and the code snippet. I learned alot from it.

Deleting the width and height attributes inside my SVG files is the way to go for me. Because both attributes are placed in the same part in the header of all my SVG files I can even write a small program to batch remove both elements.

But now comes the weird part that I can’t explain:

After switching back to an two days old backup of my WordPress database the SVG files scale perfectly fine inside the Gutenberg editor AND also in the front-end browser. And this with my original untouched SVG files (width and height attributes are still inside).

Did you do some magic behind the scenes?

I’m happy and confused at the same time. And ashamed having posted an issue that was caused by my corrupted WordPress installation and had nothing to do with your very fine plugin.

Sorry for that. So this thread can be closed and deleted.

Hi Benbodhi,

thank you very much for your reply.

The SVG files that I like to add step by step in future WordPress posts are several hundreds. They are graphic export files coming from an astrology application. In the past I used them in articles I wrote with LibreOffice Writer (a text program) and could scale them in there without a problem. So I was surprised how difficult it’s in WordPress to use these SVG files.

Your recommend “just outlining all text and expanding all objects in the SVG before uploading”.

Do I suspect correctly that this can be done with a vector graphics application like Adobe Illustrator or Inkscape? For several hundred SVG files that may not an easy task. Or is there a simpler solution?

If not I’m back to my first question if there’s any way to scale inline SVG files?

Hello Amit,

thanks for your reply.

Sorry the heading font size works fine – my fault.

I was irritated when I searched for a way to change the ‘Blog Post Title’ style. First I tried to do that under ‘Customizing / Typography / H2’. And some parameters like ‘Font Style’, ‘Line Height’ and ‘Font Color’ actually change the ‘Blog Post Title’. So I thought it’s the correct place to change the ‘Blog Post Title’ and wondered why ‘Font Size’ and some other parameters don’t work.

Meanwhile I found out that ‘Blog Post Title’ has its own menu item under ‘Customizing / Typography / Blog Post Title’. And changing the ‘Font Size’ works there as it should be.

Thanks again and keep up the good work on your fantastic OceanWP theme,
Bernd

• This reply was modified 5 years, 1 month ago by baalco.

Sorry Steve for mixed up the category.

Please delete my post. Thank You!