SVG file problem!

Niko Nemo · Sep 25, 2020

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!

Japan · Sep 25, 2020

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

Niko Nemo · Sep 25, 2020

Thanks, Japan !

I'm not so good with the codes...Where to add them in this case?!

Japan · Sep 26, 2020

Niko Nemo said:
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:

How to export SVG

Learn how to export lightweight, modern SVG that is optimized for web and mobile workflows.

helpx.adobe.com

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>

Niko Nemo · Sep 26, 2020

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...

frizzel · Sep 26, 2020

Niko Nemo said:
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?

Niko Nemo · Sep 26, 2020

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...

MrSam_1 · Sep 26, 2020

Are you using Elementor on this site?

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

jancok · Sep 26, 2020

when i open some photo dimensions are 0*0, invisible...

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.

Niko Nemo · Sep 26, 2020

medw1311 said:
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...

MrSam_1 · Sep 26, 2020

Niko Nemo said:
Thanks medw1311!

I tried it right now but is the same...

Okay, I'm not sure what else to suggest then.

Niko Nemo · Sep 26, 2020

jancok said:
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...

jancok · Sep 26, 2020

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?

Niko Nemo · Sep 26, 2020

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...

Niko Nemo · Sep 26, 2020

jancok said:
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...

jancok · Sep 26, 2020

Niko Nemo said:
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.

Niko Nemo · Sep 26, 2020

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...!?

jancok · Sep 26, 2020

Niko Nemo said:
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.

Niko Nemo · Sep 26, 2020

I see...

Thanks to all dear people

Japan · Sep 26, 2020

Niko Nemo said:
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

SVG file problem!

Welcome to Original Babiato! All Resource are Free and No downloading Limit.. Join Our Official Telegram Channel For updates Bypass All the resource restrictions/Password/Key? Read here! Read Before submitting Resource Read here!Support Our Work By Donating Click here!

Join Our Official Telegram Channel For updates Bypass All the resource restrictions/Password/Key? Read here! Read Before submitting Resource Read here!

Support Our Work By Donating Click here!

Active member

Active member

Active member

Active member

Active member

Well-known member

Active member

Well-known member

Active member

Active member

Well-known member

Active member

Active member

Active member

Active member

Active member

Active member

Active member

Active member

Active member

Similar threads

Forum statistics

Share this page

Welcome to Original Babiato! All Resource are Free and No downloading Limit..
Join Our Official Telegram Channel For updates
Bypass All the resource restrictions/Password/Key? Read here!
Read Before submitting Resource Read here!
Support Our Work By Donating Click here!

Join Our Official Telegram Channel For updates
Bypass All the resource restrictions/Password/Key? Read here!
Read Before submitting Resource Read here!