• You MUST read the Babiato Rules before making your first post otherwise you may get permanent warning points or a permanent Ban.

    Our resources on Babiato Forum are CLEAN and SAFE. So you can use them for development and testing purposes. If your are on Windows and have an antivirus that alerts you about a possible infection: Know it's a false positive because all scripts are double checked by our experts. We advise you to add Babiato to trusted sites/sources or disable your antivirus momentarily while downloading a resource. "Enjoy your presence on Babiato"

SVG file problem!

Niko Nemo

Active member
Trusted Uploader
May 28, 2019
506
228
43
Hello friends, again :)

I'm in the creation of a Logo portfolio website. So i wanted to import SVG files of the images. I have been installed Safe SVG, later Svg support plugin, later i added codes to php.functions, htaccess, etc...I have tried many things but nothing is working!

When i upload those SVG images in the WordPress in media manager, they are uploaded but just a grey thumbnail, and when i open some photo dimensions are 0*0, invisible...

Does anyone know how to solve this problem...?!

Thanks!
 
Hi.
The problem could be, for instance the code inside .svg like this:
Code:
<svg width="500.79px" height="200px" viewBox="0 0 500.79 200">
    <style type="text/css">
        #leaves{fill:#8CC63F;}
        #bark{fill:#A27729;}
    </style>
    <defs>
        <g id="tree">
            <!-- ... -->
        </g>
    </defs>
</svg>
In this scenario the <defs> tag prevents content in between from displaying. So you need to use in the HTML widget the code this:
Code:
<svg width="500.79px" height="200px" viewBox="0 0 500.79 200">
<use xlink:href="#tree" x="50" y="100" />
</svg>
The problem also could be: display: none; inside an .svg
 
Thanks, Japan !

I'm not so good with the codes...Where to add them in this case?!
Hi, @Niko Nemo!
The simplest way to make proper SVG logo is to open .svg file in Adobe Illustrator, and export it to svg file again with proper settings:
It also worth noticing that by doing that you make your .svg file safer (no malicious code inside from third party).
Then, you open .svg file in text editor and maybe need to explicitly set dimensions of vector craphic inside .svg file. Let's say from:
Code:
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 142 180"><title>ocean-logo</title>
<path d="M256.48,242.78c0-59,29-89.61,71.36-89.61s71.37,30.58,71.37,89.61c0,60.63-29,91.22-71.37,91.22S256.48,303.41,256.48,242.78Zm95.51,0c0-33.27-9.12-49.9-24.15-49.9s-24.14,16.63-24.14,49.9c0,34.88,9.12,51.51,24.14,51.51S352,277.66,352,242.78Z" transform="translate(-256.48 -153.17)" style="fill:#33c"/></svg>
To width="142" height="180":
Code:
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="142" height="180" viewBox="0 0 142 180"><title>ocean-logo</title>
<path d="M256.48,242.78c0-59,29-89.61,71.36-89.61s71.37,30.58,71.37,89.61c0,60.63-29,91.22-71.37,91.22S256.48,303.41,256.48,242.78Zm95.51,0c0-33.27-9.12-49.9-24.15-49.9s-24.14,16.63-24.14,49.9c0,34.88,9.12,51.51,24.14,51.51S352,277.66,352,242.78Z" transform="translate(-256.48 -153.17)" style="fill:#33c"/></svg>
 
Thanks again Japan!

yes, maybe that was the problem, ill check it out! Actually ill say this to the client who is sending me those files to prepare it properly! I'm on the Linux and don't use Illustrator, but maybe to install win 10 in a virtual machine will see...

It is not a logo but images of logos in the portfolio, lots of images!

Btw: When i import those SVG files to my localhost WordPress it works without a problem...
 
Btw: When i import those SVG files to my localhost WordPress it works without a problem...
That seems to indicate the problem is not with the .svg files, but rather with the hosting provider who might block uploading these files. Although, to be honest, that is a bit strange. Are you absolutely sure you have the exact same setup locally and in the hosting account?
 
  • Like
