Resized/fixed Google logos for Sign In button

README.md

gist-google-logo-resizing

We are making CSS/SVG buttons for Google Sign In but the SVGs are giving us trouble. This to debug what's going on and generate new ones.

Workflow

Took SVG from button builder:

https://developers.google.com/identity/sign-in/web/build-button

and SVG from assets:

https://developers.google.com/identity/branding-guidelines

Reduced SVG from assets to what you see in logo-from-assets.svg

Inspected SVG in Inkscape, saw that we could reduce view box to get only icon

Updated view box to 0 0 18 18

Re-inspected in Inkscape, repositioned SVG and saved

Updated new translate values by hand

Removed translate calls altogether by using svgo

Saved final as logo-from-assets.corrected.svg

We also created a logo-from-builder.optimized.svg for saved space

No ownership claimed

Original images from Google. No ownership claimed by author.

logo-from-assets.corrected.svg

<svg width="46" height="46" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M9.001 10.71V7.362h8.424c.126.567.225 1.098.225 1.845 0 5.139-3.447 8.793-8.64 8.793-4.968 0-9-4.032-9-9s4.032-9 9-9c2.43 0 4.464.891 6.021 2.349l-2.556 2.484c-.648-.612-1.782-1.332-3.465-1.332-2.979 0-5.409 2.475-5.409 5.508s2.43 5.508 5.409 5.508c3.447 0 4.716-2.385 4.95-3.798H9.001v-.009z" fill-opacity=".4"/></svg>

logo-from-assets.svg

logo-from-builder.optimized.svg

logo-from-builder.svg