Wall pattern disappears in SVG when embedded in website

[flip3]

When I embed a SVG file which I exported from Sweet Home 3D (Plan > Export to SVG format) into a website, the wall pattern disappears. Anyone has the same issue and eventually a solution?

Image opened locally:


Image embedded in website:


Thanks,

Philip

[flip3]

I add the links since it didn't work to embed images from DropBox in the thread:

Image opened locally
Image embedded in website

[Daniels118]

Can you share the svg file and the html code used to embed it into the web page?

[flip3]

Yes, sure. This is the SVG file.

... and my code is quite simple:

Code: Select all

<div class="floor-plans">
     <img src="/assets/photos/s001-lu/layout/Grundriss_S001-LU.svg" alt="">
</div>

... and some CSS applied to the image:

Code: Select all

.floor-plans img {
    width: 100%;
    height: 100%;
    max-height: 500px;
}

[flip3]

You can also check out the live result on this page when you scroll a bit down to "Grundskizze.

[Puybaret]

It’s really strange because when viewed on Dropbox web site, the SVG image looks correct!
Could a CSS style alter a SVG image?

[sjb007]

flip3. The link to the SVG file is on dropbox. Dropbox appears to be delivering a png on the dropbox page. It must be rendering the svg to png for some daft reason. I can't download the actual svg file unless I register an account with dropbox. No thanks.
My intent was to compare the SVG, but that is not currently possible.

What I can tell you is that the svg file on your lagerraum web page does not contain the necessary embedded image data (base64 encoded) for the hatching pattern. When you export from SH3D it encodes the pattern as a single large encoded image. This is missing in the server delivered file. So either you have modified the file after export, (i.e. you used Inkscape to remove the compass) or your server is messing with the file. I'm going to hazard a guess that the rental site is processing svg for some reason, and the image is lost.

[flip3]

Yes, you seem to be right. The CMS must have done a conversion to the image. The file I uploaded was 1.2MB. When I download it from the website, it is just 34kb. So, somewhere in between the data has been removed / lost. I will investigate this but many thanks for your "outside view".

[Keet]

Yes, you seem to be right. The CMS must have done a conversion to the image. The file I uploaded was 1.2MB. When I download it from the website, it is just 34kb. So, somewhere in between the data has been removed / lost. I will investigate this but many thanks for your "outside view".

Be glad the CMS converted the image. 1.2MB is way to big to use on a website. Imagine you have 3 or 4 of those images on a page. It would take ages to load on slower connections, not to mention the impact on data limits some providers have.
As you can see the quality of the 34kB image as displayed is fine, there's really no need for a huge image of 1.2MB. If you want users to be able to save the image in the original svg format make it a separate download.

To solve your problem create a much smaller png from the svg image and use that on the site.

[flip3]

Yes, I know. I just didn't figure out how to compress the file properly and I prefer to use SVG. I tried with Inkscape but afterwards the file wasn't readable. I will find a solution