Reactions: Niko Nemo
Thanks frizzel!

I'm not sure that i have the same settings locally and in the account! Probably not! For the localhost, i use Bitnami WordPress. I contacted yesterday my hosting provider, they have tried to see if is it a problem on their side but without any solutions till now...
 
Are you using Elementor on this site?

If so go to Elementor > Settings > Advanced and set Enable Unfiltered Files Uploads to "enable"
 
Are you using Elementor on this site?

If so go to Elementor > Settings > Advanced and set Enable Unfiltered Files Uploads to "enable"

Thanks medw1311!

I tried it right now but is the same...
 
when working with SVG, sometime you need to explicitly define the dimension (you can set it thru css). Try to insert that 0*0 svg into a image widget in elementor and set a width in px.

Thanks jancok!

It is acting like a broken image, can't fix it like this way...
 
have you tried other svg files? I'm using SVP Support on several sites with different hosting environment and never had any problem. If it's not the file then I don't know what is. Perhaps it could help to inspect element on your browser, see if there's any error thrown?
 
  • Like
Reactions: Niko Nemo
Maybe i found a solution...

I opened image in Inkscape, ungrouped it till the end, then Object to path, etc
I'm not good with Illustrator and Inscape at all but i think the problem is when you finish working in Illustrator you need to transform text to path and objects to path, something like that, I'm not sure at all but doing that I'm able to import images now...

Will see what will happen...
 
  • Like
Reactions: smalok
have you tried other svg files? I'm using SVP Support on several sites with different hosting environment and never had any problem. If it's not the file then I don't know what is. Perhaps it could help to inspect element on your browser, see if there's any error thrown?

I have tried lots of different Svg files until now...
 
Maybe i found a solution...

I opened image in Inkscape, ungrouped it till the end, then Object to path, etc
I'm not good with Illustrator and Inscape at all but i think the problem is when you finish working in Illustrator you need to transform text to path and objects to path, something like that, I'm not sure at all but doing that I'm able to import images now...

Will see what will happen...

one thing I'd like to do with my svgs is to compress it before uploading. I use SVGOMG (https://jakearchibald.github.io/svgomg/). try it with your svg, if your file isn't shown correctly then your file is the problem.
 
That's good advice! I optimized them with some online tool, but ill try it with this one You recommend me!

Whats the recommended size for SVG file, for example when you want with Illustrator or Inkscape to create an SVG file, can we there make some "ideal" size...!?
 
That's good advice! I optimized them with some online tool, but ill try it with this one You recommend me!

Whats the recommended size for SVG file, for example when you want with Illustrator or Inkscape to create an SVG file, can we there make some "ideal" size...!?
I don't really know about this but since svg can be scaled I usually make it around 600*600 as a starting point, it doesn't really matter cmiww.
 
Thanks again Japan!

yes, maybe that was the problem, ill check it out! Actually ill say this to the client who is sending me those files to prepare it properly! I'm on the Linux and don't use Illustrator, but maybe to install win 10 in a virtual machine will see...

It is not a logo but images of logos in the portfolio, lots of images!

Btw: When i import those SVG files to my localhost WordPress it works without a problem...
Hi again, @Niko Nemo!
The case you wrote about of use .svg as a collection of logos in one file implies using a <symbol> element inside an "collection" .svg and then refer every single logo via;
referal to <symbol> to "collection" .svg file in case of HTTP/2:
SVG:
<use xlink:href="/logos.svg#adidas"/>
or inline SVG in case of HTTP/1.1:
SVG:
<use xlink:href="#adidas"/>

The SVG is a complex topic, so if you want use it often, and I guess you do - it is definitely worth time investing :).
Attached is a great book about the topic:
Using SVG with CSS3 and HTML5
 
AdBlock Detected

We get it, advertisements are annoying!

However in order to keep our huge array of resources free of charge we need to generate income from ads so to use the site you will need to turn off your adblocker.

If you'd like to have an ad free experience you can become a Babiato Lover by donating as little as $5 per month. Click on the Donate menu tab for more info.

I've Disabled AdBlock