problem with displaying the logo in SVG format on the blog (Wordpress)
I have 2 pages where I recently inserted a new logo in SVG format. Unfortunately, the standard img src=... code does not display the top line of large text in the logo, although opening the SVG file itself displays everything normally with the full text. This effect is visible on my blog at: https://blog.tripsoverpoland.pl/. On the second page at: https://tripsoverpoland.pl/ I had the same effect, but I found a workaround on some forum in the form of code: "<object data="TOPWPPLOGO.svg" type="image/svg+xml" style="width:100%; border:0; margin:0; padding:0;"></object>" and thanks to this the logo is displayed in its entirety on the page. Unfortunately, I cannot use such a code directly in Wordpress, because I upload the logo there through the application, and in the place of the logo I cannot use my own html code. Is there any effective way to solve this problem in Wordpress? Although I do not know if this is a problem with Wordpress or Firefox, because in all other browsers with a blog logo in SVG format there is no problem. Thank you very much in advance for looking into this problem. Best wishes Marek Wojciechowski
Modified by cor-el
All Replies (10)
title correction: problem with displaying the logo in SVG format on the blog (Wordpress)
standard html code for images:
once again standard html code for images - img-src=....
(deleted)
Modified by cor-el
I tried the mentioned tools, although I'm not very familiar with their operation. Deleting all history and all downloads by Firefox, or opening the window to private mode and downloading the blog page, do not change the situation with the display of the logo in SVG format. In the same session, opening only the SVG logo image from the blog page in a new window shows the entire logo, so the problem is between processing the html code from Wordpress and processing the logo image embedded in this code (img-src=...svg). Then the top part of the picture disappears. And that's only in Firefox with the html code: img-src. For code with <object>, Firefox correctly displays the entire logo.
Modified by tripsoverpoland
Sorry, my above reply seems to be meant for another thread, so I will remove it.
To which image are you referring? There is nothing obviously wrong when I load the page. Can you post a screenshot of how the image should appear?
The Trips over Poland tourist attractions text is missing with the IMG tag.
To better see what are the problems with my logo in SVG format, I created a test page for Firefox: https://tripsoverpoland.pl/firefox/ The logos with the img src=...svg code are marked with red (wrong display in Firefox) and the logos with the object svg code are marked with green (proper display in Firefox). Screenshot of this page attached. Because not only one blog logo is incorrectly displayed by Firefox using the code img src=...svg.
Modified by tripsoverpoland
To better see what are the problems with my logo in SVG format, I created a test page for Firefox: https://tripsoverpoland.pl/firefox/ The logos with the img src=...svg code are marked with red (wrong display in Firefox) and the logos with the object svg code are marked with green (proper display in Firefox).
Because not only one blog logo is incorrectly displayed by Firefox using the code img src=...svg. Screenshot of this page attached.
I spent a while in the Inkscape editor to check whether some minor adjustments to the SVG image could solve the reported problem. So I removed the top large title and pasted it back into the newly created area. I also changed the size of all fonts to integrals (without fractions). And basically this has already caused the SVG format logos to be displayed correctly in both codes (src img= and object..svg). So this workaround for Firefox seems to work, but it's not a definitive solution to this problem. The blog website (https://blog.tripsoverpoland.pl) displays the SVG logo without distortions (img src= code).
