Help with Globo logo

[felipecrs]

Hi there,

I came up with this svg path for Globo (a Brazilian TV channel):

m2580.5765 17842.7016c81.3706 811.5828 485.4667 997.6738 1238.2478 1076.851 2602.5168 273.7589 5484.3086 337.2281 8181.2098 328.9495 2696.9066 8.2786 5578.6985-55.1906 8181.2095-328.9495 752.7869-79.1772 1156.8773-265.2682 1238.2478-1076.851 149.5805-1490.2138 158.4278-3027.8345 158.4278-4585.9747 0-1558.2113-8.8474-3095.832-158.4278-4586.0455-81.3706-811.583-485.461-997.7448-1238.2478-1076.922-2602.511-273.7589-5484.3029-337.157-8181.2095-328.8785-2696.9011-8.2786-5578.693 55.1196-8181.2098 328.8785-752.7811 79.1772-1156.8773 265.339-1238.2478 1076.922-149.6484 1490.2135-158.4221 3027.8342-158.4221 4586.0455 0 1558.1402 8.7737 3095.761 158.4221 4585.9747m9419.4576 7413.9912c-6623.3496 0-12000.0341-5391.1896-12000.0341-11999.9659 0-6608.9182 5376.6845-12000.0369 12000.0341-12000.0369 6623.2814 0 11999.9659 5391.1188 11999.9659 12000.0369 0 6608.7763-5376.6845 11999.9659-11999.9659 11999.9659m0-7168.1249c-2686.6442 0-4851.6674-2170.8252-4851.6674-4831.8552 0-2661.1008 2165.0232-4831.9262 4851.6674-4831.9262 2686.644 0 4851.7409 2170.8254 4851.7409 4831.9262 0 2661.03-2165.0969 4831.8552-4851.7409 4831.8552

Based on: https://pt.m.wikipedia.org/wiki/Ficheiro:Rede_Globo_logo.svg

It previews ok:

But not in the card:

Maybe it's due to the size, but I don't know how to resize it to 24x24 using that site. Any help would be greatly appreciated.

[Nerwyn]

If you click Convert to absolute on the SVG path editor it makes the coordinates clearer.

After doing that and looking at the coordinates of the right and bottom most points in the icon, it looks like that SVG is 24000 x 25000 pixels! That's way too big.

First find the Y offset of the top most pixel, which is 1256.69. Then use Translate Y to shift the icon up by the inverse of that. Now the icon is 24000 x 24000 pixels, a nice square resolution. Then scale X and Y by 0.001, and you get a neat 24x24 pixel icon.

M2.5806 16.586C2.6619 17.3976 3.066 17.5837 3.8188 17.6629 6.4213 17.9366 9.3031 18.0001 12 17.9918 14.6969 18.0001 17.5787 17.9366 20.1812 17.6629 20.934 17.5837 21.3381 17.3976 21.4195 16.586 21.5691 15.0958 21.5779 13.5582 21.5779 12 21.5779 10.4418 21.5691 8.9042 21.4195 7.414 21.3381 6.6024 20.934 6.4162 20.1812 6.3371 17.5787 6.0633 14.6969 5.9999 12 6.0082 9.3031 5.9999 6.4213 6.0633 3.8188 6.3371 3.066 6.4162 2.6619 6.6024 2.5806 7.414 2.4309 8.9042 2.4222 10.4418 2.4222 12 2.4222 13.5582 2.4309 15.0958 2.5806 16.586M12 24C5.3767 24 0 18.6088 0 12 0 5.3911 5.3767 0 12 0 18.6233 0 24 5.3911 24 12 24 18.6088 18.6233 24 12 24M12 16.8319C9.3134 16.8319 7.1484 14.6611 7.1484 12 7.1484 9.3389 9.3134 7.1681 12 7.1681 14.6867 7.1681 16.8518 9.3389 16.8518 12 16.8518 14.6611 14.6867 16.8319 12 16.8319

[felipecrs]

Wow. Thank you for the great explanation. I know very little about SVG, and this helped me understand it better.