This is the technical support forum for WPML - the multilingual WordPress plugin.

Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.

This thread is resolved. Here is a description of the problem and solution.

Problem:Flag size when using svg format

Solution:When uploading an .svg file please make sure that it is correctly sized as if you upload a large size it will take effect in the front end and backend, its recommended to upload an 18x12px .svg file and then use CSS to increase its size

Relevant Documentation:

This topic contains 7 replies, has 3 voices.

Last updated by angeloL-6 1 year, 6 months ago.

Assigned support staff: Bobby.

Author Posts
March 28, 2018 at 7:03 am

toudM

We use svg images for flags (vector images).
The problems is that the system doesn't handle well this kind of pictures. They are too big in internet explorer and edge, too small in chrome and too big in wp-admin (chrome).

hidden link

March 29, 2018 at 12:23 am #1559590

Bobby
Supporter

Languages: English (English )

Timezone: America/Los_Angeles (GMT-07:00)

Hello,

by default the front end will show 18x12px for the flags in the menu.

depending on the theme you are using the footer language switcher might pick up a different size, which i can see when viewing your site in safari.

What size is the original .svg file you are uploading.
you have to make sure that all your images are the same size.

then you will need to use custom CSS to adjust the way you want them to look in the front end.

ex.

body .wpml-ls-menu-item .wpml-ls-flag {
    width: [XXX]px;
    height: [XXX]px;
}

that CSS will control the way the flags look in the menu.

I suggest to upload your .svg flags with 18x12px which is the standard and then use CSS to change their size.

March 29, 2018 at 6:41 pm #1560444

toudM

Hello Bobby.

The SVG is a vector. The proportion is 18x12. The problem is that all the system don't know how to handle this vector. If you will login in wp-admin you will see in Enfold section that the icons are too big and they are coming over other elements.

Alexandru

March 29, 2018 at 11:07 pm #1560592

Bobby
Supporter

Languages: English (English )

Timezone: America/Los_Angeles (GMT-07:00)

Hello,

I have a few .svg files on my local enviroments that i have created with illustrator(vector files) and i am not able to replicate the issue only if i upload vectors that are bigger than 18x12

if possible please share with me one of your .svg files , you can do this with dropbox or google drive so i can test locally.

March 30, 2018 at 6:44 am #1560680

toudM

hidden link

March 30, 2018 at 5:09 pm #1561118

Bobby
Supporter

Languages: English (English )

Timezone: America/Los_Angeles (GMT-07:00)

Hello,

thank you for sharing the vectors with me!

the vector file for 'en' for example is 711.111W and 473.6H instead of 18x12

in addition not all the vectors are of similar size, small differences but it would be best if they were all 18x12 then you used CSS to increase their size if needed.

the good thing with the vector is that it wont lose its quality doing that compared to a .png

if you have illustrator you can do this as well , i went ahead and resized them for you and they are working as expected

you can find the resized ones here
hidden link

(Note: Its best to keep their names the way i have them with the 1 at the end for caching reasons, you can change them just make sure they are not the same with the previous upload ex.en.svg)

March 31, 2018 at 7:28 am #1561496

toudM

Thank you Bobby!

October 11, 2019 at 1:21 pm #4738707

angeloL-6

Hi,
I saved my flags files 20x20px but they still display huge in my backend, what should I do?
Is there a particular way to save them from Illustrator?
Thanks,

Matteo